# Mailchimp: brand book and build spec

One loud color, warm near-black ink, a serif headline at regular weight, and a voice that explains before it entertains. A small-business brand that never shouts except with its yellow.

From unfairly.ai/brand-guidelines/mailchimp, checked 2026-10-29. Unofficial study; not affiliated with Mailchimp.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Plain on purpose, so the weird lands. Mailchimp is mostly white, off-white and Peppercorn, closing on ochre; yellow is about half a percent of the desktop page. That restraint is what makes one hand-drawn scribble or a flash of Cavendish read instantly as Mailchimp. Based on: From the measured color area on mailchimp.com (2026-10-29), the published "weird but not inappropriate" trait, and the COLLINS illustration system.

## Purpose

Self-description: We empower millions of customers around the world to start and grow their businesses. (published; https://mailchimp.com/about/)

Story: Ben Chestnut and Dan Kurzius ran a web design agency, the Rocket Science Group, serving large corporate clients, and built an email service for small businesses on the side as a cheaper alternative to costly early-2000s email software. Founded in Atlanta in 2001; acquired by Intuit in 2021. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Humble, creative, independent | the workforce they aim for; collaboration and creativity are tools for helping customers reach their goals. | published: https://mailchimp.com/about/ |
| "What makes us different makes us stronger" | an inclusive, equitable organization is good for teams, customers and community. | published: https://mailchimp.com/about/ |
| "Big change can start small" | the idea behind Give Where You Live, its support for small local organizations. | published: https://mailchimp.com/about/ |
| Empower, respect, educate, guide, speak truth | the five writing goals in the content style guide, in that order; 'speak truth' means focusing on real strengths and avoiding grandiose claims. | published: https://styleguide.mailchimp.com/writing-principles/ |

## Fixed and flexible

Never changes:
- The logo and Freddie
- Cavendish Yellow and the ink
- The serif-and-sans type pairing

The one thing that varies: Illustration. It stays playful and changes from piece to piece; everything else holds still.

## Positioning

- **Statement**: For small and mid-sized businesses and advanced marketers, Mailchimp is the email and marketing automation platform that takes the guesswork out of growth with data-backed recommendations, in a brand that is warm, plain and a little weird. (our reading)
- **Category**: "an email and marketing automations platform" (boilerplate wording) (published)
- **Audience**: "small and mid-sized businesses and advanced marketers" (boilerplate wording) (published)
- **Problem**: marketing by guesswork. The 2022 brand campaign framed the job as taking the guesswork out of growing a business; the Feb 2026 release and a homepage proof headline push the same idea through data and AI. (published)
- **Promise**: data-backed recommendations at the heart of your marketing, so you find and engage customers across email, social, landing pages and ads, automatically and with AI. (published)
- **Differentiators**: One platform that connects to other tools: "One marketing platform to unite 300+ apps"; AI recommendations branded 'Mailchimp with Intuit Intelligence' (homepage hero subhead); A free plan for under 250 contacts: "Under 250 contacts? It's free."; Claims to be the "#1 email marketing and automation platform" in a pricing disclaimer, based on December 2023 competitor customer data; A brand character (dry, slightly surreal, hand-drawn) that competitors in email software don't have
- **Alternatives**: costly early-2000s email software, the alternative the founders built against; Other email and automation platforms, unnamed; the '#1' claim is benchmarked against competitor customer data

## Messaging

Boilerplate (published): Intuit Mailchimp is an email and marketing automations platform for small and mid-sized businesses. It helps them start and grow with marketing technology, customer support and content, putting data-backed recommendations at the heart of their marketing across email, social, landing pages and ads.

Taglines:
- Turn ideas into emails & SMS that connect (homepage hero, 2026-10-28; 'that connect' set in yellow italic)
- Millions of users trust us with their email marketing. You can too. (homepage closing band, 2026-10-28)
- Guess Less, Sell More (2022 brand campaign)
- Did You Mean MailChimp? (2017 brand campaign (Droga5); old capital-C spelling)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Results you can measure | Customers see big returns from email, SMS and automation | Up to 27x ROI for Standard plan users (footnote: e-commerce revenue from Standard plan email campaigns, 12/1/24 to 11/30/25); Up to 30x ROI for e-commerce customers who connected their stores (homepage feature card, 2026-10-29; also the Feb 2026 release). A different metric from the 27x Standard plan figure; Up to 8x more orders on average with automation flows versus bulk emails (paid plans, all geographies, January 2023 to January 2025). The homepage figure: use this one | our reading |
| Smarter with data and AI | Recommendations surface your next opportunity | Up to 141% more revenue from predictive-segmented emails (Standard and Premium, connected stores, Jan 1 2022 to Jul 1 2023) | our reading |
| One platform, everything connected | Email, SMS, social, landing pages, ads and 300+ apps in one place | 300+ app integrations | our reading |
| Trusted, easy to start | Millions use it; start free | Four and a half star rating based on 33,000+ reviews (Capterra, TrustRadius, G2); Millions of users / customers (no exact count published); Free plan up to 250 contacts | our reading |

They never claim:
- "Avoid dramatic storytelling and grandiose claims." Focus on real strengths.
- "we never personify him" (Freddie); never write in Freddie's voice
- don't say 'chimp' alone, and avoid ape language or imagery (banana, monkey, 'chimptastic')
- never split the name to make product, service or program names
- "Never use exclamation points in failure messages or alerts."
- don't force a joke; if unsure, keep a straight face
- Every performance number reads 'up to' in body copy, with plan, metric and date range in a numbered footnote; a cumulative total (the $1.1 billion) is stated flat with its date range

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Turn ideas into emails & SMS that connect" | homepage | https://mailchimp.com/ |
| "Businesses like yours are thriving with Mailchimp" | homepage | https://mailchimp.com/ |
| "One marketing platform to unite 300+ apps" | homepage | https://mailchimp.com/ |
| "Millions of users trust us with their email marketing. You can too." | homepage | https://mailchimp.com/ |
| "Find out why customers see up to 27x ROI" | product page | https://mailchimp.com/pricing/marketing/ |
| "Try our Standard plan for free!" | product page | https://mailchimp.com/pricing/marketing/ |
| "Under 250 contacts? It's free." | product page | https://mailchimp.com/pricing/marketing/ |
| "Work with a trusted industry leader" | product page | https://mailchimp.com/pricing/marketing/ |
| "Built to help you grow your own way" | homepage | https://mailchimp.com/about/ |
| "Guess Less, Sell More" | ad | https://mailchimp.com/newsroom/guesswork-campaign-launch/ |
| "Did You Mean MailChimp?" | ad | https://www.creativereview.co.uk/cannes-lions-2017-winners/ |

## Voice

Tone words: Plainspoken, Genuine, Translator, Dry humor.

Traits:
- Plainspoken (published)
- Genuine (published)
- Translators (published)
- Dry humor (published)
- Weird, but not inappropriate (published)
- Smart, but not snobbish (published)
- Educating, but not patronizing or confusing (published)

- Clarity beats entertainment. If a joke doesn't come naturally, leave it out.
- The voice stays the same; the tone follows the reader's state of mind.
- Teach as you go, without talking down: translate jargon into plain words.
- The mascot smiles and winks but never talks.

Rules a copy check enforces:
- Sentence case headlines
- Never: click here, read this. Say the words that describe where the link goes instead
- Active voice, positive phrasing
- No slang or jargon
- Buttons start with a verb and stay short
- No humor or exclamation points in failure messages and alerts; if unsure, keep a straight face
- Never personify Freddie or write in his voice
- Never: chimp (on its own), ape imagery
- Never split the name to make product names

Tone by reader state, 0 (no personality) to 5 (full) (our reading): Celebrating 4, Learning 3, Working 2, Confused 1, Error or billing 0. Our reading, not a published scale. Published basis: tone follows the reader's state of mind; if unsure, keep a straight face; never use exclamation points in failure messages or alerts.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Cavendish Yellow | #FFE01B | accent | Action and emphasis, in small doses: every primary button, the arrow-link circles, check icons, the one boxed number per headline, the hero's italic phrase, the active pager pill on ink. On phones the four feature cards fill yellow (about 7% of the phone page). Never a full-width band on the homepage. |
| Peppercorn | #231E15 | ink | Build with #231E15: mailchimp.com renders all text, button rings, ledges and ink bands in it (observed 2026-10-29). Mailchimp's brand-assets page publishes Peppercorn as #241C15, one step off; use that only when quoting the published palette. |
| White | #FFFFFF | paper | Default ground: nav, logo strip, case studies, integrations, all cards |
| Off-white | #F5F5F5 | surface | Feature-card band, pricing band and disclaimer strip |
| Tint blue | #C5DBF2 | accent_secondary | Occasional section ground on inner pages; not on the homepage |
| Tint cream | #FBEECA | extra | Occasional section ground on inner pages; not on the homepage |
| Tint peach | #FFDBCC | extra | Occasional section ground on inner pages; not on the homepage |
| Tint pink | #FFCCD8 | extra | Occasional section ground on inner pages; not on the homepage |
| Ochre | #E7B75F | extra: footer ground | The whole footer on mailchimp.com, about 15% of the desktop homepage and 27% of the phone homepage (observed 2026-10-29). Ink text and underlined ink links on it. |
| Ochre rule | #AC8848 | extra: footer hairline | 1px rules inside the ochre footer |
| Hairline | #BCBAB6 | extra: border | 1px borders on plan option cards and the case-study stats pane; inactive pager pills on ink |
| Charcoal | #403B3B | extra: footnote text and dark-card border | Footnotes; the 2px border of phone result cards; pager pills on white |
| Logo tile | #F0F4F6 | extra: logo tile ground | Square behind each app logo in the integration tiles |
| Focus | #4BC4C2 | extra: focus ring | 2px focus outline, offset 3px |
| Logo navy | #0D0031 | extra: logo only | The Intuit Mailchimp lockup: dark circle and wordmark |

Proportion (observed; Share of the rendered mailchimp.com homepage at 1440px each color covers, measured from a full-page screenshot on 2026-10-29; "other" is photos, type and mixed pixels. On the 390px phone page the yellow feature cards lift yellow to about 7% and ochre to 27%): White 34%, Off-white 17%, Ochre 15%, Peppercorn 8%, Cavendish Yellow 1%, Photos, type and other 27%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Means Web | Proprietary | Literata | Georgia, serif |
| body | Tally | Proprietary | Hanken Grotesk | Arial, Helvetica, sans-serif |
| mono | Source Code Pro | Open (OFL) | Source Code Pro | monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (phone tracking 0) [Means 64px] | --text-hero-headline-* | display | 62px | 34.88px | 1.239 | -0.62px | 450 |
| Section headline [Means 40px] | --text-section-headline-* | display | 38.75px | 28.09px | 1.033 | -0.39px | 450 |
| Result-band headline [Means 40px; phone 28px] | --text-result-headline-* | display | 38.75px | 27.12px | 1.166 | -0.39px | 450 |
| Pricing headline [Means 48px] | --text-plan-headline-* | display | 46.5px | 35.84px | 1.033 | -0.47px | 450 |
| Stat number (case studies) [Means 48px] | --text-stat-number-* | display | 46.5px | 34.88px | 1.033 | -0.47px | 450 |
| Pull quote on photo [Means 32px] | --text-quote-* | display | 31px | 31px | 1.29 | -0.31px | 450 |
| Lead (phone line height 20px = 1.25) [Tally 400] | --text-lead-* | body | 20px | 16px | 1.6 | -0.2px | 330 |
| Card title (sans, never serif) [Tally 400] | --text-card-title-* | body | 23px | 17px | 1.3 | -0.23px | 330 |
| Card description [Tally 400] | --text-card-body-* | body | 14px | 12px | 1.5 | -0.14px | 330 |
| Card bullet [Tally 400] | --text-card-bullet-* | body | 16px | 12px | 1.35 | -0.16px | 330 |
| Body [Tally 400] | --text-body-* | body | 16px | 16px | 1.75 | -0.16px | 330 |
| Arrow-link label [Tally 400] | --text-arrow-link-* | body | 16px | 16px | 2 | -0.16px | 330 |
| Eyebrow (yellow, on ink) [Tally 500] | --text-eyebrow-* | body | 16px | 16px | 1.5 | 0px | 500 |
| Button (hero CTA is 15px / 600) [Tally 700] | --text-button-* | body | 13px | 13px | 1.5 | 0.26px | 700 |
| Nav link [Tally 700] | --text-nav-link-* | body | 13px | 13px | 1.1 | 0.26px | 700 |
| Small / UI label [Tally 400] | --text-label-* | body | 13px | 13px | 1.25 | -0.13px | 330 |
| Footer column heading [Tally 400] | --text-footer-heading-* | body | 16px | 16px | 1.5 | -0.16px | 330 |
| Footer link (underlined) [Tally 400] | --text-footer-link-* | body | 13px | 13px | 1.35 | -0.13px | 330 |
| Disclaimer and legal [Tally 400] | --text-legal-* | body | 11px | 11px | 1.45 | -0.11px | 330 |

## Layout

Measured on https://mailchimp.com/: computed styles and bounding boxes at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 80px | 29px |
| Section padding | 80px | 48px |
| Container max width | 1280px | full |
| Hero text width | max 960px | full |
| Grid columns | 2 | 1 |
| Gutter | 16px | 16px |
| Card gap | 16px | 16px |
| Navigation height | 68px | 68px |

At every width (observed, 2026-10-29):
| What | 390px | 768px | 1024px | 1440px |
|---|---|---|---|---|
| hero headline size | 36px / lh 46.8 | 48px / lh 57.6 | 64px / lh 76.8 | 64px / lh 76.8, tracking -1.2px |
| hero headline tracking and alignment | 0px, left-aligned, 3 lines | not measured | -1.2px, centered | -1.2px, centered, 2 lines in a 960px box |
| section headline size | 29.25px | 38.4px | 30.72px (module quirk) | 40px, lh 1.0, tracking -0.5px |
| hero lead size | 16px / lh 20 (1.25), left-aligned | 20px / lh 32 | 20px / lh 32 | 20px / lh 32 (1.6), centered, max 720 |
| card body size | 12px / lh 18 | 12px / lh 18 | 11px / lh 16 | 14px / lh 21 (bullets 16 / 21.6) |
| page margin | 29 | 58 | 51 | 80 |
| section padding | 48 / 48 most bands; case studies 48 / 24; pricing 60 / 48; logo strip 32 / 32 | 80 / 80 | 80 / 80 | 80 / 80; logo strip 64 / 64; pricing 32 / 32 around a 472px card |
| container max width | 1280 | 1280 | 1280 | 1280 |
| grid columns | 1 (horizontal carousel, card 329px, next card peeks) | 1 (horizontal carousel, card 678px) | 2 | 2 x 2 (cards 632 x 482) |
| gutter | 16 | 16 | 16 | 16 |

Breakpoints from Mailchimp's CSS: 600, 750, 768, 992, 1100, 1200, 1920px.

Homepage bands, top to bottom (observed):
1. Desktop only: 29px white Intuit co-brand strip, then a 42px ink announcement bar
   - Desktop: co-brand strip: Intuit family wordmarks 9-12px tall at x20, 1px #DEDEDE rule under it; announcement: one centered 13px white line with a dashed-underline link
   - Phone: both strips are hidden
   - Co-brand strip 29px, white, wordmarks left
   - Announcement 42px, #231E15, text 13px / 17.55 white, centered
2. Nav · white · 68px desktop, 60px phone · sticky
   - Desktop: logo 156 x 46 at x16; five 13px/700 links from x187; right: search, language, demo phone line, Log In secondary 86 x 44, Start Free Trial yellow 140 x 44 at 16px from the right edge
   - Phone: logo 162 x 46 left; yellow Start Free Trial 124 x 32 and a 46px hamburger right
   - Nav padding 12px 16px, no border, no shadow
   - Only the nav sticks (top -1px); the strips above scroll away
3. Hero · full-bleed photo with 25% black overlay · 651px tall at 1440
   - Desktop: centered stack: headline 960px box 40px below the photo top, lead max 720, 343 x 48 CTA, then review proof near the bottom
   - Phone: photo 390 x 657 (a separate portrait crop); headline and lead left-aligned at 24px; review proof centered; full-width CTA last
   - Headline 64/76.8, two lines, last two words yellow italic
   - Lead 20/32 white, 23px below the headline
   - CTA 40px below the lead; review proof 112px below the CTA
4. #F5F5F5 band · 80px padding · section headline left · 2 x 2 feature cards · See pricing button
   - Desktop: headline at x80; cards start 64px below; 632 x 482 cards, 16px column gap, 32px row gap; See pricing (117 x 44) centered 64px below the grid
   - Phone: headline 29px two lines; yellow card carousel 329 wide; dot pager; full-width See pricing
   - Four feature cards (components.feature_card)
   - One yellow compact primary under the grid
5. White strip · 64px padding · customer logos in one scrolling row
   - Desktop: logos about 62px tall, black, marquee across the full width
   - Phone: 32px padding, the same marquee
   - No heading, no border, logos in black
6. Ink result band · one result per slide, boxed number · vertical carousel
   - Desktop: 504px tall, padding 117 / 80; text column 900 wide on the left; a soft radial glow (centre about #39352D); vertical pager at x1350
   - Phone: cards 318 x 444 with a 2px #403B3B border, radius 20, in a horizontal carousel; pager below
   - Eyebrow 16/24 500 in yellow
   - Headline 40/45.2 white with one boxed number
   - Source line 13/20 white, then a white-label arrow link 40px below
7. White · section headline + arrow link · case-study carousel · ink + secondary buttons
   - Desktop: headline at x131; arrow link 24px below; 1088 x 650 card centered with neighbours peeking; 40 x 8 pager; buttons 72px below, centered, 16px apart
   - Phone: card 318 wide, photo on top; ink Start Free Trial full width, Request demo as text below it
   - Card: photo pane with serif pull quote, stats pane with two 48px numbers
   - Buttons: secondary Request demo + ink-filled Start Free Trial
8. #F5F5F5 pricing band · copy left, plan card right
   - Desktop: left column 833 wide at x80: toggle, 48px serif headline, 16/28 copy, two-column yellow-check list, arrow link; plan card 370 x 472 at x990
   - Phone: toggle hidden; headline and copy centered; plan card full width; arrow link centered
   - Headline word underlined with a thick yellow bar
   - Plan card: square corners, soft shadow (components.plan_card)
9. White · centered headline, lead and arrow link · three marquee rows of integration tiles
   - Desktop: headline 40/45 centered, lead 20/32, arrow link centered; tiles 446 x 112 in three offset rows that run past both edges
   - Phone: headline 28/31.5 left-aligned; tiles in the same three rows
   - Tiles: logo square, name, one-line descriptor (components.integration_tile)
10. Ink closing band · centered 40px serif line · yellow button with no ring
   - Desktop: 324px tall, padding 80; headline 853 wide, two lines; button 140 x 44 40px below
   - Phone: padding 48; headline 29px, three lines; button full width at 16px margins
   - White headline 40/40 -0.5px
   - Yellow button, no ring, white hover ledge (components.button_on_dark)
11. #F5F5F5 disclaimer strip · numbered 11px footnotes
   - Desktop: padding 40; bold 11px labels, 11/16 text in a 1280 column
   - Phone: collapsed: 24px serif Disclaimers left, View Disclaimers 16/600 with a chevron right
   - Every starred claim on the page has its footnote here
12. Ochre footer #E7B75F · 1042px at 1440
   - Desktop: related links, hairline, five link columns, hairline, Intuit family row, app badges + social + GDPR row, language select + legal
   - Phone: single column: every column stacked, centered Intuit family row, two app badges side by side
   - Hairlines 1px #AC8848
   - Ink text, links underlined

## Page anatomy

How Mailchimp's own landing pages are built, part by part (observed; https://mailchimp.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Two thin strips above the nav on desktop only: the Intuit co-brand strip, then an ink offer bar
- ground: co-brand #FFFFFF, offer bar #231E15
- height: 29px + 42px = 71px; both hidden on phone
- anatomy:
  - co-brand: Intuit, TurboTax, Credit Karma, QuickBooks, Mailchimp wordmarks 9-12px tall from x20, about 24px apart; 1px #DEDEDE bottom rule
  - offer bar: one centered line 13px / 17.55 white, ending in a link with a 1px dashed white underline

**Navigation**
- summary: White 68px bar, sticky, no border: lockup left, five bold 13px links, then utilities and two pill buttons right
- ground: #FFFFFF
- height: 68px desktop, 60px phone
- border: none, no shadow
- logo: Cornerstone lockup SVG (724 x 205 viewBox, all #0D0031): Freddie knocked out of a navy circle, wordmark 'intuit' over 'mailchimp' to its right; rendered 46px tall (156 x 46 box) at x16, vertically centered in the 68px bar; phone 46px tall at x16. File in study.logos[0]
- links: 5 items from x187: Industries and Solutions, Integrations, Resources (each with a 12 x 8 chevron), Switch to Mailchimp, Pricing; 13px / 700 #231E15; about 10px between hit areas
- actions: right side: search icon 20px, language EN 11px/500 with chevron, Get a demo phone line 13/700, Log In secondary 86 x 44, Start Free Trial yellow 140 x 44 ending 16px from the edge
- sticky: the nav sticks at top -1px; the strips above scroll away
- phone: lockup 162 x 46 at x16; right: yellow Start Free Trial 124 x 32 (padding 6px 16px), then a 46 x 39 hamburger (30 x 20 icon). The trial button stays visible next to the logo
- distribution: one flex row 16 to 1424, space-between, packed with no empty middle. Left group ends at x824: logo 16-172, then links at 187-373, 380-493, 504-605, 616-756, 765-824. Right group starts at x821: search 821-857, EN 872-948, Get a demo 962-1169, Log In 1184-1270, Start Free Trial 1284-1424. Gaps between items 7-15px; all vertically centered on the 68px bar
- positions 1440: Pricing link box x765-824 (text from about x773); search icon box x821-857 (20px icon at about x829-849); EN language x872-948; Get a demo x962-1169; Log In x1184-1270; Start Free Trial x1284-1424. So Pricing to search is a few px, search to EN 15px, EN to Get a demo 14px: the right cluster starts immediately after Pricing, no empty middle

**Hero**
- summary: Full-bleed workspace photo under a flat 25% black overlay; centered serif headline with the last two words in yellow italic, lead, one big yellow CTA, then review proof
- desktop: section 719px from the top strips; photo 1440 x 651 starts under the 68px nav. Headline box 960 wide centered (x240), top 40px below the photo top, 2 lines of 64/76.8 breaking after 'into'. Lead 720 wide centered, 23px below. CTA 343 x 48 centered, 40px below the lead. Stars + count row 112px below the CTA, badge row 20px under it, 65px clear of the photo bottom. Image 1920 x 1080 at object-position 50% 15% (scaled to 1440 x 810, top 24px cropped)
- phone: photo 390 x 657 (portrait crop). Order: headline (left, x24, 343 wide, 36/46.8, 3 lines, top 40px below the photo top), lead 16/20 left, stars 139 x 24 centered 56px lower, review line centered, badge row 343 wide, then the CTA 343 x 48 full width; about 150px of photo below the CTA. Image: the site's own portrait file (390 x 844, study.slot_assets hero.phone), object-fit cover, object-position 50% 15%: the 390 x 657 box shows rows 28 to 685, so the plain wall sits behind the headline and lead and the man at the monitor fills the lower half
- media: a real owner at work, product UI legible on the monitor; full colour, warm, not blurred or graded
- type: headline Means 64px desktop / 36px phone, 400, white (= Literata 450 opsz 12 at 62 / 34.9px, -0.01em); italic phrase #FFE01B; lead Tally 20/32 400 white (= Hanken 330, -0.2px)
- cta: one button only: Start Free Trial, yellow, 1px ink ring, radius 40, 15px / 600 (components.button_primary)
- proof: components.review_proof: stars, '*Based on 33,000+ reviews across', Capterra, TrustRadius and G2 marks
- lead budget: one sentence, at most about 20 words (the live lead is 18)
- headline wrap: the yellow italic phrase may wrap across lines. Desktop: 'Turn ideas into' / 'emails & SMS that connect'. Phone (343px): 'Turn ideas into' / 'emails & SMS that' / 'connect', so 'that' ends line 2 and 'connect' stands alone in italic on line 3. Never force the italic phrase onto one line

**Feature cards**
- summary: Section headline left, then four feature cards in a 2 x 2 grid, then one compact yellow button
- ground: #F5F5F5
- desktop: padding 80; headline 40/40 at x80; grid 64px below: 632 x 482 cards, gaps 16 across and 32 down; See pricing 117 x 44 centered 64px below
- phone: padding 48; horizontal carousel of yellow 329 x 632 cards at x29: a 400px text panel with the arrow link pinned to its bottom (20px inset), then a 329 x 232 visual; pager 16px below; See pricing full width (332 x 44). Gap from the bottom of the 8px pager to the top of See pricing: 64px (pager at 1504-1512, button at 1576); 48px below the button to the section end
- anatomy:
  - card: white, radius 24, shadow 0 4px 16px rgba(0,0,0,0.06), padding 48
  - text column 274 wide: 32px line icon, title Tally 23/30 400 (= Hanken 330), description 14/21, three bullets 16/21.6 with 16px ink check-circles
  - inset visual 212 x 266, radius 26, top-right 40px from the edge: a product screen on its own pastel ground
  - arrow link pinned 48px above the card bottom
  - phone visual: object-fit cover anchored to the top (object-position 50% 0), so the email or screen header always stays visible and only the bottom and sides are cut; never center-crop it
- components: feature_card, arrow_link, check_icon, button_primary_compact, pager

**Customer logo strip**
- summary: One row of black customer logos scrolling sideways, no heading
- ground: #FFFFFF
- desktop: 196px tall, padding 64; logos about 62px tall, about 55px apart, running past both edges
- phone: 132px tall, padding 32; same marquee
- anatomy:
  - logos keep their real shapes in black
  - no label, no border, no fade
- components: logo_strip

**Result band**
- summary: An ink band showing one customer result at a time, the number boxed in yellow
- ground: #231E15 with a soft radial glow (centre about #39352D)
- desktop: 504px tall, padding 117 / 80; text column 900 wide: eyebrow 16/24 500 yellow, headline Means 40/45.2 white with one boxed number, source line 13/20 white 16px below, arrow link with a white label 40px below; vertical pager at the right edge
- phone: padding 24 / 20; cards 318 x 444, 2px #403B3B border, radius 20, padding 24; headline Means 28/31.5 (= Literata 27.1px, line box 31.5) on a 266px measure, 6 lines for slide 1 with the box wrapping; label 13px; horizontal pager below
- anatomy:
  - four slides; [brackets] mark the one boxed number
  - Slide 1, eyebrow 'Peak Season': customers generated [$1.1 billion] in gross revenue in just 62 days. Source line: customers on free and paid plans, October 31 to December 31, 2025 (a total, stated flat, no 'up to'). Link: the peak season report
  - Slide 2, eyebrow 'Automation': customers saw up to [8x more] orders on average with automation flows. Source line: orders from bulk emails of paid plan users, all geographies, January 2023 to January 2025; flows vary by plan. Link: marketing automations
  - Slide 3, eyebrow 'SMS Marketing': users saw up to a [97% higher] click rate when they used both email and SMS. Source line: US users sending both email and SMS vs email only, 8/1/23 to 1/05/25. Link: SMS marketing
  - Slide 4, eyebrow 'Ecommerce Marketing': ecommerce users on the Standard plan saw up to [27x ROI]. Source line: all e-commerce revenue attributable to Standard plan users' email campaigns, 12/1/24 to 11/30/25. Link: Mailchimp for ecommerce
  - the source line sits under the headline on the band itself, not only in the disclaimers
- components: result_card, arrow_link, pager, signature: Yellow box on the number

**Customer stories**
- summary: Section headline with an arrow link, then a wide story card carousel, then two buttons
- ground: #FFFFFF
- desktop: padding 80; headline at x131, arrow link 24px below; card 1088 x 650 centered at x176, neighbours peeking; pager 40 x 8 pills 16px below; buttons centered 72px lower
- phone: padding 48 / 20 / 24; card 318 x 641: photo 376 tall with the quote over it, stats 2-up centered, name, arrow link; Start Free Trial ink full width, Request demo as text below
- anatomy:
  - photo pane 805 wide, radius 24 on the left, bottom gradient #231E15 from 0 to 82%; category 16/22.4 500 white, quote Means 32/40 white, max 462 wide
  - stats pane 283 wide, 93% white, padding 40, 1px #BCBAB6 border: number Means 48/48 -1px, label 16/28, then a second pair
  - name line 20/28 at 65% ink with the name bold; arrow link at the bottom
- components: case_study_card, arrow_link, pager, button_secondary, button_ink

**Pricing module**
- summary: Plan pitch on the left, a live plan card on the right
- ground: #F5F5F5
- desktop: 572px tall, padding 32; left column 833 at x80; plan card 370 x 472 at x990, $ USD selector above it
- phone: padding 60 / 48; toggle hidden; headline 37/37 centered; copy centered 16/24; card full width 332; See all plans centered
- anatomy:
  - segmented toggle 282 x 46 (components.segmented_toggle)
  - headline Means 48/48 -1px; the word 'free' underlined with a thick yellow bar
  - copy 16/28 with underlined plan links; features in two 400px columns, 13px text, 20px yellow check circles
  - plan card: square corners, shadow 0 0 20px 3px rgba(35,30,21,0.15), full-width yellow button, 13px #403B3B footnote
  - plan card price: 'Free' in Means 32/40 (28/35 phone), ink, with a #FFE01B underline 8px thick (4px phone), 4px offset; then 'for 14 days' 13px
  - no image in this section
- components: plan_card, segmented_toggle, check_icon, arrow_link

**Integrations**
- summary: Centered headline, lead and arrow link over three sideways-scrolling rows of app tiles
- ground: #FFFFFF
- desktop: padding 80; headline 40/45 centered (1220 box), lead 20/32, arrow link centered; tiles 446 x 112, 24px apart, three rows offset from each other
- phone: padding 48; headline 28/31.5 and lead 16/20 left-aligned at x30; same three rows
- anatomy:
  - tile: white, radius 16, shadow 0 15.5px 44px rgba(0,0,0,0.086), padding 16
  - 80 x 80 logo square #F0F4F6 radius 4; name 16/32 500; descriptor 14/20
- components: integration_tile, arrow_link

**Closing band**
- summary: Ink band with one centered serif line and one yellow button
- ground: #231E15
- desktop: 324px tall, padding 80; headline 853 wide centered, Means 40/40 -0.5px white, 2 lines; button 140 x 44 centered 40px below
- phone: 251px tall, padding 48; headline 29px, 3 lines, at 16px margins; button 362 x 44 full width
- anatomy:
  - button has no ring on ink; hover lifts onto a white ledge
- components: button_on_dark

**Disclaimers**
- summary: Numbered footnotes for every starred claim
- ground: #F5F5F5
- desktop: 176px, padding 40; '*Disclaimers' 11px/500, then a numbered list 11/16 with bold lead-ins
- phone: 108px, padding 24; collapsed row: 'Disclaimers' Means 24px left, 'View Disclaimers' 16/600 with a 16px chevron right
- anatomy:
  - text #231E15, no rules

**Footer**
- summary: A tall ochre footer: related links, five underlined link columns, the Intuit family row, app badges and social icons, then legal
- ground: #E7B75F
- anatomy:
  - padding 60 top and bottom; content inset to x102-130
  - Related Links: 16/24 heading, three 13px underlined links 34px apart
  - 1px #AC8848 hairline 246px below the footer top, full-bleed: x 0 to 1440, edge to edge, not inset with the content
  - five columns at x130, 362, 608, 862, 1100: headings Tally 16/24 400 (= Hanken 330) ink, 24px gap, then 13/17.55 underlined ink links 31.5px apart
  - second #AC8848 hairline (also full-bleed, 0 to 1440), then the Intuit family wordmarks centered (12px icons)
  - row: App Store and Google Play badges 115 x 34, six 20px social icons 24px apart, GDPR badge 102 x 40
  - language select 203 x 41 with a 1px ink border, then legal 11/16 with bold underlined links
- phone: padding 40; one column at x16: related links, then each column stacked (heading 16/24, links 13px 32px apart), Intuit family row centered on two lines, two app badges 135 x 44 side by side, social icons, language select full width
- lower rows:
  - desktop row 1 (y +740 from footer top): Intuit family wordmarks centered on the page, x512-928 (center 720), 42px tall
  - desktop row 2 (47px lower): one centered row x337-1084: App Store and Google Play 115 x 34 with 20px between, 40px gap, six social icons 20px tall on a 44px pitch (x659-910), 72px gap, GDPR badge 102 x 40; all vertically centered
  - desktop row 3 (54px lower): language select 203 x 41 at x257, 40px gap, legal text 684 wide (x500-1184), 11/16, 3 lines; the pair is centered on 720; 60px bottom padding
  - phone: Intuit family centered (wordmark row, then two rows of two); 2 app badges 135 x 44 side by side (x44 and x211); six socials spread across x40-351 on a 50px pitch; GDPR badge 102 x 40 centered; language select full width 336 x 41 at x28; legal 334 wide, 11/16
- columns: Related Links 3; Products 9; Resources 4; Community 3; Company 5; Help 4 (28 column links in all)

**On dark grounds**
- primary button: Cavendish Yellow, ink text, no ring; hover lifts 0.375em onto a white ledge
- secondary button: not used on the homepage's ink bands (observed 2026-10-29): use the yellow primary or an arrow link
- link: arrow link with a white 16/32 label (13px on phone) and the yellow 32px circle with an ink arrow
- text: headlines and body white #FFFFFF; eyebrows #FFE01B 16/24 500; no grey muted text on ink
- hairline: 2px #403B3B (phone result cards); pager pills #BCBAB6, active #FFE01B
- photo overlay: flat rgba(0,0,0,0.25) over the hero photo; no gradient, no blur
- logo on dark: the homepage never puts the logo on dark: it sits on the white nav, and the footer is ochre with ink wordmarks. Brandfetch has no reverse variant (checked 2026-10-29); Mailchimp's brand-assets page shows the lockup in white on black

## Components

- **button primary** (observed): fill accent, text ink, ring px 1, ring ink, radius pill, height 48, padding x 24, font size 15, weight 700, width in hero 343px, site weight 600, letter spacing +0.02em (Hanken stand-in for Tally bold). Hero CTA size: 343 x 48 on desktop (centered) and phone (full width at 24px margins). Every other primary is button_primary_compact
  - hover (observed): lift -0.375em, ledge solid ink drop under the lifted button, easing cubic-bezier(0.5, 2.5, 0.7, 0.7), 0.3s
  - focus (observed): ring 2px solid #4BC4C2, offset 3px, follows the pill
  - active (observed): lift half
  - disabled (observed): note from CSS, not seen on the homepage
- **button secondary** (observed): fill none, text ink, ring px 1, ring ink, radius pill, height 44, padding x 24, font size 13, weight 700, site weight 700, letter spacing +0.02em (Hanken stand-in for Tally bold). Request demo, Log In. Light grounds only: the homepage never puts a secondary on ink. On phone under the story carousel it drops its ring and reads as a text button
  - hover (observed): lift -4.875px with ink ledge
  - focus (observed): ring 2px solid #4BC4C2, offset 3px
- **card** (observed): fill paper, on surface, radius 24, shadow 0 4px 16px rgba(0,0,0,0.06), border none, arrow true. White card on the #F5F5F5 band. The full feature-card anatomy is feature_card
- **cta link** (observed): . In-copy text link (underlined plan names in the pricing copy): ink, underlined; hover swipes a 65% yellow highlight behind the word
  - hover (observed): background rgba(255,224,27,.65), box shadow 0 0 0 2px rgba(255,224,27,.65), note a yellow highlighter swipe behind the underlined word
  - focus (observed): background rgba(255,224,27,.65), box shadow 0 0 0 2px rgba(255,224,27,.65), outline browser default (1px auto), note .textLink class elsewhere uses 2px solid #4BC4C2, offset 6.5px
- **button primary compact** (observed): fill accent, text ink, ring px 1, ring ink, radius pill, height 44, padding x 24, font size 13, weight 700, site weight 700, letter spacing +0.02em (Hanken stand-in for Tally bold). Nav trial button (140 x 44), See pricing, plan card (full width), closing band. On phone section CTAs go full width
  - hover (observed): lift -0.375em, ledge solid ink drop under the lifted button
  - focus (observed): ring 2px #4BC4C2, offset 3px
- **button nav phone** (observed): fill accent, text ink, ring px 1, ring ink, radius pill, height 32, padding x 16, font size 13, weight 700, site weight 700, letter spacing +0.02em (Hanken stand-in for Tally bold). Phone nav: 124 x 32 Start Free Trial beside the logo, always visible
- **button ink** (observed): fill ink, text paper, ring px 1, ring ink, radius pill, height 44, padding x 24, font size 13, weight 700, site weight 700, letter spacing +0.02em (Hanken stand-in for Tally bold). Ink-filled Start Free Trial under the case-study carousel, paired with a secondary Request demo (16px gap); hover not measured
- **button on dark** (observed): fill accent, text ink, radius pill, height 44, padding x 24, font size 13, weight 700, site weight 700, letter spacing +0.02em (Hanken stand-in for Tally bold). The yellow primary on an ink band: no ring; the hover ledge is white
  - hover (observed): lift -4.875px, ledge white
  - focus (observed): ring 2px #4BC4C2, offset 3px
- **arrow link** (observed): anatomy label, 8px gap, then a 32px Cavendish Yellow circle holding an 18px ink right arrow (inset 7px). No underline, fill accent, radius 16, circle 32px, arrow icon 18 x 17px, ink, solid stroke arrow, label 16px / 32px line, 400, ink (15px / 500 inside feature cards); white label on ink bands, circle stays yellow with an ink arrow, phone in yellow card label 12px / 500, circle 20px ink with a white arrow, hover a yellow pill grows behind the whole link and the circle turns ink with a yellow arrow, sliding right about 27px; left 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), use every secondary action on the page: card links, View all case studies, See all plans, View all integrations, result-band report link
- **feature card** (observed): anatomy 2 x 2 grid. Left text column 274px: 32px line icon, title, description, 3 bullets, arrow link pinned to the bottom. Right: an inset product visual 212 x 266, radius 26, top-aligned, size at 1440 632 x 482, fill paper, radius 24, shadow 0 4px 16px rgba(0,0,0,0.06), padding 48px; visual 40px from the right edge, title Tally 23px / 30px at weight 400, built as Hanken Grotesk 330 with -0.23px (the calibrated match for Tally 400); sans, never the serif, description 14px / 21px, 12px below the title, bullets 16px / 21.6px, 24px indent, 16px ink check-circle, 8px apart; the list fades out at the bottom, link arrow link 48px above the card bottom, visual a product screen (email, phone UI, app-logo collage) on its own soft color ground, cropped by the 26px frame, phone horizontal carousel, card 329 x 632 filled Cavendish Yellow, 16px apart with the next card peeking. Top: a yellow text panel 329 x 400 (fixed min height), padding 20, laid out as a column: icon, title 17/24, text 12/18, bullets, then the arrow link pinned to the panel bottom (link box 192 x 18, its top 361px from the card top, 20px above the panel bottom). Bottom: the visual as a 329 x 232 panel flush with the card bottom, no radius of its own. Dot pager 16px below, icons 32 x 32 line icons in #231E15 with about 2px strokes, square ends: card 1 picture frame; card 2 price tag on a string, hole near the top, tilted 45 degrees; card 3 smartphone outline with a speaker bar on top and a small filled square at the bottom; card 4 nine-cell 3 x 3 grid of squares, three filled (top right, middle left, bottom right) (files in slot_assets), phone visual fit object-fit cover, object-position 50% 0 (top): the visual's header always stays visible; crop only from the bottom and sides; never center-crop
- **review proof** (observed): anatomy row 1: five large yellow stars (the last one half) beside 16px white text with the count in 500; row 2: Capterra, TrustRadius and G2 marks in their own colors, stars 174 x 30 desktop, 139 x 24 phone, badges Capterra 135 x 43, TrustRadius 216 x 39, G2 37 x 38 in a 452px centered row; phone 94, 166 and 29px wide at 30px tall, spread across 343px, placement desktop: 112px below the CTA, near the photo bottom; phone: above the CTA
- **media frame** (observed): hero full-bleed photo, object-fit cover, flat 25% black overlay, no radius, feature inset radius 26, object-fit cover, case study photo pane radius 24 0 0 24 (left side of the card), bottom gradient rgba(35,30,21,0) to 0.82, phone case study radius 16 16 0 0, 318 x 376
- **logo strip** (observed): anatomy one row of customer logos, black, about 62px tall, auto-scrolling marquee, about 55px between logos, no heading, padding 64px desktop, 32px phone, ground paper
- **result card** (observed): anatomy yellow 16px eyebrow, 40px serif headline with one boxed number, 13px source line, arrow link with a white label, desktop left column 900px on the ink band; vertical pager on the right edge, phone card 318 x 444, 2px #403B3B border, radius 20, padding 24, horizontal carousel. Headline: Means 28px / 31.5 on the site = Literata 450 opsz 12 at 27.1px, -0.27px, line box 31.5px; line measure 266px. Slide 1 sets in 6 lines (194px tall) with the yellow box breaking across lines: 'Mailchimp' / 'customers' / 'generated [$1.1' / 'billion] in gross' / 'revenue in just 62' / 'days.'
- **case study card** (observed): anatomy left photo pane with a category label and serif pull quote on a bottom gradient; right stats pane with two big numbers, a name line and an arrow link, size at 1440 1088 x 650, centered; neighbours peek at the sides, scaled to about 89%, radius 24, shadow 0 8px 64px rgba(35,30,21,0.06), 0 4px 8px rgba(35,30,21,0.04), stats pane 283px wide, rgba(255,255,255,0.93), padding 40, 1px #BCBAB6 border, phone 318 wide: photo 376 tall on top, stats 2-up centered below, radius 16
- **plan card** (observed): anatomy serif plan name 40px, 13px sends line, contacts select, two option cards (radio right), full-width yellow primary, 13px footnote, size at 1440 370 x 472, radius 0, shadow 0 0 20px 3px rgba(35,30,21,0.15), padding 24px 16px, option card radius 10, 1px #BCBAB6; closed option on #F5F5F5, price 'Free' set in the serif, Means 32px / 40px (28/35 phone), 400, ink, underlined in Cavendish Yellow 8px thick (4px phone), offset 4px; the headline's 'free' uses the same yellow underline at 8px, offset 6px
- **integration tile** (observed): anatomy 80 x 80 logo square on #F0F4F6 (radius 4), then app name 16/32 500 and a 14/20 descriptor, size 446 x 112, radius 16, shadow 0 15.5px 44px rgba(0,0,0,0.086), padding 16, layout three full-bleed rows, 24px apart, scrolling sideways as a marquee
- **check icon** (observed): in feature cards 16px ink circle, white tick, in pricing 20px Cavendish Yellow circle, 10px ink tick
- **pager** (observed): on ink desktop vertical pills 8px wide: active 8 x 52 yellow, others 8 x 36 #BCBAB6, 10px apart, radius 4, on ink phone active 40 x 8 yellow, others 8 x 8 #BCBAB6, on white 40 x 8 #403B3B pills (phone: active 24 x 8, others 8 x 8), feature cards phone active 32 x 8 ink, others 8 x 8 ink at 30%
- **segmented toggle** (observed): anatomy white pill 282 x 46, 1px rgba(35,30,21,0.3) border, padding 6; active segment ink with white 13px/500 text, the other white, radius 30, where above the pricing headline; hidden on phone

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-lift | cubic-bezier(0.5, 2.5, 0.7, 0.7) | 300ms | buttons hop up onto an ink ledge on hover (the overshoot is the point) | observed |

## Signature moves

### Yellow box on the number

Where: the ink result band (and its phone cards): one number per headline.
Do: the number or result phrase only, Cavendish Yellow fill, ink text, padding 0.06em 0.18em, radius 3px, same size and weight as the headline. One per headline.
Don't: highlight a whole phrase, or two things in one headline.
Example: "Customers saw 3x more replies in 30 days", with "3x more" set as box.

### Yellow italic phrase

Where: the hero headline on the dark photo; the last two words.
Do: the last two or three words in the display face's italic, accent color, on night or a dark photo only. One per page.
Don't: use the yellow italic on white: it disappears.
Example: "Turn ideas into posts that land", with "that land" set as italic.

### Buttons hop onto an ink ledge

Where: every button on hover.
Do: the button lifts 0.375em with a bouncy overshoot, cubic-bezier(0.5, 2.5, 0.7, 0.7) over 0.3s, and a solid Peppercorn ledge appears under it. Every interactive button.
Example: "Start free trial".

## Messaging: rules

Mailchimp's content style guide orders its writing goals as empower, respect, educate, guide, speak truth, and asks for four qualities in every piece: clear, useful, friendly, appropriate.

Why it works: Goals in a fixed order settle arguments: when a line can't both educate and entertain, educating wins.

- Pages run title, short intro, body in small chunks under headings, then related links
- Related links: four at most, from a step down to a step up in complexity
- State real strengths; skip dramatic storytelling and exaggerated claims

Sources: https://styleguide.mailchimp.com/writing-principles/, https://styleguide.mailchimp.com/creating-structured-content/, https://styleguide.mailchimp.com/web-elements/

## Voice: rules

The voice is fixed: plainspoken, genuine, a translator, with dry humor. The tone moves with the reader, so a billing error never gets a joke.

Why it works: Splitting voice (who you are) from tone (how you read the room) lets a playful brand stay trustworthy in serious moments.

Do and don't:
- Do: "Your payment didn't go through. Update your card to keep sending.". Errors and billing: plain, no joke, the fix in the same breath.
- Don't: "Oops! Looks like your card took a little vacation 🌴". Humor in a billing error. Their guide drops jokes when the reader is stressed.

Sources: https://styleguide.mailchimp.com/voice-and-tone/, https://styleguide.mailchimp.com/writing-about-mailchimp/

## Logo: rules

The wordmark always travels with Freddie, the winking chimp, who was simplified in 2018 so he works at any size. The current lockup stacks INTUIT over the mailchimp wordmark.

- Freddie always winks
- Use the reverse version on dark backgrounds
- One word, capital M, lowercase c; never split the name to name products
- The reverse version is in their asset download, not shown here
- Don't alter the files
- Don't imply an endorsement
- Don't use the logo in your own product or business name
- Don't combine it with other graphics without written consent

Not published: a numeric clear-space unit; a minimum size.

Sources: https://mailchimp.com/about/brand-assets/, https://www.designweek.co.uk/mailchimp-rebrand-aims-to-unify-bran/

## Color: rules

Cavendish Yellow marks action: buttons, arrow circles, checks, one boxed number. The page is white and off-white with two ink bands, and it ends on a big ochre footer.

Why it works: When one color only ever means the brand or the next action, the eye learns it in a page. Ink on yellow, not white, keeps the yellow loud and readable.

- Text on the yellow is ink, never white
- Yellow is never body text, and never a full-width band on the homepage
- Ochre #E7B75F is the footer ground; nowhere else on the page
- Tints are grounds on inner pages, never text

Not published: official color proportions (the split below is measured, not published).

Do and don't:
- Do: "Start free trial". Yellow means the next action: a filled pill with ink text.
- Don't: "Grow your audience". Yellow as text on white fails contrast (1.3:1) and stops meaning action.
- Do: "Ink for the result and the close". Ink is the contrast moment: the result band and the closing band.
- Don't: "Everything in yellow". A page that is mostly yellow loses the one color that meant something.

Sources: https://mailchimp.com/about/brand-assets/, https://mailchimp.com/

## Typography: rules

Headlines are Means, a serif, at regular weight with slightly negative tracking; everything else is Tally, a sans. The hero's last words switch to the serif's italic. The 2018 COLLINS system launched with Cooper Light for headlines; the site now serves Means (observed).

Why it works: A regular-weight serif reads warm and confident at size; bold would turn warm into loud.

- Hero headline 64px desktop, 36px phone; section headline 40px, 29px phone
- Line height 1.2 for the hero, 1.0 for section headlines
- Display face at regular weight (400), never bold
- The serif is only for headlines, big numbers and pull quotes; card titles, nav, buttons and links are sans
- Sentence case for every heading and button
- Buttons in sentence case (published); mailchimp.com drifts to title case on some CTAs (observed)

Do and don't:
- Do: "Turn ideas into emails that connect". Serif headline at regular weight, sentence case.
- Don't: "TURN IDEAS INTO EMAILS". Bold, all caps: warm becomes loud.

Sources: https://mailchimp.com/

## Illustration: rules

Hand-drawn and deliberately imperfect, drawing on outsider art, mostly by in-house artists and several illustrators. COLLINS describes the aim as a balance of the sophisticated and the surreal.

Why it works: Every SaaS brand has flat vector people. A loose, slightly strange hand is the one thing a competitor can't drop into its own deck, and it carries the brand even when the yellow is absent.

|  |  |
|---|---|
| Brand moments | loose, hand-drawn black line, scribbled and a little surreal, beside a serif headline (COLLINS, 2018) |
| Product moments | thin, even black line drawings of the product's objects on a soft pastel ground |
| Color | black line; color only as a flat ground (yellow or a pastel) |
| Never | flat vector people, gradients, 3D |

_Observed from the COLLINS case study and mailchimp.com, 2026-10-29._

- Illustration is the layer that changes; the logo, type and color don't
- Several illustrators, one hand: imperfect line, surreal ideas, never stock vector

Not published: a public illustration guideline page with rules, types or color use.

Real examples, to look at on Mailchimp's own pages (not for reuse):
- Brand: loose hand-drawn line on a pastel ground: https://mailchimp.com/about/
- Product: thin even line on a pastel ground: https://mailchimp.com/features/

Sources: https://www.wearecollins.com/work/mailchimp/, https://www.designweek.co.uk/issues/1-7-october-2018/mailchimp-rebrand-aims-to-unify-bran, https://www.creativereview.co.uk/mailchimp-rebrand-by-collins/

## Photography: rules

Real small-business owners and teams at work, shot candidly in daylight, often with the product readable on a screen. The hero photo runs full-bleed under a light overlay; elsewhere photos sit in 24px corners.

|  |  |
|---|---|
| Subject | a real person or team doing their actual work, often with the product on a screen |
| Pose | candid, not looking at the camera |
| Light | natural daylight, warm interiors |
| Color | full color, ungraded, warm |
| Frame | hero: full-bleed under a flat 25% black overlay, 16:9; story cards: radius 24; feature insets: radius 26 |
| Never | stock handshakes, studio white backgrounds, people posing at the lens, blur |

_Observed from the photos on mailchimp.com and its feature pages, 2026-10-29. Mailchimp publishes no photography rules._

- Every slot image is customer-specific and a little surprising: their product, their place, their crowd. Never a generic smiling-team stock shot

Real examples, to look at on Mailchimp's own pages (not for reuse):
- Hero photo: owner at work, the product on screen: https://mailchimp.com/
- Close, warm, the phone in use: https://mailchimp.com/features/marketing-automation/
- A customer's own world: festival fireworks for C3 Presents: https://mailchimp.com/

Sources: https://mailchimp.com/, https://mailchimp.com/features/marketing-automation/, https://mailchimp.com/about/

## Interface and layout: rules

Full-bleed bands: dark photo, #F5F5F5, white, ink, white, #F5F5F5, white, ink, then the ochre footer. Content sits 80px in on desktop and 16 to 29px in on phones; most sections turn into swipe carousels on phones.

Real examples, to look at on Mailchimp's own pages (not for reuse):
- Product UI: a flow builder on white, the kind of screen feature cards inset: https://mailchimp.com/features/marketing-automation/
- Product UI: one simple panel on a warm ground: https://mailchimp.com/features/marketing-automation/
- Product UI: email and calendar, yellow only on the active item: https://mailchimp.com/features/marketing-automation/

Sources: https://mailchimp.com/

## Rules: rules

- Yellow marks action and emphasis: buttons, arrow circles, checks, the hero italic, one boxed number
- Two ink bands on the homepage: the result band and the closing band
- Lead buttons with a verb
- Keep jokes out of errors, payment and legal
- Don't use the yellow for body text or decoration
- Don't put white text on the yellow
- Don't stack bold display weights at large sizes
- Don't set card titles or nav in the serif
- Don't give the mascot a speaking voice

Sources: https://mailchimp.com/about/brand-assets/, https://styleguide.mailchimp.com/voice-and-tone/

## Campaigns

### Did You Mean MailChimp? (2017)

Droga5 built Mailchimp's first major campaign on people mishearing the name, from a 2014 'MailKimp' read in the Serial podcast ad. Unbranded one-minute films and pieces riffed on near-miss names (JailBlimp, MailShrimp, KaleLimp, FailChips, SnailPrimp, VeilHymn); searching them led back to Mailchimp. Won the 2017 Cannes Lions Cyber Grand Prix.

How the system shows: Pre-2018 brand (capital C), so the visual system isn't the current one; what carries over is the dry, absurd humor and bringing the audience in on the joke.
Why it works: It turns a weakness (a name people get wrong) into a puzzle, and the payoff only lands for people who go looking, which flatters them instead of shouting at them.
Channels: short films in cinemas, online video, microsites and search, music, podcast heritage. Source: https://www.creativereview.co.uk/cannes-lions-2017-winners/

### Mailchimp Presents (2019)

Launched 10 June 2019 as a free 'digital business entertainment platform': original and licensed series, films and podcasts for entrepreneurs, made with partners including VICE, Pineapple Street Media and Scout Productions (titles such as Outer Monologues, Second Act, Lifecycle of a Business). Funded partly by cutting traditional brand advertising.

How the system shows: Content instead of ads, aimed at the same small-business reader; the weird, warm tone of the 2018 system extended into long-form entertainment.
Why it works: The brand owns the media rather than renting ad space, and earns time with the audience by being useful and entertaining about running a business.
Channels: streaming video, podcasts, short films. Source: https://www.tubefilter.com/2019/06/10/mailchimp-presents-streaming-service-original-content/

### Guess Less, Sell More (2022)

Conceived by Wink Creative (in-house) with SMUGGLER and director Björn Rühmann; launched 7 Sept 2022 and ran into 2023. Surreal mash-ups of everyday things (a cat-owl-bat, a sandwich-sandals-witch) stand in for marketing guesswork. Extended into 'NYFW: The Shows Capsule Collection, presented by Mailchimp' with IMG and the Black in Fashion Council.

How the system shows: The COLLINS 'sophisticated and the surreal' balance in motion: strange, crafted images carry the idea, the line stays plain.
Why it works: The absurd image makes you stop; the plain line tells you the benefit. Weird for attention, clear for meaning, the same split the voice guide asks for.
Channels: film, digital, social, event (New York Fashion Week), fashion capsule collection. Source: https://mailchimp.com/newsroom/guesswork-campaign-launch/

## Applications

| Format | What | Source |
|---|---|---|
| website | Homepage hero: dark photo, Means serif headline with the last words in yellow italic, yellow pill CTA, review-rating strip | https://mailchimp.com/ |
| event / merch | NYFW: The Shows Capsule Collection, presented by Mailchimp: pop-up show with five BIFC designers, limited-edition pieces sold at Spring Studios and online (2022) | https://mailchimp.com/newsroom/guesswork-campaign-launch/ |
| film / podcast | Mailchimp Presents: original series, films and podcasts streamed free (2019) | https://www.tubefilter.com/2019/06/10/mailchimp-presents-streaming-service-original-content/ |
| cinema | Did You Mean MailChimp? one-minute unbranded films screened in select U.S. theaters (2017) | https://www.thedrum.com/news/2017/02/21/mailchimp-explains-why-things-failchips-and-snailprimps-are-all-part-its-first-major |
| print / direct mail | Postcards, Mailchimp's first offline product, launched alongside the 2018 rebrand | https://www.itsnicethat.com/news/mailchimp-collins-brand-system-graphic-design-270918 |
| report | Against All Odds, an annual report on businesses that succeeded in 2020 (Wink Creative) | https://mailchimp.com/newsroom/in-house-agency-of-the-year/ |
| brand guidelines | 2018 system by COLLINS: new logotype, simplified Freddie, Cavendish Yellow palette, Cooper Light type at launch, outsider-art illustration | https://www.itsnicethat.com/news/mailchimp-collins-brand-system-graphic-design-270918 |

## By format

How our engine applies Mailchimp's system to each format. This is our recipe built from their rules, not something Mailchimp publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Dark-photo hero with the yellow-italic phrase, one 343 x 48 yellow CTA and review proof; 2 x 2 feature cards on #F5F5F5 with arrow links; logo strip; an ink result band with one boxed number; an ink closing band; ochre footer | the photo, two or four feature cards, whether the story carousel, pricing and integrations sections appear |
| Deck | 2 | Ink type on white, the yellow on the title slide and the ask | one illustration per section opener |
| Proposal page | 2 | Yellow on the next-step button only; one ink band for the price | a spot illustration at the top |
| Ad | 4 | Yellow ground, ink headline, the logo | the illustration carries the idea |
| Social post | 5 | Yellow or the illustration, plus the wordmark | the loudest, strangest illustration |
| Email | 1 | Logo top left, one yellow button | none: plain and useful |
| Error or billing message | 0 | Plain words, no joke | none |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Mailchimp: the yellow, the ink, the serif, the hand-drawn strangeness.
- **Swap test**: Put a competitor's logo on it. If it still fits, it's generic, and it goes back.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Mailchimp's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Positioning and messaging pillars (no public positioning document)
- Published photography and illustration rules (the specs here are observed)
- Icon and motion rules
- Numeric clear space and minimum logo size
- states.input: the homepage has no visible text input (only hidden radio inputs); not measured.
- voice.tone_matrix: Mailchimp publishes no tone matrix or scale.
- positioning.statement and messaging.pillars: no published positioning document; both inferred from boilerplate, site and campaigns.
- Did You Mean MailChimp? details rest on trade press (The Drum, Creative Review winners list); The Drum page would not load for direct reading on 2026-10-28, so execution names come from search summaries of it.
- 'Mailchimp Your Marketing' (later Wink campaign) and the 'Email is Dead' Design Museum activation were seen in search results but their pages returned 403; left out.
- ROI figures measure different things: up to 27x is Standard plan email ROI, up to 30x is e-commerce stores connected to Mailchimp; both on mailchimp.com (2026-10-29).
- Reverse (on-dark) logo: Brandfetch has no light-theme file (checked 2026-10-29) and the homepage never shows one.
- Secondary button on an ink ground: not used on the homepage; not measured.
- Hover states on phone, the ink button's hover and the 768px hero tracking were not measured.

Logos and reference images belong to Mailchimp. Look at them on Mailchimp's own pages; don't reuse them.