Mailchimp Design System Reference

Business Growth Platform

Mailchimp Design System

Modern, professional, and approachable — a design system that balances sophisticated typography with bold accents to help businesses scale their audience engagement.

12 Color tokens 11 Type styles 4 Shadow levels 6 Radius tokens Playfair + Inter

Foundation

Color Tokens

The full color palette extracted from Mailchimp's design system, including primary teals, bold yellows, supporting accents, and a comprehensive neutral scale.

Primary Teal

#004E56

Links · Active states · Secondary actions

Bright Yellow

#FFE01B

Primary CTA · Warnings · High visibility

Deep Brown

#231E15

Text · Body content · Dark backgrounds

Coral Red

#FF7346

Supporting accent · Creative emphasis

Electric Blue

#236CFF

Interactive elements · Special emphasis

Lavender

#BBAADD

Soft accent · Supporting UI elements

Sage Green

#AADDAA

Success · Muted emphasis · Category indicators

Error Red

#E12437

Error messages · Destructive actions

Black

#000000

Primary text · High contrast · Body copy

Dark Gray

#575757

Secondary text · Reduced hierarchy

Light Gray

#BCBAB6

Borders · Dividers · Subtle UI separators

White

#FFFFFF

Card backgrounds · Primary surfaces

Typography

Type Scale

Playfair Display for headlines creates sophistication and brand personality. Inter for body text ensures readability and contemporary feel. Together they establish clear hierarchy.

Serif Playfair Display Headlines · Display · Headings

Sans-serif Inter Body · UI · Labels · Buttons

Display XL Build what matters 64px · 400 · 76.8px line

Display L The quick brown fox 48px · 400 · 48px line

Display M The quick brown fox jumps 40px · 400 · 40px line

Heading L The quick brown fox jumps over 24px · 400 · 31.99px line

Heading M The quick brown fox jumps over the lazy 18px · 500 · 24.3px line

Heading S The quick brown fox jumps over the lazy dog 16px · 400 · 21.6px line

Button/Label XS DESIGN SYSTEM LABEL 13px · 500 · 0.5px spacing

Body The quick brown fox jumps over the lazy dog 16px · 400 · 21.6px line

Body Compact The quick brown fox jumps over the lazy dog 13px · 400 · 17.55px line

Caption XS The quick brown fox jumps over the lazy dog 11px · 500 · 13.75px line

Link Hyperlink text navigation 16px · 400 · 21.6px line

Layout

Spacing & Shapes

4px base grid system with scale from compact (4px) to generous (108px). Border radii range from sharp (0px) to pill-shaped (200px/44px) based on component context.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

20px md+

24px lg

32px xl

40px 2xl

64px 3xl

Border Radius

None 0px

XS 3px

SM 4px

MD 10px

Full 44px

Pill 200px

Shadows

Level 0 Flat · no elevation

Level 1 Dropdown · floating menus

Level 2 Standard cards · containers

Level 3 Featured · hover states

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

Muted 60%

Disabled 40%

Z-index / Layering

Base 1

Dropdown 10–12

Sticky 100

Modal 500

Elevation

Depth & Surfaces

Three light surface levels create spatial hierarchy. White base (cards) → Off-white sections → Dark hero overlays — each step lifts subtly from the base plane.

Card Surface

Primary surface for content containers and cards

Base · #FFFFFF

Section Background

Subtle background for sections and visual breaks

L1 · #F6F6F4

Dark Section

Premium hero sections and dark overlays

L2 · #231E15

White #FFFFFF

Off-White #F6F6F4

Warm Beige #DBD9D2

Deep Brown #231E15

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, padding, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #FFE01B bg · #000000 text · 44px radius · 16px/24px padding · 48px height. Secondary: transparent bg · #231E15 border, 2px. Ghost: transparent bg · #004E56 text/border, 1px, smaller padding.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #BCBAB6 border, 2px · 4px radius · 44px height. Focus: #004E56 border · 0px 0px 0px 3px rgba(0,78,86,0.1) shadow.

Card

Content container — elevated surface with shadow

.card

Audience Growth

Build and engage your audience with powerful marketing tools designed for growth.

#FFFFFF bg · #BCBAB6 border, 1px · 10px radius · L2 shadow. Title: 16px/500 serif. Body: 13px/400 sans-serif. Shadow: rgba(35,30,21,0.15) 0px 0px 20px 3px.

Badges

Status indicators — Success, Error, Info

.badge

Success Error Info

11px/500 · 6/12px padding · 200px radius. Success: #AADDAA bg · #004E56 text. Error: #E12437 bg · #FFFFFF text. Info: #236CFF bg · #FFFFFF text.

Guidelines

Do's & Don'ts

Principles for consistent application of the Mailchimp design language across all surfaces and contexts.

Do — Embrace

Use Bright Yellow (#FFE01B) exclusively for primary CTAs and warnings
Pair serif headlines (Playfair) with sans-serif body text (Inter)
Maintain minimum 24px padding on cards and containers
Apply shadows consistently from the predefined elevation scale
Keep text at 16px minimum for comfortable screen reading
Use the full spacing scale (4px–64px) without inventing values
Reserve Teal (#004E56) for links and secondary emphasis

Don't — Avoid

Do not mix accent colors carelessly or use yellow outside of CTAs
Do not reduce padding below 12px on interactive elements
Do not use borders thicker than 2px except for critical focus states
Do not create custom shadows — use the predefined scale only
Do not use serif fonts for body text — defeats typographic contrast
Do not apply rounded corners (>4px) to form inputs except pills
Do not set line height below 1.2x font-size — damages readability

mailchimp.com

Preview