teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/headspace-meditation.md

headspace-meditation — Headspace / Calm

• School: Warm Humanist
• Vibe: Soft pastels, rounded everything, calming hand-drawn illustration
• Best for: Wellness / meditation / health apps, sleep / kids products, "approachable expert" services
• Touchstone: headspace.com, the Headspace app, Calm.com lock-screen aesthetic

Palette

• Ground: warm peach #FFE2C5 or #FFEDD5
• Surface darker: warm coral #F4A573
• Ink: warm dark teal #1B3A47
• Secondary: #5C6B7A
• Pop accents: muted lavender #B0A5D1, sage #9DB67A, salmon #F5867B (one per scene, rotating)

Typography

• Display: a rounded friendly sans — Apercu, GT America (rounded variant), Söhne Breit. Weight 600.
• Body: same family at 16–17px, weight 400
• Optional script for emotional moments — a single soft handwritten line in something like Caveat, used very sparingly

Spacing: generous — 8 / 16 / 24 / 40 / 64 / 96

Radius: large — 16 (small) / 24 (medium) / 32 (large). Buttons are pills (radius = height / 2).

Shadow: soft and warm — 0 8px 24px rgba(244, 165, 115, 0.2). Often colored to match the ground.

Motion: gentle, slow, breathing. 400–800ms eases. Hover lifts have a "buoyant" feel. A subtle breathing animation (1.5–4s cycle) on key elements.

Signature moves

• A central character / mascot illustrated in simple round shapes (Headspace's orange circle character)
• Animated breathing circles that expand and contract in sync with body copy ("breathe in… breathe out…")
• Warm peach gradient grounds that slowly drift between hues
• Rounded everything — every container is a pill or a soft-corner rectangle
• Calming microcopy ("Take a moment. We'll wait.")

Avoid

• Cool palettes — Headspace lives in warm tones, even at night-mode (warm dark teal not cool navy)
• Sharp corners anywhere
• Harsh motion (no bouncy springs — too jolting; gentle eases only)
• More than 2 colors per scene

AI prompt seed

Simple flat illustration in warm peach #FFE2C5 background, single round mascot character in coral with friendly face, soft pastel shapes around it (sage, lavender), no harsh edges anywhere, gentle hand-drawn imperfection, 4:5.

Don't use when

• The product is meant to feel sharp / sophisticated — Headspace's recipe reads as soft / caring
• The brand has no wellness / care positioning — it'll feel infantilizing
• The voice is meant to be authoritative or expert-led — recipe is gentle, not commanding

---

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