Mailchimp
mailchimp.coma 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.
Design tokens
- 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
Related references
Jasper
strongMarketing Platform
The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.
Method
nicheSaas Product
The reference for QuickBooks-niche B2B CRM — clean deep-navy + royal-blue conservative B2B design with yellow-underline accent and customer-photo-driven testimonials.
Analogue
strongCreative Studio
a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.
Cindy Shu Therapy
strongOther
A solo therapist's site that breathes - vast warm-cream whitespace, a calm teal serif, and a thin vertical line that literally walks you down the page while the copy says "pause, breathe, connect".