Headspace Design System

Headspace's marketing surface reads as a children's storybook re-rendered with platform-grade UI scaffolding. The page floor is a warm off-white ("#f9f4f2") rather than the cold "#ffffff" most app marketing reaches for; the load-bearing text color is a warm charcoal ("#2d2c2b") that sits softer on the eye than pure black; and floating between every section is a cast of hand-drawn character orbs — saffron yellow, bubble pink, aqua, grass green, ultraviolet purple — each one a member of the brand's mascot taxonomy rather than a stock photograph or gradient background. The single saturated voltage is a blue ("#0061ef") that lives only on the primary CTA pill and a handful of inline accent dots. Where most meditation brands reach for sage greens or soft terracotta to signal serenity, Headspace argues — through its chrome — that wellness can be playful, even loud, as long as the type stays warm and the canvas stays cream.

This DESIGN.md packages the surface using the Google Labs spec: 18 color tokens (5 character-orb mascots, the blue CTA voltage, warm charcoal ink, off-white canvas, plus structural hairlines and grays), 12 typography levels (all Headspace Apercu, weights 400 / 500 / 700, sizes ranging from 12px nav meta to a 64px / weight-700 / -1.92px-tracked hero h2), 5 corner radii anchored at 16px for cards and 32px for CTAs, 8 spacing values built around a 4 / 8 / 24 / 32 / 48px scale, and 17 components covering the blue CTA pill, secondary outline button, dark "chat with Ebb" pill, character-orb tile, testimonial card, FAQ row, the warm-charcoal-on-yellow feature panel, and the blue enterprise band that anchors the page below the fold. Every hex is grounded in the live extraction.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Headspace's specific dialect — warm charcoal on cream, blue pill CTAs at 32px radius, character orbs in the margin, Apercu at three weights — rather than a generic wellness theme of pastel greens and Inter headings. Or use the spec as a reference: every hex, font weight, radius, and spacing value is a quoted token ready for Tailwind config or CSS variables. The result is a meditation-app surface that earns its warmth by refusing the visual shortcuts most peers depend on — no nature photography, no soft-serif gestures, no eucalyptus-green wash, no lotus illustration. Just cream canvas, warm charcoal ink, one blue pill, and a cast of character orbs.