teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/mailchimp-freddie.md

mailchimp-freddie — Mailchimp (Freddie Era, c. 2018–2022)

• School: Warm Humanist
• Vibe: Hand-drawn marks, warm yellow, personality in microcopy
• Best for: Small-business tools, creator products, community / education / approachable B2C
• Touchstone: mailchimp.com pre-2023 redesigns (Wayback), Freddie illustration sets

Palette

• Ground: #FFE01B (Mailchimp yellow) for hero / brand moments, #FFFFFF for body
• Ink: #241C15 (warm near-black, never pure black)
• Cream surface: #FBEFE3
• Secondary: #88837C
• Accent: a hot pop-pink #FF4D74 or a warm coral, used very sparingly

Typography

• Display: a friendly grotesque — Helvetica Now Display, Söhne, Inter Tight at weight 700–800
• Body: same family at 17–18px, weight 400, line-height 1.6
• Decorative: occasional hand-drawn script or text-set-by-hand feel

Spacing: 4 / 8 / 16 / 24 / 40 / 64 — generous but not airy

Radius: 8 (small) / 16 (medium) / 24 (large pills). Buttons are pill-shaped.

Shadow: soft and warm — 0 4px 12px rgba(36, 28, 21, 0.08)

Motion: bouncy welcomed. Spring physics on hover lifts, friendly easings.

Signature moves

• Freddie-style hand-drawn illustrations (winking mascot, line-drawn characters with personality) — never AI-generated, must be commissioned or use a single illustrator's hand
• Yellow flood-fill section backgrounds breaking up the page
• Pill-shaped buttons with a 2–3px black outline (Memphis-style)
• Personality in microcopy ("Send better email" not "Optimize delivery metrics")
• Asymmetric "tilted" illustration placement — never centered on a grid

Avoid

• Pure black anywhere (the recipe is warm-near-black)
• Stock illustrations — the hand-drawn style is the differentiator
• More than 3 colors visible at once (yellow + ink + one accent)
• Cold corporate microcopy

AI prompt seed

Hand-drawn illustration, single line-drawn character with warm color washes (yellow, coral), winking expression, on warm cream #FBEFE3 background, friendly approachable line style, deliberate imperfection, 4:5.

Don't use when

• Brand needs to feel premium / luxury — Mailchimp warmth reads as accessible / mass-market
• Illustration can't be sourced from a real illustrator (recipe loses 50% impact)
• Audience is enterprise-only and skeptical of "friendly"

---

Same school — Warm Humanist: stripe-press · headspace-meditation
Browse all 25 recipes: INDEX.md