What is Mailchimp's primary brand color?

Mailchimp Yellow at `#ffe01b` is the brand voltage, but it is not the system primary. The system primary is Cavern brown (`#231e15`) — it carries every headline, body label, button stroke, and nav link, appearing 390 times across the inspected page. Yellow surfaces in only two places: the fill behind the bordered pill CTA (`button-primary`) and the text-selection highlight at 15% alpha (`rgba(255,224,27,0.15)`). It never appears as a section background or body color, which is why one yellow pill on a section reads as the action.

What fonts does Mailchimp use, and what should I substitute?

Two families. Means Web (serif) carries every h1 and h2 — 48px / weight 400 / -1px tracking for the hero, 40px / weight 400 / -0.5px for section headlines. Graphik Web (sans) carries everything else — 24px subheads, 16px body, 13px nav and CTA, 11px legal copy, all at weight 400 or 500. Means Web is licensed from Commercial Type; Tiempos Headline, GT Sectra, or Source Serif Pro are reasonable open substitutes. Graphik Web's closest free swap is Inter at weight 400/500, with letter-spacing left at 0 to match.

Why is Mailchimp's primary CTA both filled AND outlined?

The `button-primary` is a 26px-radius pill (2em) with a `#ffe01b` Yellow fill AND a 1px Cavern (`#231e15`) stroke and `#231e15` label — three concurrent treatments rather than the usual two. Where most pill buttons pick fill OR outline, Mailchimp uses both: the outline turns the Yellow into something that reads as a hand-rendered postage stamp rather than a flat fintech button. It is the single design move that makes a Mailchimp button identifiable across the page, and the reason the same Yellow on a borderless rectangle would not feel like Mailchimp at all.

Why is Mailchimp's text Cavern brown instead of black?

Cavern (`#231e15`) is a very dark warm brown — not black, not gray. It appears 390 times across the page as text, button strokes, link underlines, and 1px hairlines. Pairing Cavern with the off-white (`#efeeea`) page floor gives the canvas a paper-stock warmth that pure `#000000` on `#ffffff` cannot produce. Black (`#000000`) does appear on the page (667 times, mostly inside iframes and embedded SVGs) but the system-authored text always resolves through the CSS variables `--copy-color`, `--heading-color`, and `--cta-text-color`, which all point at `#231e15`.

Does Mailchimp have a dark mode?

Not as a togglable theme. The marketing site is light-only — `#efeeea` off-white and `#ffffff` white carry every section. A single dark band appears in the testimonials region using `#231e15` Cavern as the background and white type on top, but it is a one-component inverse surface rather than a global mode. The DESIGN.md captures it as `band-inverse` so you can render the same band, but no other component flips to a dark variant.

How do I use this DESIGN.md to build a React marketing site?

Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce Mailchimp's discipline (Cavern over off-white, Yellow as one bordered pill per viewport, Means Web for h1/h2, Graphik Web everywhere else) instead of a generic shadcn theme. You can also reference the 17 color tokens, 12 typography styles, and 18 components directly: every value is a quoted hex or size you can paste into Tailwind config, CSS variables, or your own component library. Combine the file with shadcn/ui primitives for fastest setup.

Mailchimp Design System

Mailchimp's design system as a DESIGN.md file.

About Mailchimp DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source mailchimp.com

Marketing & CRM

Mailchimp's marketing canvas is a warm off-white page (`#efeeea`) carrying Cavern brown ink (`#231e15`) — not black — and a single chromatic note, Mailchimp Yellow (`#ffe01b`), that surfaces in exactly two places: the bordered pill CTA fill and the page's text-selection highlight (`rgba(255,224,27,0.15)`). The hero opens with a Means Web serif headline ("Email & SMS marketing minus the learning curve.") set at 48px / weight 400 with -1px tracking, paired with Graphik Web sans for every supporting label, nav link, and pricing row. Where most marketing platforms recruit a saturated gradient or a screenshot-led hero, Mailchimp uses one yellow pill, one serif headline, and a generous warm-paper page floor to carry the whole opening band.

This DESIGN.md packages the spec into one machine-readable file. Inside: 17 color tokens grouped into one brand voltage, the Cavern ink ladder, a soft off-white surface scale, plus a Teal accent (`#004e56`) used on inline link underlines and a pale Sky surface (`#d2ebff`) used on a single integration card; 12 typography tokens running Means Web serif from 48px hero down to 40px h2 and Graphik Web sans from 24px subhead down to 11px legal copy; 6 corner radii anchored on the 26px (2em) CTA pill and a 32px feature-card radius; 9 spacing tokens stepping on a 4px grid up to 96px section gutters; and 18 components covering the bordered pill primary, the pill-outline secondary, the Means Web hero headline, the dark testimonial band, the Standard pricing card, the integration tile, top nav, and footer. Format follows the Google Labs DESIGN.md spec.

Feed the file to Claude, Cursor, or Copilot and the agent will reproduce Mailchimp's restraint — Cavern over off-white, Yellow held for exactly one CTA per viewport, Means Web for h1/h2 and Graphik Web for everything else — instead of a generic shadcn theme. Reference the tokens directly inside Tailwind config, CSS variables, or your own component library. The discipline worth studying is the bordered-pill CTA: a 26px-radius button with a 1px Cavern stroke around a Yellow fill, the rare primary action that uses both color AND outline rather than picking one. It is what makes a Mailchimp button look like Mailchimp from across the page, even before you read the label.

What makes it distinct

Single brand voltageMailchimp Yellow (`#ffe01b`) appears only on the pill CTA fill and the text-selection highlight, never as a body color
Serif + sans pairingMeans Web serif carries every h1/h2 at weight 400, Graphik Web sans carries body, nav, and buttons
Bordered pill CTA26px radius (2em) wrapped in a 1px Cavern (`#231e15`) stroke around the Yellow fill, unique to Mailchimp among email platforms
Cavern brown ink`#231e15` rather than black, used 390 times across text and hairlines for a warmer page feel
Means Web display tracks -1px at 48px and -0.5px at 40pxthe serif headlines pull tight while sans body stays at 0

Live at mailchimp.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

mailchimp.com

Explore Mailchimp

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Mailchimp design system FAQ

Common questions about Mailchimp's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Mailchimp — official site

Mailchimp's email and SMS marketing platform, the source for every token in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Mailchimp in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→