---
title: "Mailchimp design system"
variant: extended
source: https://mailchimp.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/mailchimp-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mailchimp · Design System

> Warm editorial storytelling with a bright yellow signal.

**Theme:** light · **Industry:** saas · **Source:** https://mailchimp.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mailchimp pairs expressive serif headlines and warm, restrained neutrals with unmistakable yellow calls to action. Its homepage moves between a cinematic hero, practical feature cards, proof points, pricing, integrations, and a warm gold footer.

## North star

Use editorial serif headlines and warm neutrals as the foundation, then reserve bright yellow for unmistakable actions and emphasis.

## Overview

The visual system balances a clean white canvas with deep brown-black text and occasional pale-gray content bands. A saturated yellow is reserved for the primary trial CTA, selected headline emphasis, and small action markers, so it reads as a clear signal rather than a broad background. Means Web gives major headings an editorial, human character; Graphik Web keeps navigation, body copy, controls, and dense utility content crisp. The hero centers large serif messaging over darkened photographic video, while later sections alternate centered introductions, modular cards, customer proof, and compact integration rows. Cards are generously rounded and mostly white against light gray, with subtle separation rather than heavy outlines. The lower page shifts to warm gold for related links and the multi-column footer, creating a distinctive close. Spacing feels comfortable and sections have ample breathing room, even when individual cards contain dense feature details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roasted Ink | `#231e15` | `--color-roasted-ink` | brand | Core warm near-black for headings, footer links, inverse sections, and primary CTA text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white cards, and clean content areas. |
| Deep Teal | `#004e56` | `--color-deep-teal` | accent | Occasional feature and content links; use sparingly against the neutral system. |
| Campaign Yellow | `#ffe01b` | `--color-campaign-yellow` | accent | Primary trial buttons, highlighted hero phrase, stars, and small directional action markers. |
| True Black | `#000000` | `--color-true-black` | semantic | Measured heading, navigation, and body text; visually close to the warmer core ink. |
| Soft Fog | `#f5f5f5` | `--color-soft-fog` | surface | Broad feature and disclaimer bands that distinguish content from the white canvas. |
| Quiet Stone | `#bcbab6` | `--color-quiet-stone` | semantic | Measured card, control, and component hairline borders. |
| Harvest Gold | `#e7b75f` | `--color-harvest-gold` | brand | Warm gold background across related links and the multi-column footer. |
| Night Umber | `#1a1610` | `--color-night-umber` | surface | Deep inverse section background, including the centered trust-building CTA. |
| Muted Ash | `#706d67` | `--color-muted-ash` | semantic | Low-emphasis text captured in the measured palette; use for secondary copy only where needed. |
| Pale Divider | `#dedede` | `--color-pale-divider` | semantic | Secondary fine separator captured in component details. |
| Smoky Charcoal | `#403b3b` | `--color-smoky-charcoal` | semantic | Occasional control text and button hairline treatment. |
| Weathered Silver | `#b6b4b1` | `--color-weathered-silver` | semantic | Minor measured border color; keep to understated component separation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#231e15` (Roasted Ink) · `--color-surface-2` → `#f5f5f5` (Soft Fog) · `--color-surface-3` → `#e7b75f` (Harvest Gold) · `--color-surface-4` → `#1a1610` (Night Umber) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#231e15` (Roasted Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#bcbab6` (Quiet Stone) · `--color-accent` → `#004e56` (Deep Teal) · `--color-accent-2` → `#ffe01b` (Campaign Yellow) · `--color-accent-3` → `#e7b75f` (Harvest Gold) · `--color-on-accent` → `#231e15` (Roasted Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#231e15` | 1.27:1 | fail |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#e7b75f` | 11.34:1 | AAA |
| `#231e15` | `#ffffff` | 16.56:1 | AAA |
| `#231e15` | `#f5f5f5` | 15.19:1 | AAA |
| `#231e15` | `#e7b75f` | 8.94:1 | AAA |
| `#ffffff` | `#231e15` | 16.56:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#e7b75f` | 1.85:1 | fail |

### Gradients

