Friendly consumer-wellness design on a white canvas warmed by cream #f9f4f2 section bands and a gold #ffce00 announcement bar. Everything is rounded — 32px pill CTAs, 24px content cards — and set in one geometric-humanist sans (Headspace Apercu, Hanken Grotesk stand-in) whose headings run unusually BOLD at weight 700 with tight negative tracking (~-3%, 72/72 and 32/38) over a heavier 500 body at 18/26. The identity the queue hint gets wrong is colour: one royal blue #0061ef is the sole interactive colour, owning every CTA, the nav pill and active states (hover #0040ea, pressed #0000db), while the iconic orange #ff7300 is reserved strictly for the dot over the wordmark and never used as UI. Primary buttons carry a signature tactile detail: a 2px bottom bevel (rgba(65,61,69,.2) 0 2px 0) that physically presses down (translateY 2px) on click, with focus adding outline 2px solid #0040ea. Structure comes from 2px warm #e2ded9 borders rather than shadows, the hero is a soft blue-to-lavender atmospheric field (a raster image, not a CSS gradient), and motion is a gentle 0.15s ease-out (cubic-bezier(.32,.94,.6,1)) on colour and transform with a slide-down nav dropdown. Warmth is carried by cream and gold with occasional deep slate #27455c and green #468254 bands. No animation library, no dark theme, and one captured anti-pattern: the live site ships no prefers-reduced-motion block. Headspace Apercu is licensed, so the preview specimen stands in with Hanken Grotesk.
⚠ needs-dashboard
Browse Headspace in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: headspace.com (live DOM, computed styles), 2026-08-04 (desktop 1512px). Coverage: marketing homepage. Dashboard/app: pending login (needs-dashboard). 0 stylesheets blocked — full state + keyframe coverage. Reality check: the hint ("warm rounded illustration, soft orange, friendly geometric sans") is half right. The workhorse accent is BLUE#0061ef— it owns every CTA and the nav pill — while orange#ff7300appears ONLY as the dot over the wordmark's "a". Warm cream#f9f4f2sections and a gold#ffce00announcement bar carry the warmth. The face is a custom Apercu (geometric-humanist sans, correct) but headings run at weight 700 (bold), not light. Rounded is right: 32px pills, 24px cards.
Friendly, reassuring consumer-wellness design: a white canvas warmed by cream section bands and a soft blue-to-lavender atmospheric hero, with one confident royal blue doing all the interactive work. Everything is rounded — 32px pill CTAs, 24px cards — and set in a single geometric-humanist sans (Apercu) whose headings are unusually heavy (weight 700) with tight negative tracking, giving a calm-but-solid voice. Depth is minimal and tactile: primary buttons carry a 2px bottom bevel that physically presses down on click. The palette stays warm and optimistic (cream, gold, a touch of green) with the iconic orange reserved strictly for the brand dot. Feels: calm, friendly, rounded, reassuring.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #2d2c2b | Primary text, headings |
| ink-body | #44423f | Body copy (most-used text color) |
| ink-secondary | #4b4c4d | Secondary text |
| grey-500 | #555555 | Tertiary text |
| grey-400 | #767676 | Muted / captions |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Page bg, nav, cards |
| cream | #f9f4f2 | Warm section bands (2nd most-used fill) |
| grey-bg | #f4f4f4 | Inset panels |
| border-warm | #e2ded9 | 2px card / divider borders |
| border | #d8d8d8 | 1px hairlines |
| border-cool | #d2d5de | 2px cool control borders |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #0061ef | Primary accent: every CTA, nav pill, active states, focus |
| blue-hover | #0040ea | CTA hover fill + focus outline |
| blue-active | #0000db | CTA pressed fill |
| blue-deep | #3860be | Secondary blue |
| slate | #27455c | Deep slate-blue section band |
| gold | #ffce00 | Announcement bar, highlight |
| orange | #ff7300 | Brand dot over the wordmark ONLY |
| orange-hot | #fc5500 | Secondary illustration orange |
| green | #468254 | Green section accent |
| green-tint | #f9fffa | Green-tinted section wash |
Rule: blue #0061ef is the only interactive color — reserve it for CTAs, links and active states. Orange is a brand mark, never a UI color.
"Headspace Apercu", Arial, sans-serif (single family everywhere; Arial fallback).#2d2c2b (a heavier-than-usual body); small copy 16 / 400.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (largest) | 72 / 72 | 700 | -2.16px (-3%) |
| Section (h2) | 32 / 38.4 | 700 | -0.96px (-3%) |
| Body | 18 / 26 | 500 | -0.18px |
| Body small | 16 / 24 | 400 | 0 |
| Nav | 16 | 400 | normal |
| Button | 14 / 21.6 | 700 | 0 |
Patterns: headings are BOLD (700) with tight negative tracking (~-3%) at every size — the defining type move. Body sits at a heavier 500. No uppercase, no display serif.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.