---
version: alpha
name: Mailchimp
description: A warm, hand-built marketing canvas where Cavendish yellow CTAs sit on near-black ink, a Means Web serif carries the headlines, and every button wears a tactile drop-shadow ledge — Intuit's small-business platform that still looks like an illustrator drew it.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f6f2"           # warm cream section bands
  surface-dark: "#231e15"      # the near-black "peppercorn" footer + nav surface

  # Ink / text
  ink: "#231e15"               # near-black warm ink — headings, body, button outlines
  ink-soft: "#403b3b"          # softened warm gray text
  ink-secondary: "#5c574f"     # supporting copy
  ink-muted: "#a6a6a6"         # captions, metadata, disabled
  on-dark: "#ffffff"           # text on the peppercorn dark surface

  # Brand accent — Cavendish yellow
  primary: "#ffe01b"           # the signature CTA fill — Cavendish yellow
  on-primary: "#231e15"        # near-black text on yellow
  accent-teal: "#004e56"       # peppercorn teal — secondary accent, illustration ink
  accent-teal-soft: "#007c89"  # lighter teal for links and hover tints

  # Borders
  border: "#e3e0d6"            # warm hairline dividers, card edges
  border-strong: "#231e15"     # the near-black outline that frames buttons

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#241c15"       # was rgba(36,28,21,0.12) — Google format requires hex
  shadow-block: "#231e15"      # the solid drop-ledge under tactile buttons

typography:
  display-hero:
    fontFamily: "Means Web, Georgia, Times, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.2px
  display:
    fontFamily: "Means Web, Georgia, Times, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  heading:
    fontFamily: "Means Web, Georgia, Times, 'Times New Roman', serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Means Web, Georgia, Times, 'Times New Roman', serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-large:
    fontFamily: "Graphik Web, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Graphik Web, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Graphik Web, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  label:
    fontFamily: "Graphik Web, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button-label:
    fontFamily: "Graphik Web, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Graphik Web, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 64px
  5xl: 80px

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 26px
  round: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-dark-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-cream:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    padding: 12px 24px

  link:
    textColor: "{colors.accent-teal}"
    typography: "{typography.body}"
    padding: 0px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 4px 10px
---

# Mailchimp Design System

## Overview

Mailchimp's site is the rare enterprise marketing canvas that still feels hand-made. The single most distinctive move is the button: a near-black warm-ink outline (`{colors.border-strong}`) with a solid `0px 3.25px 0px 0px` drop-ledge underneath, so every CTA reads as a physical, slightly-raised key you could press. Fill it with Cavendish yellow (`{colors.primary}`) — the brand's electric, unmissable signature — and you have the most recognizable button in SaaS. There is no soft blur, no gradient, no glassy sheen; the depth is a hard, illustrated shadow, the same logic Freddie the chimp's wink is drawn with.

The typography carries the warmth. Headlines run in **Means Web** (`{typography.display-hero}`), a literary, slightly old-style serif at a relaxed weight 400, tightened with negative tracking so big type stays editorial rather than corporate. Body, labels, and UI switch to **Graphik Web** (`{typography.body}`), a clean neo-grotesque sans — the serif/sans pairing splits "voice" (the serif headline that talks to you like a person) from "function" (the sans that runs the interface). It is a deliberately humanist hierarchy: the page speaks in a serif and works in a sans.

Color is disciplined despite the brand's reputation for play. The canvas is mostly white (`{colors.background}`) with warm cream bands (`{colors.surface}`); the workhorse text color is a warm near-black called peppercorn (`{colors.ink}`) rather than pure `#000`, which keeps everything a degree softer. Cavendish yellow is reserved almost exclusively for the primary CTA and small badges — it is never a background wash. A deep peppercorn teal (`{colors.accent-teal}`) anchors the dark footer and the illustration line-work. The result is unmistakably Mailchimp: friendly, tactile, a little hand-drawn, but underneath it a tightly-held two-color-plus-ink system.

