Mailchimp

mailchimp.com

a post-Intuit-acquisition Mailchimp site where the iconic Cavendish-yellow #ffe01b, the dark-teal #004e56, and the Freddie chimp mascot all survive intact - now paired with Graphik Web for body, Means Web for serif accents, and a springy overshoot cubic-bezier (0.5, 2.5, 0.7, 0.7) at 0.3s that gives every interaction its characteristic bounce.

Marketing Platform Email Marketing Platform flagship

Design tokens

page-white
ink-warm-near-black
pure-black
ink-soft-brown
ink-grey
teal-deep
mailchimp-yellow
page-soft-grey
black-overlay-60
ink-warm-transparent
body
"Graphik Web", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif
serif
"Means Web", Georgia, Times, "Times New Roman", serif
fallback
Times

Do / Don't

Reference it for

  • Brand-yellow #ffe01b survival post-acquisition — like Slack's aubergine, Mailchimp's yellow remains untouched.
  • The springy overshoot easing cubic-bezier(0.5, 2.5, 0.7, 0.7) at 0.3s — most distinctive curve in the library. Y2 > 1 creates the overshoot. Use sparingly; on a brand that needs to feel playful.
  • Freddie keyframes (freddie-head, freddie-eye, freddie-wink) — separate keyframes per body part of a mascot, composed via animation-name lists. The cleanest mascot-animation discipline in the library.
  • Numbered dot-bounce 1-5 for typing/loading indicators — staggered timing creates the wave effect.
  • The highlighter pattern: yellow #ffe01b background span behind specific words in a headline ("minus the learning curve" highlighted), evoking a literal highlighter pen mark.
  • Graphik Web + Means Web — geometric sans + serif pairing. Graphik is by Commercial Type; Means is by Klim Type Foundry.
  • A handwriting/serif word ("minus") mixed inline with the sans H1 — type-mixing as voice carrier.
  • A TrustRadius / G2 / Capterra rating badge cluster under the hero — third-party validation strip.

Do not copy

  • Graphik Web / Means Web — both licensed.
  • The exact Mailchimp yellow #ffe01b — strongly brand-coded.
  • Freddie the chimp — bespoke mascot; commission a different mascot or no mascot.
  • 163 scripts + 501 requests — Mailchimp/Intuit ships every analytics pixel imaginable. Most Jiffi builds should ship under 30 scripts.
  • The overshoot easing on every interaction — used at scale it becomes jarring. Reserve for moments where playfulness is the point.
  • The "intuit mailchimp" lockup unless the client is acquired by Intuit.
  • 14 @font-face declarations for what's essentially Graphik + Means.

Signature moves

springy overshoot easing

a springy overshoot easing cubic-bezier(0.5,2.5,0.7,0.7) at 0.3s gives interactions a characteristic bounce (the Y2 value of 2.5 creates the overshoot), used sparingly on a brand that should feel playful

per-body-part mascot keyframe composition

Freddie mascot keyframes (freddie-head, freddie-eye, freddie-wink) are separate per body part and composed via animation-name lists, plus numbered dot-bounce 1-5 with staggered timing for typing/loading wave indicators

highlighter-pen emphasis on headline words

a yellow background span sits behind specific headline words like a literal highlighter pen mark, with a serif word mixed inline into the sans H1 as a voice carrier