Design System
Analysis of Mailchimp

A warm, off-black canvas where a single jolt of Cavendish Yellow carries every CTA, large headlines run unexpectedly light, and the whole palette leans into sandy neutrals and deep teal instead of cold grey. Font substituted: Inter (nearest Google match for Mailchimp's proprietary Graphik Web).

01 — Foundations

Colour Palette

02 — Foundations

Typography

Graphik Web (shown as Inter). The signature move: large headings set in regular weight 400, not bold — size and tight tracking build the hierarchy. Body is a steady 16px/400.

03 — Components

Button Variants

button-primary
Cavendish Yellow with dark ink on top — never white text. Fully rounded pill. The only loud colour on the page.
button-dark
Brown-black fill for secondary emphasis and inverted bands. White text, same pill radius.
button-secondary
Transparent with a 1px ink outline. The quiet, ubiquitous nav action.
button-pill
Sandy surface-alt chip for toggles and filters. Reads as a soft control, not a CTA.
04 — Components

Cards & Surfaces

Cards rest flat on a hairline and lift only on hover with a soft brown-tinted shadow. Image areas use the warm sand-to-hairline gradient.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base unit on a 4 / 8 / 12 / 16 / 24 / 32 / 48 progression, with tall vertical section rhythm.

07 — Foundations

Border Radius

A tight 4px workhorse for inputs and images, stepping up to 8 and 16px for cards, then jumping fully round for every interactive control.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default resting state for almost every card and panel.
Level 1 — 0 4px 12px rgba(36,28,21,0.12). A soft, brown-tinted hover lift, not a black drop shadow.
Level 2 — 0 15.5px 44px rgba(0,0,0,0.086). A wide, diffuse shadow reserved for floating overlays and menus.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; display headline drops toward the high-30s; pill CTAs go full-width.
Tablet768–1023pxFour-column card grids collapse to two; side gutters tighten.
Laptop1024–1279pxFull multi-column grids return inside the centered container.
Desktop≥ 1280pxMax-width container caps at ~1200px with generous whitespace around it.

Editorial roominess. The layout lets warm neutrals and the single yellow accent breathe — wide gutters, tall section padding, and faint warm dividers rather than hard rules.

Pricing Tiers

Mailchimp's real plan ladder — illustrative figures shown to demonstrate the card pattern, the featured dark tier, and the yellow CTA on the highlighted plan.

Free
$0/mo
Test the waters with core email tools for a small list.
  • 1 audience
  • 500 contacts
  • 1,000 monthly sends
  • Basic templates
Standard● Most popular
$20/mo
Automations, retargeting, and the data tools growing brands lean on.
  • Customer journeys
  • Send-time optimization
  • Predictive segmentation
  • Dynamic content
Premium
$350/mo
Advanced segmentation and unlimited seats for larger teams.
  • Unlimited audiences
  • Advanced segmentation
  • Multivariate testing
  • Phone support

Data Table

A campaign-report pattern using the warm header band, hairline rows, and pill status tags.

IDCampaignAudienceStatusWhen
#4821Spring LaunchAll subscribersSentJun 28
#4820Win-back FlowLapsed 90dSentJun 24
#4819Product UpdatePower usersDraft
#4818Welcome SeriesNew signupsSentJun 20
#4817Cart ReminderAbandonedScheduledJul 02
1–5 of 412
123

Auth Forms

Sign-in and create-account cards demonstrating the yellow primary, the ink-outlined SSO ghost button, and the input style.

Sign in

Welcome back

OR
Create account

Start for free

OR