**Key Characteristics:**
- Cavendish yellow (`{colors.primary}`) reserved for the primary CTA and small badges — never a background wash
- Signature **tactile button**: near-black outline (`{colors.border-strong}`) + a solid hard drop-ledge (`{colors.shadow-block}`), no blur
- **Means Web** serif (`{typography.display-hero}`) for all headlines — editorial, warm, weight 400
- **Graphik Web** sans (`{typography.body}`) for body, labels, and every UI element — the function voice
- Warm near-black "peppercorn" ink (`{colors.ink}`), not pure black — softens the whole system
- Pill-shaped buttons at a 26px radius (`{rounded.pill}`); inputs stay crisp at 4px (`{rounded.sm}`)
- Warm cream section bands (`{colors.surface}`) instead of cool gray — keeps the page hospitable
- Peppercorn teal (`{colors.accent-teal}`) for links, line-art illustration, and the dark footer surface
- Soft `0px 4px 12px` card shadow (`{colors.shadow-soft}`) coexists with the hard button ledge — two distinct depth languages
- Hand-illustrated brand voice (Freddie the chimp, the wink) sits on top of an otherwise restrained two-accent palette

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas for content and cards.
- **Cream** (`{colors.surface}`): Warm off-white section bands — hospitable, never cool gray.
- **Peppercorn Dark** (`{colors.surface-dark}`): The near-black warm surface used for the footer and dark nav.

### Ink / Text
- **Peppercorn** (`{colors.ink}`): The workhorse near-black for headings, body, and button outlines. A warm black, not pure `#000`.
- **Soft Warm Gray** (`{colors.ink-soft}`): Softened body and dark-button hover.
- **Slate** (`{colors.ink-secondary}`): Supporting copy.
- **Muted** (`{colors.ink-muted}`): Captions, metadata, disabled states.

### Brand Accent
- **Cavendish Yellow** (`{colors.primary}`): The singular brand color. Primary CTAs and small badges only — used sparingly to keep its charge.
- **Peppercorn Teal** (`{colors.accent-teal}`): Secondary accent for links, illustration ink, and the dark footer.
- **Soft Teal** (`{colors.accent-teal-soft}`): Lighter teal for link hover and tints.