- `linear-gradient(rgba(35, 30, 21, 0) 0%, rgba(35, 30, 21, 0.55) 45%, rgba(35, 30, 21, 0.82) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik Web | `--font-body` | webfont | 400, 500, 700, 600 | Navigation, body copy, links, buttons, captions, and utility text. | Inter |
| Means Web | `--font-display` | webfont | 400 | Display and section headings, including the large hero message and editorial feature titles. | DM Serif Display |

- **Graphik Web:** Use clean sans-serif shapes, mostly regular weight; controls and navigation are medium, with natural sentence case.
- **Means Web:** Regular-weight serif headlines; the main display uses tight negative tracking, with selective italic yellow emphasis.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | -0.021em | — | Means Web | Centered hero headline over the photographic background. |
| h2 | 40px | 400 | 1.13 | 0 | — | Means Web | Major section headings and prominent customer proof statements. |
| h3 | 32px | 400 | 1.25 | 0 | — | Means Web | Feature-card and supporting content headings. |
| h4 | 23px | 400 | 1.3 | 0 | — | Graphik Web | Smaller subsection headings in pricing and feature areas. |
| body | 14px | 400 | 1.44 | 0 | — | Graphik Web | Feature descriptions, explanatory copy, and general page content. |
| caption | 11px | 400 | 1.45 | 0 | — | Graphik Web | Rating qualifications, footnotes, and compact helper text. |
| button | 13px | 500 | 1.5 | 0 | — | Graphik Web | Primary trial actions and other compact calls to action. |
| nav | 13px | 500 | 1.1 | 0 | — | Graphik Web | Header navigation and utility controls. |
| link | 16px | 400 | 2 | 0 | — | Graphik Web | Text links, feature-card actions, and integration links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 10, 12, 16, 24, 40, 48 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width 1280px.

Use a centered content frame with a measured page maximum of 1280px, while allowing the hero and major section bands to span the viewport. Alternate full-width white, pale-gray, dark, and gold areas with comfortable vertical breathing room and a measured section gap of 80px. Keep the hero message centered; align feature, proof, pricing, and footer content to clear columns. The feature area uses a two-column card grid, while integration entries form compact multi-column rows. Preserve varied density: spacious storytelling sections, tighter utility lists.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `26px` · nav `3px` · link `16px` · xs `3px` · sm `4px` · md `10px` · lg `16px` · xl `24px` · 2xl `26px` · pill `9999px`
- Shadow `lg` (link): `rgba(0, 0, 0, 0.086) 0px 15.547px 44px 0px`
- Shadow `hairline` (button, nav, link): `rgb(35, 30, 21) 0px 0px 0px 1px`
- Shadow `xl` (other, card): `rgba(35, 30, 21, 0.06) 0px 8px 64px 0px, rgba(35, 30, 21, 0.04) 0px 4px 8px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.06) 0px 4px 16px 0px`
- Shadow `hairline-2` (button): `rgb(64, 59, 59) 0px 0px 0px 1px`
- Shadow `md-2` (card): `rgba(35, 30, 21, 0.15) 0px 0px 20px 3px`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor clean surfaces and gentle separation over heavy shadows. Feature cards sit on pale gray with white, generously rounded faces; use restrained soft shadowing where cards need lift. Fine borders and hairlines are subtle. The hero image is visually layered by its dark overlay, while inverse sections rely on solid dark backgrounds rather than card elevation.

## Imagery

The hero uses full-bleed lifestyle footage or photography under a dark overlay, leaving the centered headline and yellow CTA legible. Feature cards mix concise copy with product and campaign imagery, while customer logos and integration marks act as supporting proof. Keep image crops deliberate and media contained within generously rounded card frames. Bright, colorful app artwork can appear inside illustrations, but it should not redefine the brand palette.

## Components

### Primary CTA

Bright yellow pill-shaped trial button with warm dark text and a fine dark outline or hairline; keep the label concise and prominent.

### Hero

Full-width darkened lifestyle media behind a centered Means Web headline, with one italic yellow phrase, supporting copy, trial CTA, and review proof.

### Feature cards

White, generously rounded cards on a pale-gray band; pair concise feature copy and bullet details with product imagery and a small link action.

### Proof section

Use a deep warm-dark band for a prominent customer result, with a serif statement, selected yellow emphasis, footnote, and understated report link.

### Integration tiles

Compact white tiles in multi-column rows, with partner mark, short tool name, and a brief integration benefit.

### Gold footer

Warm harvest-gold closing area with grouped text links, related resources, brand-family marks, social links, and language selection.

### Measured component styles

- **Primary button** (“Start Free Trial”): background #ffe01b · text #231e15 · radius 26px · padding 12px 24px · 500 13px Graphik Web · shadow rgb(35, 30, 21) 0px 0px 0px 1px
- **Secondary button** (“Go to slide 2 of 4”): background #bcbab6 · text #000000 · radius 4px · padding 0px · 400 16px Graphik Web
- **Link** (“Design with ease”): transparent background · text #004e56 · radius 0px · padding 0px · 400 16px Graphik Web
- **Input** (“$ AUD R$ BRL $ CAD CHF CHF DKK kr € EUR ”): transparent background · text #231e15 · radius 0px · padding 8px 24px 8px 0px · 500 13px Graphik Web
- **Card** (“Design with ease Create emails like a pr”): background #ffffff · text #000000 · radius 24px · padding 0px · 400 16px Graphik Web
- **Navigation item** (“Industries and Solutions Integrations Re”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Graphik Web

## Do

- Reserve Campaign Yellow (#ffe01b) for primary actions and selective emphasis.
- Use Means Web-style serif headlines to establish editorial hierarchy.
- Keep body copy and controls crisp and sans-serif.
- Set feature cards against pale-gray bands with generous rounding.
- Use dark overlays to protect text over hero photography.
- Give major content sections ample vertical breathing room.

## Don't

- Do not turn the whole page yellow; keep it as a focused accent.
- Do not replace the warm near-black with a cold blue-black.
- Do not place dense sans-serif copy in display headline roles.
- Do not add heavy outlines or strong shadows to every card.
- Do not let colorful illustration details become the core palette.
- Do not compress the hero and section transitions into a dense layout.

## Agent prompt

Build a new marketing page in Mailchimp’s visual style. Use Gallery White (#ffffff) as the main canvas, Roasted Ink (#231e15) for warm dark text and inverse areas, and Soft Fog (#f5f5f5) for selected section bands. Reserve Campaign Yellow (#ffe01b) for the primary pill CTA and a few meaningful highlights; use Harvest Gold (#e7b75f) only for a distinctive closing or footer band. Set display headings in a Means Web-like editorial serif and supporting copy, navigation, and controls in a Graphik Web-like sans serif. Create a media-led hero with a dark overlay, centered headline, concise copy, and a clear CTA. Follow with rounded white feature cards, proof points, practical tiles, and an organized footer. Keep the spacing comfortable and shadows restrained.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width photographic hero with centered headline, supporting text, CTA, and review proof. | primary trial CTA, rating reassurance | dark media overlay, serif display headline, yellow emphasis |
| 2 | feature-grid | Pale-gray section with a two-column grid of rounded feature cards and a centered pricing action. | feature discovery, card-level links, pricing shortcut | white cards, product imagery, compact benefit lists, yellow action markers |
| 3 | logo-cloud | Shallow full-width white strip with a single horizontal row of customer marks. | social proof | monochrome logos, horizontal alignment |
| 4 | stats | White content area with multiple proof points arranged in a three-column structure. | quantified proof, report link | large serif statements, compact footnotes, yellow highlight |
| 5 | testimonials | Spacious white case-study section with an introductory heading and horizontally organized content. | case-study browsing, testimonial proof | rounded content cards, editorial heading, simple carousel controls |
| 6 | pricing | Pale-gray pricing region with explanatory copy, plan details, and a prominent pricing card. | plan comparison, trial offer, contact-range selection | white pricing panel, yellow CTA, compact plan details |
| 7 | integrations | Centered heading and short description introducing a broad integration directory. | integration discovery, directory link | serif section heading, centered alignment, yellow link marker |
| 8 | integrations | First compact row of integration tiles in a multi-column white grid. | partner discovery, integration browsing | partner logo, short benefit copy, white tile |
| 9 | integrations | Second compact row of integration tiles aligned to the directory grid. | partner discovery, integration browsing | partner logo, short benefit copy, white tile |
| 10 | integrations | Final multi-column row of integration tiles before the dark trust CTA. | partner discovery, integration browsing | partner logo, short benefit copy, white tile |
| 11 | cta | Full-width dark band with a centered trust message and yellow trial button. | trust reassurance, trial conversion | inverse background, centered serif heading, yellow pill CTA |
| 12 | content-feed | Shallow pale-gray area containing compact numbered disclosures. | feature qualification, legal disclosure | small sans-serif text, numbered list, subtle surface |
| 13 | other | Gold band with a left-aligned heading and a short list of related links. | related-content navigation | gold background, underlined text links, simple vertical list |
| 14 | footer | Gold footer arranged into several columns of grouped navigation links. | site navigation, resource discovery | multi-column link groups, simple text headings, warm background |
| 15 | footer | Lower footer area with brand-family marks, social links, language selector, and legal copy. | language selection, social navigation, legal information | brand logos, compact utility links, gold background |

## Source CSS custom properties (selected)

```css
--elevation-shadow-color: rgba(35,30,21,.15);
--spacing-1: calc(4*.0625rem);
--spacing-2: calc(8*.0625rem);
--spacing-3: calc(16*.0625rem);
--spacing-4: calc(24*.0625rem);
--spacing-5: calc(40*.0625rem);
--spacing-6: calc(64*.0625rem);
--spacing-7: calc(80*.0625rem);
--spacing-8: calc(96*.0625rem);
--cta-background-color: #ffe01b;
--cta-background-color-disabled: #dbd9d2;
--cta-stroke-color: #231e15;
--cta-depth-color: #231e15;
--cta-text-color: #231e15;
--cta-text-size: .8125rem;
--cta-text-weight: 500;
--cta-border-radius: 2em;
--link-color: #231e15;
--link-color-hovered: #231e15;
--link-background-hovered: rgba(255,224,27,.65);
--selection-background-color: rgba(255,224,27,.15);
--heading-color: #231e15;
--copy-color: #231e15;
--copy-color-light: rgba(35,30,21,.65);
--display-text-size: 4rem;
--display-text-line: 1.5;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mailchimp-com