Mailchimp Design System

# Mailchimp Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Mailchimp. "Mailchimp Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Mailchimp Design System
**Owner:** Mailchimp
**Official documentation:** https://mailchimp.com/design/
**Visual character:** Winking-chimp charm: Cavendish yellow with Peppercorn warmth, Means serifs for wit, and small-business friendliness as strategy.

---

## Summary

Voice-led marketing platform system with unusual editorial discipline.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. The public UX pattern library was retired; values reflect current brand guidance._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Cavendish Yellow | `#ffe01b` | `--mc-cavendish` | Hero brand color |
| Peppercorn Text | `#241c15` | `--mc-peppercorn` | Primary text (warm black) |
| Secondary Text | `#5d5245` | `--mc-text-secondary` | Secondary text |
| White | `#ffffff` | `--mc-white` | Surfaces |
| Parsnip | `#f6f6f4` | `--mc-parsnip` | Warm subtle background |
| Border | `#dedddc` | `--mc-border` | Borders |
| Kale Link | `#007c89` | `--mc-kale` | Links and interactive (teal) |
| Error Red | `#bf4055` | `--mc-error` | Errors |

## Typography

- **Display:** Means — weights 400 — `Means, Georgia, serif`
- **Body:** Graphik — weights 400, 500, 700 — `Graphik, 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `48px` | `56px` |
| h1 | `32px` | `40px` |
| h2 | `24px` | `32px` |
| body | `16px` | `24px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |
| pill | `9999px` |

## Quick start (CSS)

```css
/* Mailchimp Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://mailchimp.com/design/ */

:root {
  /* Color */
  --mc-cavendish: #ffe01b; /* Hero brand color */
  --mc-peppercorn: #241c15; /* Primary text (warm black) */
  --mc-text-secondary: #5d5245; /* Secondary text */
  --mc-white: #ffffff; /* Surfaces */
  --mc-parsnip: #f6f6f4; /* Warm subtle background */
  --mc-border: #dedddc; /* Borders */
  --mc-kale: #007c89; /* Links and interactive (teal) */
  --mc-error: #bf4055; /* Errors */

  /* Typography */
  --font-display: Means, Georgia, serif;
  --font-body: Graphik, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-display: 48px /* line-height 56px */;
  --text-h1: 32px /* line-height 40px */;
  --text-h2: 24px /* line-height 32px */;
  --text-body: 16px /* line-height 24px */;
  --text-small: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;

  /* Radius */
  --radius-default: 8px;
  --radius-pill: 9999px;
}
```

## Origin

Mailchimp's UX team has published their content style guide and patterns publicly since the early 2010s — predating most modern design systems by years. The current design system absorbed those lessons and now spans the campaign builder, automation editor, audience tools, and reporting dashboards used by millions of small businesses.

## Governance

Mailchimp's central UX team owns the system; product teams contribute through an internal review process. The voice and content guidance is unusually load-bearing — it ships ahead of components and is treated as canonical.

## Known for

- Voice and content guidance that other systems quietly copy from — the content style guide is the reference for friendly, plainspoken product writing.
- Empty-state and onboarding patterns built for the long tail of small businesses, not enterprises with admins.
- Illustration as a system component — house-style, themable, and used consistently across surfaces.

## Underrated

- Their accessibility commitment predates most public design systems; AA-plus targets are baked into component contracts, not retrofitted.
- The campaign-builder pattern (a multi-step editor with previews and pause-and-resume) is one of the better-documented complex flows in marketing tools.

## Watch out for

- Mailchimp's visual identity is distinctive — the illustration system and yellow brand are not lift-and-shift assets.
- Patterns assume self-serve SMB users. Enterprise-style admin patterns (RBAC, multi-org) aren't where the system focuses.

## Components worth studying

- **Wink (illustration system)** — Branded illustration set with documented usage and themable color.
- **Campaign Builder** — Multi-step editor pattern with live preview, save-and-resume, and async send.
- **Empty State Library** — First-run, no-results, and lapsed-user states tuned for SMB onboarding.

## When to choose Mailchimp Design System

Read Mailchimp's content style guide if you write product copy at all — it's a free education. Adopt the system's structural patterns if you're building a self-serve marketing or commerce tool for small businesses; skip the visual identity unless you want to look like Mailchimp.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Mailchimp Design System by Mailchimp — Voice-led marketing platform system with unusual editorial discipline. Character: Winking-chimp charm: Cavendish yellow with Peppercorn warmth, Means serifs for wit, and small-business friendliness as strategy. Use a primary colour near #ffe01b, the typeface "Graphik" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 8px base. Lean into what it's known for: Voice and content guidance that other systems quietly copy from — the content style guide is the reference for friendly, plainspoken product writing. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Mailchimp UX](https://mailchimp.com/design/)
- [Content Style Guide](https://styleguide.mailchimp.com/)
- [Voice and tone](https://styleguide.mailchimp.com/voice-and-tone/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/mailchimp-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._