### Borders & Shadow Tints
- **Warm Hairline** (`{colors.border}`): Card edges and dividers.
- **Strong Border** (`{colors.border-strong}`): The near-black 1px outline that frames the tactile buttons.
- **Soft / Block** (`{colors.shadow-soft}`, `{colors.shadow-block}`): Opaque stand-ins for the soft card shadow and the solid button drop-ledge (the soft one was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display serif**: `Means Web` (Klim-adjacent literary serif), fallbacks `Georgia, Times, 'Times New Roman', serif`. Carries all headlines.
- **UI sans**: `Graphik Web`, fallbacks `'Helvetica Neue', Helvetica, Arial, sans-serif`. Carries body, labels, buttons, and captions.
- **Tracking**: large serif display uses negative tracking (-1.2px at 64px) to keep headlines dense and editorial; body sans sits at near-zero.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / 400 / -1.2px — **Means Web** marquee headline |
| `display` | 48px / 400 / -1px — large section titles |
| `heading` | 32px / 400 — feature headings |
| `heading-sub` | 24px / 400 — sub-section headings |
| `body-large` | 20px / 400 — **Graphik Web** lead paragraphs |
| `body` | 16px / 400 — standard body and inputs |
| `body-small` | 14px / 400 — dense supporting copy |
| `label` | 13px / 500 — UI labels |
| `button-label` | 16px / 500 — button text |
| `caption` | 12px / 400 — metadata, badges |

### Principles
- **Serif speaks, sans works**: headlines in Means Web give the page a human, editorial voice; every functional element is Graphik Web.
- **Keep weights light**: the serif lives at weight 400 — Mailchimp almost never bolds its headlines, leaning on size and the serif's natural contrast instead.
- **Tighten the big**: negative tracking on display serif; near-zero on body sans.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Generous vertical rhythm (`{spacing.5xl}` = 80px) separates marketing sections; component internals stay compact (`{spacing.md}`–`{spacing.xl}`).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a serif headline + sans subhead + tactile CTA on the left, an illustration or product shot on the right
- Feature areas use 2–3 column card grids on cream bands

### Whitespace Philosophy
- **Warm, not clinical**: cream bands (`{colors.surface}`) and generous padding keep the page hospitable
- **Illustration earns space**: hand-drawn art gets room to breathe rather than being boxed in
- **CTA always findable**: the yellow tactile button is the brightest object on any screen

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, warm hairline `{colors.border}` only | Section bands, most content |
| Outline (Level 1) | `0 0 0 1px` near-black ring (`{colors.border-strong}`) | Resting tactile buttons, inputs |
| Tactile ledge (Level 2) | `0 0 0 1px` ring + solid `0 3.25px 0 0` block (`{colors.shadow-block}`) | The signature pressable button — hard, illustrated depth |
| Soft card (Level 3) | `0 4px 12px` at ~12% peppercorn (`{colors.shadow-soft}`) | Floating cards, popovers, dialogs |

**Shadow Philosophy**: Mailchimp runs two distinct depth languages on purpose. Buttons get a hard, solid drop-ledge — no blur, a literal flat shadow offset 3.25px down — that makes them read as physical, illustrated objects matching the hand-drawn brand. Floating cards and dialogs get a soft, warm-tinted blur (`{colors.shadow-soft}`). The hard ledge is the brand signature; the soft blur is the utility. Never blur a button or harden a card.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Inputs, small chips |
| `md` | 8px | Badges, mid containers |
| `lg` | 10px | Cards, forms |
| `pill` | 26px | Buttons — the default interactive radius |
| `round` | 9999px | Avatars, circular toggles |

Buttons are pill-soft (26px) while inputs stay crisp (4px). The contrast is intentional: the friendly pill button invites a press; the rectilinear input means business.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Cavendish yellow (`{colors.primary}`) fill, peppercorn text, near-black outline + hard drop-ledge, 26px pill. The signature CTA.
- **`button-secondary`** — White fill, peppercorn text and outline, same ledge. The lower-emphasis sibling.
- **`button-dark`** — Peppercorn (`{colors.surface-dark}`) fill, white text, pill. Used on light bands for contrast CTAs.

### Cards
- **`card`** / **`card-cream`** — White or cream surface, warm hairline, 10px radius. Cream variant lives on white bands; white variant lives on cream bands.

### Inputs
- **`input`** — White fill, near-black 1px border, 4px radius. **`input-focus`** strengthens the border to peppercorn — crisp, no glow.

### Navigation
- **`nav-bar`** — Peppercorn dark (`{colors.surface-dark}`) surface, white labels — the dark top bar that anchors the brand.

### Accent
- **`link`** — Peppercorn teal (`{colors.accent-teal}`), underline on hover.
- **`badge`** — Cavendish yellow fill, peppercorn text, 8px radius — the small "new / free" flag.

## Do's and Don'ts

### Do
- Reserve Cavendish yellow (`{colors.primary}`) for the primary CTA and small badges — never a full background
- Give every button the tactile treatment: near-black outline (`{colors.border-strong}`) + a solid hard drop-ledge (`{colors.shadow-block}`)
- Set headlines in **Means Web** serif (`{typography.display-hero}`) at weight 400 — let size, not bold, carry hierarchy
- Run all body, labels, and UI in **Graphik Web** sans (`{typography.body}`)
- Use warm peppercorn (`{colors.ink}`), not pure black, for ink
- Warm the page with cream bands (`{colors.surface}`) rather than cool gray
- Keep buttons pill-shaped at `{rounded.pill}` (26px), inputs crisp at `{rounded.sm}` (4px)
- Let hand-drawn illustration breathe in generous whitespace

### Don't
- Don't blur the button shadow — the drop-ledge is hard and solid, never soft
- Don't harden the card shadow — cards use the soft warm blur (`{colors.shadow-soft}`)
- Don't wash a section in Cavendish yellow — it's an accent, not a canvas
- Don't bold the serif headlines — Means Web stays at weight 400
- Don't use the serif for UI labels or buttons — that's Graphik Web's job
- Don't reach for pure black (`#000`) — the brand ink is warm peppercorn (`{colors.ink}`)
- Don't use cool gray section bands — Mailchimp's gray is warm cream

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; serif hero scales 64px → ~36px; nav collapses to a menu; illustration stacks below copy |
| Tablet | 640–1023px | Two-column feature rows begin; cards reflow to 2-up |
| Desktop | 1024–1279px | Full layout; copy-left / illustration-right hero |
| Large | ≥1280px | Max ~1200px container, centered; section padding opens to `{spacing.5xl}` |

### Touch Targets
- Buttons run ~44px tall with `12px 24px` padding — comfortable for thumbs, and the ledge stays visible
- Pill buttons keep generous horizontal padding so labels never crowd the edge

### Collapsing Strategy
- **Navigation**: dark horizontal nav → menu toggle on mobile; the yellow CTA persists
- **Hero**: serif headline and illustration go from side-by-side to stacked
- **Type**: display serif drops from 64px toward ~36px keeping proportional negative tracking
- **Spacing**: section padding compresses from 80px toward ~48px

### Image Behavior
- Hand-drawn illustration scales as flex/grid children; product shots reflow but keep their soft card shadow

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Peppercorn (`{colors.ink}`)
- Brand accent: Cavendish Yellow (`{colors.primary}`)
- Secondary accent: Peppercorn Teal (`{colors.accent-teal}`)
- Border: Warm Hairline (`{colors.border}`)
- Primary CTA: Cavendish Yellow fill, peppercorn text, tactile ledge

### Example Component Prompts

- "Create a hero on white (`{colors.background}`) with a 64px Means Web serif headline in peppercorn (`{colors.ink}`), weight 400, letter-spacing -1.2px, a Graphik Web subhead at `{typography.body-large}`, and a Cavendish yellow tactile button"
- "Build the signature tactile button: Cavendish yellow (`{colors.primary}`) fill, peppercorn text, a 1px near-black outline (`{colors.border-strong}`), a solid hard drop-shadow `0 3.25px 0 0` in `{colors.shadow-block}` (no blur), `{rounded.pill}` (26px) radius, `12px 24px` padding"
- "Create a cream content card: cream (`{colors.surface}`) fill, warm hairline (`{colors.border}`) edge, `{rounded.lg}` (10px) radius, and a soft `0 4px 12px` shadow in `{colors.shadow-soft}`"
- "Design an input with a label above: white fill, 1px near-black border (`{colors.border-strong}`), `{rounded.sm}` (4px) radius; on focus strengthen the border to peppercorn — no glow ring"
- "Build a small badge: Cavendish yellow (`{colors.primary}`) fill, peppercorn text in `{typography.caption}`, `{rounded.md}` (8px) radius, `4px 10px` padding"

### Iteration Guide

1. Start on white (`{colors.background}`) with warm cream bands (`{colors.surface}`). If you reached for cool gray, warm it.
2. Cavendish yellow (`{colors.primary}`) is for the primary CTA and small badges only. If it's a background wash, pull it back to an accent.
3. Every button must wear the tactile treatment — near-black outline + a solid hard drop-ledge. If your button is blurred, harden it.
4. Headlines are Means Web serif (`{typography.display-hero}`) at weight 400. If you bolded them, lighten back to 400.
5. Body, labels, and buttons are Graphik Web sans (`{typography.body}`). Don't let the serif into the UI.
6. Ink is warm peppercorn (`{colors.ink}`), never pure black.
7. Buttons pill at `{rounded.pill}` (26px); inputs crisp at `{rounded.sm}` (4px). Cards get the soft warm blur, never the hard ledge.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Mailchimp. Brand names and trademarks belong to their respective owners.