# Headspace — Marketing Site Design Spec

> 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 `#ff7300` appears ONLY as the dot over the wordmark's "a". Warm cream `#f9f4f2` sections and a gold `#ffce00` announcement 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces & borders
| 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 |

### Accent & brand
| 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.

## 3. Typography Rules

- Font stack: `"Headspace Apercu", Arial, sans-serif` (single family everywhere; Arial fallback).
- Preview specimen uses **Hanken Grotesk** (Google Fonts) as the closest open stand-in for the licensed Apercu; the site ships Headspace Apercu.
- Body: 18px / 26px / weight 500 / `#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.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg `#0061ef`, text `#ffffff`, radius `32px` (pill), h `48px`, padding `14.3px 24px`, 14px/700, border `2px solid transparent`, shadow `rgba(65,61,69,.2) 0 2px 0 0` (a solid bottom bevel). Hover: bg `#0040ea`. Active: bg `#0000db`, `translateY(2px)` with the bevel collapsing to transparent — the button physically presses down. Disabled: bg stays `#0061ef`, opacity 1.
- **Card button (secondary)**: bg `#ffffff`, text `#4b4c4d`, radius `8px`, taller tap targets (~78px feature tiles).

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | bg `#0061ef`, white, pill, 2px bevel | bg `#0040ea` | bg `#0040ea` + `outline:2px solid #0040ea` | bg `#0000db`, translateY(2px), bevel→0 | bg `#0061ef`, opacity 1 |

### Inputs
- No public marketing form captured on the homepage; use the button focus recipe (`outline: 2px solid #0040ea`) for consistency. (`not captured`: no visible input on the landing page.)

### Cards / panels
- White bg, radius `24px` (feature tiles), 2px `#e2ded9` warm border or soft shadow `rgba(20,19,19,.2) 0 1px 8px`, generous padding.

### Nav
- h ~72px, white, no bottom border; lowercase "headspace" wordmark with an orange `#ff7300` dot; center links 16/400 `#2d2c2b`; right side "Help" text link + blue pill CTA.

## 5. Layout Principles

- Full-bleed hero (soft blue→lavender field), content column left-aligned within it.
- Gold announcement bar pinned above the nav.
- Section rhythm alternates white and cream `#f9f4f2` bands; occasional deep slate `#27455c` and green sections.
- Rounded everything: pills for actions, 24px cards for content tiles.
- Base spacing generous; large hero type (72px) sets a calm, spacious hierarchy.

## 6. Depth & Elevation

- Radius scale: `8px` small controls/cards, `16px`, `24px` cards (and one-sided `24px 24px 0 0` for stacked panels), `32px` pills (dominant), `50%` avatars, `2px` hairline chips.
- Shadows: soft `rgba(20,19,19,.2) 0 1px 8px 0` on floating cards; signature button bevel `rgba(65,61,69,.2) 0 2px 0 0`.
- Philosophy: mostly flat with 2px warm borders; the one tactile flourish is the pressable button bevel.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background-color, border-color, box-shadow, transform | 0.15s | cubic-bezier(0.32,0.94,0.6,1) | buttons, interactive chrome (128 uses) |
| all | 0.3s | ease | hover/reveal on tiles |
| border | 0.3s | ease | bordered cards |

- House transition: 0.15s on color/bg/border/shadow/transform with a gentle ease-out cubic-bezier(0.32,0.94,0.6,1).
- Keyframes: `slide-down-custom` (nav dropdown reveal); `onetrust-fade-in` is the third-party consent widget, excluded.
- No animation library (no GSAP/Lenis/Framer/Rive/Lottie).
- Anti-pattern: `reducedMotionBlocks: 0` — the site ships NO `prefers-reduced-motion` block. Add one if reusing this system.

## 8. Backgrounds, Effects & WebGL

- No CSS gradients, no canvas/WebGL, no background video, no grain.
- The hero's soft blue→lavender atmospheric field is a raster image layer (3 raster layers observed), not a CSS gradient — reproduce it as an image or a soft `linear-gradient` stand-in.
- Otherwise flat solid surfaces (white / cream / slate / green bands).

## 9. Do's and Don'ts

### Do
- Use blue `#0061ef` as the single interactive color for every CTA, link and active state.
- Set headings BOLD (700) with tight negative tracking (~-3%); keep body at a heavier 500.
- Make actions 32px pills and content 24px cards; keep small controls at 8px.
- Give primary buttons the 2px bottom bevel and press them down (translateY 2px) on active.
- Warm the layout with cream `#f9f4f2` bands and a gold `#ffce00` announcement bar.
- Keep one geometric-humanist sans (Apercu) across the whole surface.

### Don't
- Don't use orange as a UI color — it belongs to the wordmark dot only.
- Don't set headings light — Headspace headings are heavy (700).
- Don't introduce a second type family or a display serif.
- Don't rely on drop shadows for structure — use 2px warm borders and rounded corners.
- Don't ship without a `prefers-reduced-motion` block (the live site's gap).

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 768px | Mobile nav (hamburger), single-column hero, type scales down |
| min 769px / 48rem | Tablet: multi-column tiles |
| min 1024px / 64rem | Desktop layout |
| min 1280px / 90rem | Wide max content width |

- Dense bespoke ladder: 400/425/426/428/476/530/550/600/768/769/890/896/897/1023/1024/1280 (+ rem 48/64/90) — many handset-targeted max-width steps.
- `darkSchemeBlocks: 0` — no dark theme. No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#2d2c2b` · Muted `#767676` · Border `#e2ded9` · Accent `#0061ef`
- Font: `"Headspace Apercu", Arial, sans-serif` · Body: 18px/500 · Radius: 8px control / 24px card / 32px pill · Control height: 48px
- Focus: `outline: 2px solid #0040ea` · Hover fill: `#0040ea` · Pressed: `#0000db` + translateY(2px)

<headspace_design_language>
Use the Headspace design language: friendly consumer-wellness on a white canvas warmed by cream #f9f4f2 bands and a gold #ffce00 announcement bar. Text ink #2d2c2b, body #44423f, muted #767676. ONE interactive color — royal blue #0061ef — owns every CTA, link and active state (hover #0040ea, pressed #0000db); the iconic orange #ff7300 is used ONLY as the dot over the wordmark, never as UI. One geometric-humanist sans (Apercu; open stand-in Hanken Grotesk) everywhere, with BOLD 700 headings at tight negative tracking (-3%, e.g. 72/72 and 32/38) over a heavier 500 body at 18/26. Actions are 32px pills, content is 24px cards, small controls 8px; primary buttons are blue pills h48 with a 2px bottom bevel (rgba(65,61,69,.2) 0 2px 0) that presses down (translateY 2px) on click, focus outline 2px solid #0040ea. Structure via 2px warm #e2ded9 borders, not shadows; motion is a gentle 0.15s ease-out (cubic-bezier(.32,.94,.6,1)) on color/transform. No CSS gradients (the hero blue-lavender field is an image), no canvas, no second accent. Feels: calm, friendly, rounded, reassuring. Avoid: orange as a UI color, light-weight headings, a second type family, drop-shadow structure, and shipping without a reduced-motion block.
</headspace_design_language>