---
version: alpha
name: Headspace
description: "Sunrise yellow on warm paper, and buttons that sit two pixels off the page."
colors:
  on-surface: "#2D2C2B"
  surface: "#F9F4F2"
  primary: "#FFCE00"
  card-white: "#FFFFFF"
  bark: "#44423F"
  slate: "#4B4C4D"
  quiet-ink: "#63605D"
  therapy-ink: "#141313"
  button-black: "#000000"
  headspace-blue: "#0061EF"
  default-link-blue: "#0000EE"
  signal-orange: "#FF7300"
  sky: "#00A4FF"
  warm-rule: "#C6C1B9"
  sand-rule: "#E2DED9"
  cool-rule: "#D2D5DE"
  muted-veil: "rgba(16, 16, 16, 0.3)"
typography:
  display-xl:
    fontFamily: Headspace Apercu
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -2.16px
  display-l:
    fontFamily: Headspace Apercu
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -1.92px
  display-m:
    fontFamily: Headspace Apercu
    fontSize: 56px
    fontWeight: 400
    lineHeight: 61.6px
    letterSpacing: -1.68px
  display-s:
    fontFamily: Headspace Apercu
    fontSize: 52px
    fontWeight: 400
    lineHeight: 57.2px
    letterSpacing: -1.56px
  heading-l:
    fontFamily: Headspace Apercu
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.44px
  heading-m:
    fontFamily: Headspace Apercu
    fontSize: 40px
    fontWeight: 400
    lineHeight: 46px
    letterSpacing: -1.2px
  heading-s:
    fontFamily: Headspace Apercu
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: -0.96px
  title:
    fontFamily: Headspace Apercu
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.6px
  subtitle:
    fontFamily: Headspace Apercu
    fontSize: 24px
    fontWeight: 400
    lineHeight: 27.6px
    letterSpacing: -0.72px
  label:
    fontFamily: Headspace Apercu
    fontSize: 18px
    fontWeight: 400
    lineHeight: 21.6px
    letterSpacing: -0.54px
  body-l:
    fontFamily: Headspace Apercu
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: -0.18px
  body:
    fontFamily: Headspace Apercu
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  ui:
    fontFamily: Headspace Apercu
    fontSize: 16px
    fontWeight: 400
    lineHeight: 17.6px
    letterSpacing: 0em
  caption:
    fontFamily: Headspace Apercu
    fontSize: 14px
    fontWeight: 400
    lineHeight: 15.4px
    letterSpacing: 0em
  micro:
    fontFamily: Headspace Apercu
    fontSize: 12px
    fontWeight: 400
    lineHeight: 13.8px
    letterSpacing: -0.12px
rounded:
  pill-control-ctas-link-buttons-language-: 32px
  panel-card-wrapper-cream-section: 16px
  card-benefit-row-input: 8px
  chip-filter-and-category-buttons: 24px
  small-card-plan-panel: 12px
  tag-the-trending-pill: 800px
  live-counter-pill-258-57px-unfilled: 30px
  oversized-cta-the-closing-headline-butto: 112px
spacing:
  3xs: 4.8px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 20px
  lg: 24px
  xl: 36px
  2xl: 40px
  3xl: 48px
  4xl: 56px
  5xl: 64px
  6xl: 80px
  7xl: 96px
  8xl: 112px
---
# Headspace — Style Reference

> Sunrise yellow on warm paper, and buttons that sit two pixels off the page.

**Theme:** light

The four captured pages run one system, not two: a single header class, `.css-75xqdg`, paints the same white bar across all of them, over the same white page and the same near-black ink, with only a few display headings drifting between the warm blacks. The palette is built on a white page, with cream and saturated bands alternating down it section by section, so the page reads as a run of blocks and the cards as objects on them. Colour tends to arrive as saturated blocks rather than tints: sun yellow, cobalt, orange and sky are whole bands and whole illustrations far more often than a wash behind a heading. The signature move is elevation without blur — a flat two-pixel offset under buttons and a couple of panels, like a key you can press, everything else separated by a luminance step or a hairline. Type is one family at three weights, set tight: every heading from forty pixels up is 700, tracked at or near −0.03em, with leading that closes to 1.0 at display and holds 1.15 to 1.2 at forty, so hierarchy is scale and tracking rather than case, colour or rules.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cream Canvas | `#F9F4F2` | `--color-canvas` | Band and panel fill: `.css-1qrkd5d` at 1920×186, `.css-1uonlf2` at 1344×590, `.css-1wbl1mf` at 432×427. Its carriers top out at band scale — the page beneath them renders white. |
| Card White | `#FFFFFF` | `--color-surface` | The page's own ground, and the fill of the pieces that sit on the bands: `.css-75xqdg`, `.css-vxtmj8`, `.css-zqcd6p` and `.css-onqfi8`. |
| Warm Black | `#2D2C2B` | `--color-ink` | Display headings and the filled charcoal pill. Primary ink and secondary button fill share one value, which is why a dark button reads as text made solid. |
| Bark | `#44423F` | `--color-ink-warm` | The most-carried link ink — footer nav, inline links — plus the fill under the carousel dots (`.css-1hati0i`, read from tile p1-02) and the footer's outlined pill (`.css-1wlbpr6`). Its display row is `.css-12o93kd` "Be kind to your mind". |
| Slate | `#4B4C4D` | `--color-body` | Fourth by painted text at 45 elements, 24 of them the 24px/700/32px footer column headings (`.css-qjjilk`). Its 1402 observations are inherited colour on the page-root wrappers, not running copy — the warm blacks carry that. |
| Quiet Ink | `#63605D` | `--color-ink-muted` | One step down from body copy. Its carriers are `.css-1lhy7lw` "Email address" and `.css-14lxr1w` "1,000+ meditations and Ebb, your AI companion" — copy to read, not to click. |
| Therapy Ink | `#141313` | `--color-ink-deep` | The 40px section headings on the online-therapy page. It makes clinical copy a half-step harder than marketing copy. |
| Button Black | `#000000` | `--color-ink-max` | Button labels and a few input edges. A control ink, not a text ink — headings use the warm blacks. |
| Headspace Blue | `#0061EF` | `--color-action` | It fills `.css-11fbkag`, the anchor that carries "Try for free", and the active step badge `.css-gcq92y` "1" — and three large surfaces besides: `.css-56t7vu` 1344×590, the `.css-wmbgey` logo band 1344×802, and a 1922×312 band on p4. The click colour, and a band colour too. |
| Default Link Blue | `#0000EE` | `--color-link-default` | The browser's own link ink, inherited by full-card anchor wrappers such as `.css-75ths7` whose visible children set their own colour. Override it rather than treating it as a brand blue. |
| Sun Yellow | `#FFCE00` | `--color-sun` | Promo bar, app-page hero band, scrolling word-mark strip — its carriers are `div` fills (`.css-l0dy5n`, `.css-13qvhu8`, `.css-1a5e1hi`). The loudest surface, and it tends to arrive as a whole band. |
| Signal Orange | `#FF7300` | `--color-orange` | The audio player's play control and its neighbours on the meditation page, read from tile p3-01. The *press me* mark inside content, distinct from the navigation blue. |
| Sky | `#00A4FF` | `--color-sky` | Both observations are `.css-1m771rd`, a 1344×718 section surface on p1 and p2 carrying the 64px white h2, the counter pill and the 56px stats row (tile p1-05). A band, not artwork. |
| Warm Rule | `#C6C1B9` | `--color-rule-warm` | Its whole inventory line is border on `li`, carried by `.css-zqcd6p` — the accordion's 1px rule rather than a general border. |
| Sand Rule | `#E2DED9` | `--color-rule-sand` | The 2px border on benefit rows and the newsletter block, plus one band fill on the therapy page. The structural line of the system. |
| Cool Rule | `#D2D5DE` | `--color-rule-cool` | The coolest grey in the inventory: it edges `.css-onqfi8` and fills the pending badge `.css-181yn7k` "2". A marker of inactive, not a neutral. |
| Muted Veil | `rgba(16, 16, 16, 0.3)` | `--color-ink-veil` | De-emphasised label ink on the meditation page. Translucent by design — it takes the tint of whatever it sits on. |

## Tokens — Typography

### Headspace Apercu — the entire system: display, headings, body, labels, legal. Weight carries emphasis and scale carries hierarchy; there is no second family to switch to. · `--font-sans`

- **Substitute:** Apercu, Sofia Pro, Poppins
- **Weights:** 400, 500, 700
- **Sizes:** 12, 14, 16, 18, 24, 32, 40, 48, 52, 54, 56, 64, 72px
- **Line height:** 1.0 at display (64px/64px, 72px/72px) up to 1.5 in body (16px/24px, 18px/27px)
- **Letter spacing:** −0.03em is the house value — it holds from 72px (−2.16px) down to 18px labels (−0.54px). Body at 16px and the 24px FAQ question run `normal`; 12px micro copy and 18px lead paragraphs take a lighter −0.01em.
- **Role:** the entire system: display, headings, body, labels, legal.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 72px | 72px | −2.16px | `--text-display-xl` |
| Display L | 64px | 64px (72px on the meditation page) | −1.92px | `--text-display-l` |
| Display M | 56px | 61.6px | −1.68px | `--text-display-m` |
| Display S | 52px / 54px | 57.2px / 64px | −1.56px / −1.92px | `--text-display-s` |
| Heading L | 48px | 48px | −1.44px | `--text-heading-l` |
| Heading M | 40px | 46px / 48px | −1.2px | `--text-heading-m` |
| Heading S | 32px | 38.4px | −0.96px | `--text-heading-s` |
| Title | 24px | 32px | −0.6px | `--text-title` |
| Subtitle | 24px | 27.6px / 28.8px / 31.2px | normal / −0.72px | `--text-subtitle` |
| Label | 18px | 21.6px / 26px | −0.54px | `--text-label` |
| Body L | 18px | 26px / 27px | −0.18px / normal | `--text-body-l` |
| Body | 16px | 24px | normal | `--text-body` |
| UI | 16px | 17.6px / 18.4px | normal | `--text-ui` |
| Caption | 14px | 15.4px / 16.1px | normal | `--text-caption` |
| Micro | 12px | 13.8px / 16px / 18px | −0.12px | `--text-micro` |

## Tokens — Spacing & Shapes

**Base unit:** 4px — a tendency, not a law: the common steps are multiples of 4, while control paddings are optically derived (12.1px, 13.2px, 14.3px, 3.52px) and two gaps land at 4.8px and 7px.   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 3xs | 4.8px | `--spacing-3xs` |
| 2xs | 8px | `--spacing-2xs` |
| xs | 12px | `--spacing-xs` |
| sm | 16px | `--spacing-sm` |
| md | 20px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 36px | `--spacing-xl` |
| 2xl | 40px | `--spacing-2xl` |
| 3xl | 48px | `--spacing-3xl` |
| 4xl | 56px | `--spacing-4xl` |
| 5xl | 64px | `--spacing-5xl` |
| 6xl | 80px | `--spacing-6xl` |
| 7xl | 96px | `--spacing-7xl` |
| 8xl | 112px | `--spacing-8xl` |

### Border Radius

| Element | Value |
|---------|-------|
| Circle — dots, avatars, icon buttons | 50% |
| Pill control — CTAs, link buttons, language selector | 32px |
| Panel, card wrapper, cream section | 16px |
| Card, benefit row, input | 8px |
| Chip — filter and category buttons | 24px |
| Small card, plan panel | 12px |
| Tag — the "Trending" pill | 800px |
| Squircle — two small meditation-page boxes, 24×24px and 25×25px | 25% |
| Live-counter pill — 258×57px, unfilled (`.css-10xddwb`) | 30px |
| Oversized CTA — the closing headline button | 112px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Key | `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px` | `--shadow-key` |
| Key (meditation page) | `rgba(26, 25, 25, 0.2) 0px 2px 0px 0px` | `--shadow-key-alt` |
| Lift | `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px` | `--shadow-lift` |

### Layout

- **Page max-width:** content boxes reach 1344px (`.css-fy6msv`) inside a 1920px header band (`.css-75xqdg`); the newsletter rule runs 1096px and FAQ rows 888–890px.
- **Section gap:** 48px and 80px of vertical padding lead the census at ten blocks each, then 64px on eight and 96px on six; one section on the therapy page pads 112px.
- **Card padding:** 48px on the testimonial panel, 24px on the three-card, 8px/24px on the benefit row, 112px on the therapy page's cream section.
- **Element gap:** 12px is the dominant flex gap at thirty-five carriers, then 8px, 16px, 36px between stacked blocks, and 56px between major columns.

## Components

### Top Bar

**Role:** the constant frame — logo, six primary destinations, log in, help, and one filled CTA.

`.css-75xqdg`: a `header` filled `#FFFFFF`, padding `0px 48px`, radius `0px`, no border and no shadow, measured 1920×80px on all four pages. No rule beneath it and no shadow: on p1 and p2 the white bar meets a white ground, so nothing separates it until the first band begins. Nav labels sit at 16px/400/18.4px in `#2D2C2B` (`.css-1cajptc`). In the tiles a yellow promo strip runs above it, so the white reads as a shelf, not a scrim.

### Primary CTA

**Role:** the one button that means start a trial or get started.

`.css-11fbkag` is an `a` filled `#0061EF` with white text, 14px/700/15.4px at `normal` tracking, padding `14.3px 24px`, radius `32px`, no border, and `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px` — measured 122–124×48px, four carriers across all pages. The shadow is the tell — zero blur, two pixels down, so the button reads as a physical key rather than a floating chip.

### Charcoal Pill Button

**Role:** the second-priority action that must not compete with the blue.

`.css-pifwmv` is a `button` filled `#2D2C2B` with `#FFFFFF` text at 18px/700, padding `16px 32px`, radius `32px`, no border, and the same `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px` key shadow — four carriers on all pages. It is physically larger than the blue CTA (32px of horizontal padding against 24px, 18px type against 14px) and still subordinate, because here size is not rank: colour is.

### Cream Pill Button

**Role:** the quiet third action — a soft affordance inside a coloured or illustrated band.

`.css-4ek0we` is an `a` filled `#F9F4F2` with `#44423F` text at 18px/700, padding `12.1px 24px`, radius `32px`, no border and no shadow, four carriers on the home page. Dropping both the fill contrast and the key shadow demotes it: against the yellow feature band in the tiles it reads as a request, not a command.

### Filter Chip Row

**Role:** the horizontal switch that swaps the content of a feature band or a card shelf.

Two variants of one control. Resting: `.css-1n1dghu`, a `button` filled `#F9F4F2` with `#2D2C2B` ink at 18px/700/21.6px/−0.54px, padding `0px 24px`, radius `24px`, no border, no shadow, nine carriers measured 87–208×48px. Selected: `.css-pfyzmk`, a `button` filled `#2D2C2B` with `#FFFFFF` text at 18px/700, padding `0px 24px`, radius `24px`, four carriers. Selection inverts the fill and keeps every other value identical, so the row never reflows as you click along it.

### Benefit Row Card

**Role:** a one-line destination with an icon — the "what are you looking for" grid.

`.css-vxtmj8`: a `div` filled `#FFFFFF`, padding `8px 24px`, radius `8px`, border `2px #E2DED9`, no shadow, twelve carriers measured 435×78px. The system's structural card — white on white with a 2px sand border and a small 8px radius, the opposite recipe from the 16px cream panels elsewhere.

### Library Content Card

**Role:** an artwork-led shelf tile — a course, a collection or a sleepcast — with its editorial flag.

The card is `.css-1qefp4r`, a `div` with `fill none`, radius `16px`, no border, no shadow, twelve carriers at 318×434px; the tile is wrapped by `.css-75ths7`, an `a` with identical `fill none`, radius `16px` and 318×434px box. Neither paints a fill — the colour is the artwork. Title type is 32px/700/38.4px/−0.96px in `#FFFFFF` (`.css-hblk6z`), set over the image with no scrim. The flag pinned to it is `.css-1lmp3iu`: a `div` filled `#F9F4F2` with `#0061EF` ink at 14px/700/16.1px, padding `3.52px 8px`, radius `800px`, no border, no shadow, four carriers at 44–71×23px. That 800px radius is a "fully round, whatever the height" instruction.

### Testimonial Card

**Role:** a member quote with its attribution line.

`.css-1wbl1mf`: a `div` filled `#F9F4F2`, padding `48px` on all sides, radius `16px`, no border, no shadow, six carriers measured 432×427px. Nearly square, with the quote at 24px/400/31.2px in `#2D2C2B` (`.css-71716c`) and the attribution beneath at 16px/400/24px in `#44423F` (`.css-1owh50j`). Cream on white: tile p1-03 shows the three cards stepping up off a white ground, a luminance step as well as radius and gutter.

### FAQ Accordion Row

**Role:** a collapsed question in the support list.

`.css-zqcd6p` measures two ways. The common variant — 34 `li` carriers, boxes 888–890×80–111px — is filled `#FFFFFF`, padding `24px 0px`, radius `0px`, with a `1px #C6C1B9` border and no shadow. Three further carriers paint the same fill and padding at 888–890×79px with `border none`. The accordion drops the system's corners entirely and lets a warm hairline do the work. The question sets at 24px/500/31.2px in `#2D2C2B` (`.css-1w1vd3m`).

### Newsletter Band

**Role:** the sign-up strip that closes every page above the footer links.

Three measured pieces. The band is `.css-1qrkd5d`, a `div` filled `#F9F4F2`, padding `0px`, radius `0px`, four carriers at 1920×186px — full bleed. Inside it `.css-1gxbceu` carries `fill none`, padding `24px 0px`, a `2px #E2DED9` border and a 40px flex gap at 1096×186px. The field is `.css-onqfi8`, an `input` filled `#FFFFFF` at 16px/400/24px, padding `24px 16px`, radius `8px`, border `1px #D2D5DE`, measured 283×58px.

### Numbered Step Badge

**Role:** the ordinal marker in a how-it-works list.

A matched pair at 30×30px, both `span`, both radius `50%`, both 18px/700/26px/−0.54px, both with no border and no shadow. Active: `.css-gcq92y`, filled `#0061EF` with `#FFFFFF` ink, eight carriers. Pending: `.css-181yn7k`, filled `#D2D5DE` with `#0061EF` ink, twenty-four carriers. The same blue is the fill when a step is current and the ink when it is waiting.

### Footer Utility Bar

**Role:** the closing strip — social links, legal links and the language selector.

Two controls carry it. The social marks are `.css-6t8l0g`, `a` elements filled `#FFFFFF` at radius `50%`, measured 28×28px, twenty carriers on all pages, each with no text of its own. The language selector is `.css-1wlbpr6`, a `button` filled `#44423F` with `#FFFFFF` text at 16px/700, padding `12px 20px`, radius `32px`, border `2px #FFFFFF`, no shadow, four carriers. Filling a control with the warm black of the band it sits on is how this system draws an outline button.

## Do's and Don'ts

### Do

- Ground every layout on `#FFFFFF` and let `#F9F4F2` arrive on top of it. The page renders white; cream and the saturated fills are what cut it into sections, at 1344px contained and 1920px full bleed.
- Keep the key shadow flat: `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`, exactly as the eighteen carriers paint it.
- Set every heading at 40px and above in weight 700 at −0.03em — from `.css-4kc4ca` "Mental health toolkit" at 40px to `.css-1fvtd4u` "Get your headspace" at 72px, no census row at those sizes paints anything lighter.
- Spend `#0061EF` on actions first: the primary CTA fill (`.css-11fbkag`) and the active step badge (`.css-gcq92y`). Where it goes bigger it takes a whole surface — `.css-56t7vu`, `.css-wmbgey` — never a decorative tint.
- Use 32px radius for pill controls and 50% for round ones — the two most-carried corners at 59 and 92 observations.
- Let colour arrive as a whole band: four of the five `#FFCE00` fills run 1920px wide — promo strip, marquee, closing band, p2 hero — and the fifth (`.css-l0dy5n`) is a 1344×590 carousel card. Not a heading highlight.
- Set dark running copy at 18px/27px in `#2D2C2B` — thirteen `p` rows, the dominant pairing — and step down to `#63605D` for labels and proof points: the rows `.css-1lhy7lw` "Email address" and `.css-14lxr1w` "1,000+ meditations and Ebb, your AI companion".

### Don't

- Don't blur the elevation. Both repeated shadows are `0px 2px 0px 0px` with zero blur; the single blurred value, `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px`, is painted once, on the 112px-radius closing CTA.
- Don't give `#C6C1B9` to anything but a list row. Its entire inventory is 34 border observations on `li` elements — the accordion rule, not a card edge.
- Don't reach for uppercase or a coloured heading to add emphasis. The captured pages set headings in sentence case; the emphasis budget is spent on 700 weight and −0.03em tracking.
- Don't mix chip and control corners. Chips are 24px (`.css-1n1dghu`, `.css-pfyzmk`); CTAs are 32px (`.css-11fbkag`, `.css-pifwmv`). That difference is what separates a switch from a destination.
- Don't ship `#0000EE`. It is the browser default inherited by full-card anchor wrappers such as `.css-75ths7` — override it everywhere.
- Don't put a scrim behind card titles. `.css-1qefp4r` and `.css-75ths7` both paint `fill none`; the 32px/700 white title (`.css-hblk6z`) sits straight on the artwork, which is drawn to make room for it.
- Don't add a border to the header. `.css-75xqdg` paints `border none` and `shadow none` — on p1 and p2 it meets a white ground with no step at all, and the band below it is what ends the bar.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Card White | `#FFFFFF` | The page ground — `html`, `body` and the page wrappers paint nothing, so white is what renders — and the fill of the header, the bordered benefit rows, FAQ rows, the email field. |
| 1 | Cream Canvas | `#F9F4F2` | Laid on the white as bands and panels: 1920px section strips, the newsletter band, testimonial cards, chips, cream sections. |
| 2 | Sand Band | `#E2DED9` | One full-width band on the therapy page (`.css-bu7s3t`, padding `50px 0px`), used to mute a logo row against the cream. |
| 3 | Charcoal Panel | `#3A3938` | A 12px-radius panel on the meditation page (`.css-bujyca`, padding `24px 16px`, border `1px #3A3938`, key shadow) — the inverted card. |

Filled controls (`#2D2C2B`, `#44423F`, `#0061EF`) sit outside this ladder: they are objects on a surface, not surfaces.

## Elevation

Depth is a hard offset, not a glow. Eighteen elements across all four pages carry `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px` — two pixels down, zero blur, zero spread — on CTAs (`.css-11fbkag`, `.css-pifwmv`, `.css-17qam0w`) and three panels. The meditation page paints the same geometry in a neutral ink, `rgba(26, 25, 25, 0.2) 0px 2px 0px 0px`, twice. One element softens it: `.css-1lucyj4`, the 112px-radius closing CTA, takes `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px`. Everything else separates by luminance step or by hairline — `2px #E2DED9` on benefit rows and the newsletter rule, `1px #C6C1B9` on FAQ rows, `1px #D2D5DE` on the input.

## Imagery

Flat vector illustration in saturated brand colour, drawn with a single black line weight: smiling blobs, clouds, a rising sun, sparkles, confetti shapes. The palette's rarest fills are not the illustration: `#02873E` (`.css-dtruzp`), `#3B197F` (`.css-zc435o`), `#FFA1CC` (`.css-19rgqva`) and `#00A4FF` (`.css-1m771rd`) are carousel feature bands at 1344×590 and 1344×718, and the equally rare `#0C6FF9` is the "Best value" badge. The confetti is the surface behind the artwork. Photography co-stars: people in circular or rounded crops, layered against illustrated clouds and floating UI chips, and app screenshots in device frames. Every photo in the tiles sits on or beside a coloured block.

## Layout

Full-bleed bands alternate with a contained column. The header (`.css-75xqdg`) and the newsletter band (`.css-1qrkd5d`) each measure 1920px wide; feature bands (`.css-fy6msv`, `.css-1uonlf2`) measure 1344×590px; the newsletter rule sits at 1096px and FAQ rows at 888–890px. The page gutter is 48px, carried by twenty-four blocks including the header, with eleven blocks on the home and therapy pages insetting to 100px and one therapy section to 112px. Vertical rhythm sits on 48px and 80px (ten blocks each), with 64px and 96px filling in. Content stacks in three-up grids (318px cards, 350px three-cards, 432px testimonials) and two-up hero splits. Card shelves scroll horizontally with the last tile cropped at the viewport edge.

## Typography Voice

Two modes, one family. Display mode is 700 weight, −0.03em, line-height 1.0 to 1.2: 64px over a 64px leading, 72px over 72px. The meditation page loosens to 64px/72px, where a longer measure buys back some air. Reading mode does the opposite: 16px over 24px and 18px over 27px, both at 1.5, tracking `normal` or −0.01em. Between them sits weight 500 — 12px footer links, 24px FAQ questions, the 32px word-mark strip — the voice for labels pretending to be sentences.

## Agent Prompt Guide

## Quick Color Reference

- background: `#FFFFFF`
- text: `#2D2C2B`
- surface: `#F9F4F2`
- border: `#E2DED9`
- accent: `#FFCE00`
- primary action: `#0061EF`

## Example Component Prompts

1. **Primary CTA**: Build an anchor-styled button, fill `#0061EF`, text `#FFFFFF` at 14px/700 with 15.4px line-height and normal tracking, padding 14.3px 24px, border-radius 32px, no border, box-shadow `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`. Target box 122×48px. Font: Headspace Apercu, fallback Sofia Pro.
2. **Filter Chip Row**: Build a horizontal row of pill buttons with a 16px gap. Resting chip: fill `#F9F4F2`, ink `#2D2C2B`, 18px/700/21.6px at −0.54px tracking, padding 0 24px, radius 24px, no border, no shadow, height 48px. Selected chip: identical geometry, fill `#2D2C2B`, ink `#FFFFFF`. Geometry and type stay at the `.css-1n1dghu` / `.css-pfyzmk` values across both states.
3. **Benefit Row Card**: Build a 435×78px card, fill `#FFFFFF`, border 2px `#E2DED9`, radius 8px, padding 8px 24px, no shadow. Label left at 24px/400/28.8px in `#2D2C2B`; a flat vector icon and a chevron right-aligned. Lay six of these in a 3×2 grid with a 20px gap on a `#FFFFFF` ground.
4. **Testimonial Panel**: Build a 432×427px panel, fill `#F9F4F2`, radius 16px, padding 48px, no border, no shadow. Quote at 24px/400/31.2px in `#2D2C2B`; attribution pinned to the bottom at 16px/400/24px in `#44423F`. Place three side by side on a `#FFFFFF` ground — the `.css-1wbl1mf` cream steps up off the white, so a luminance step and the gutter do the separating.
5. **Newsletter Band**: Build a full-bleed strip, fill `#F9F4F2`, height 186px, no radius. Inside, a 1096px row with a 2px `#E2DED9` border, 24px vertical padding and a 40px gap: heading at 24px/700/27.6px in `#2D2C2B`, a 283×58px input filled `#FFFFFF` with a 1px `#D2D5DE` border and 8px radius, then a button filled `#2D2C2B`, text `#FFFFFF` 18px/700, padding 16px 32px, radius 32px, shadow `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`.

## Similar Brands

- **Duolingo** — a warm off-white ground carrying flat, round-cornered character illustration and saturated single-colour bands, hierarchy held by one heavy sans.
- **Mailchimp** — a cream canvas, hand-drawn ink illustration over solid colour blocks, and one opinionated face set tight at display sizes.
- **Oatly** — whole-surface colour and line-drawn characters as brand voice, with body copy kept deliberately small and plain against very loud grounds.
- **Monzo** — bright primary fills on pill controls with hard, blur-free depth, and product screenshots framed in devices as evidence rather than decoration.
- **Slack** — a high-chroma accent palette held together by a warm neutral ground, with illustration doing the work photography would do elsewhere.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #F9F4F2;
  --color-surface: #FFFFFF;
  --color-ink: #2D2C2B;
  --color-ink-warm: #44423F;
  --color-body: #4B4C4D;
  --color-ink-muted: #63605D;
  --color-ink-deep: #141313;
  --color-ink-max: #000000;
  --color-ink-panel: #3A3938;
  --color-ink-cite: #828282;
  --color-action: #0061EF;
  --color-action-alt: #0C6FF9;
  --color-link-default: #0000EE;
  --color-sun: #FFCE00;
  --color-orange: #FF7300;
  --color-sky: #00A4FF;
  --color-green: #02873E;
  --color-purple: #3B197F;
  --color-pink: #FFA1CC;
  --color-rule-warm: #C6C1B9;
  --color-rule-sand: #E2DED9;
  --color-rule-cool: #D2D5DE;
  --color-ink-veil: rgba(16, 16, 16, 0.3);

  /* Typography — Families */
  --font-sans: 'Headspace Apercu', 'Apercu', 'Sofia Pro', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display-xl: 72px;   --leading-display-xl: 72px;
  --text-display-l: 64px;    --leading-display-l: 64px;
  --text-display-m: 56px;    --leading-display-m: 61.6px;
  --text-display-s: 54px;    --leading-display-s: 64px;
  --text-heading-l: 48px;    --leading-heading-l: 48px;
  --text-heading-m: 40px;    --leading-heading-m: 48px;
  --text-heading-s: 32px;    --leading-heading-s: 38.4px;
  --text-title: 24px;        --leading-title: 32px;
  --text-subtitle: 24px;     --leading-subtitle: 28.8px;
  --text-label: 18px;        --leading-label: 21.6px;
  --text-body-l: 18px;       --leading-body-l: 27px;
  --text-body: 16px;         --leading-body: 24px;
  --text-ui: 16px;           --leading-ui: 18.4px;
  --text-caption: 14px;      --leading-caption: 15.4px;
  --text-micro: 12px;        --leading-micro: 13.8px;
  --tracking-display: -0.03em;
  --tracking-body: normal;
  --tracking-micro: -0.01em;

  /* Spacing */
  --spacing-3xs: 4.8px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 36px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 56px;
  --spacing-5xl: 64px;
  --spacing-6xl: 80px;
  --spacing-7xl: 96px;
  --spacing-8xl: 112px;

  /* Border Radius */
  --radius-card: 8px;
  --radius-panel: 12px;
  --radius-block: 16px;
  --radius-chip: 24px;
  --radius-thumb: 30px;
  --radius-control: 32px;
  --radius-hero: 112px;
  --radius-tag: 800px;
  --radius-squircle: 25%;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-key: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
  --shadow-key-alt: rgba(26, 25, 25, 0.2) 0px 2px 0px 0px;
  --shadow-lift: rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-canvas: #F9F4F2;
  --color-surface: #FFFFFF;
  --color-ink: #2D2C2B;
  --color-ink-warm: #44423F;
  --color-body: #4B4C4D;
  --color-ink-muted: #63605D;
  --color-ink-deep: #141313;
  --color-ink-max: #000000;
  --color-ink-panel: #3A3938;
  --color-ink-cite: #828282;
  --color-action: #0061EF;
  --color-action-alt: #0C6FF9;
  --color-link-default: #0000EE;
  --color-sun: #FFCE00;
  --color-orange: #FF7300;
  --color-sky: #00A4FF;
  --color-green: #02873E;
  --color-purple: #3B197F;
  --color-pink: #FFA1CC;
  --color-rule-warm: #C6C1B9;
  --color-rule-sand: #E2DED9;
  --color-rule-cool: #D2D5DE;
  --color-ink-veil: rgba(16, 16, 16, 0.3);

  --font-sans: 'Headspace Apercu', 'Apercu', 'Sofia Pro', ui-sans-serif, system-ui, sans-serif;

  --text-display-xl: 72px;   --text-display-xl--line-height: 72px;
  --text-display-l: 64px;    --text-display-l--line-height: 64px;
  --text-display-m: 56px;    --text-display-m--line-height: 61.6px;
  --text-display-s: 54px;    --text-display-s--line-height: 64px;
  --text-heading-l: 48px;    --text-heading-l--line-height: 48px;
  --text-heading-m: 40px;    --text-heading-m--line-height: 48px;
  --text-heading-s: 32px;    --text-heading-s--line-height: 38.4px;
  --text-title: 24px;        --text-title--line-height: 32px;
  --text-subtitle: 24px;     --text-subtitle--line-height: 28.8px;
  --text-label: 18px;        --text-label--line-height: 21.6px;
  --text-body-l: 18px;       --text-body-l--line-height: 27px;
  --text-body: 16px;         --text-body--line-height: 24px;
  --text-ui: 16px;           --text-ui--line-height: 18.4px;
  --text-caption: 14px;      --text-caption--line-height: 15.4px;
  --text-micro: 12px;        --text-micro--line-height: 13.8px;
  --tracking-display: -0.03em;
  --tracking-body: normal;
  --tracking-micro: -0.01em;

  --spacing-3xs: 4.8px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 36px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 56px;
  --spacing-5xl: 64px;
  --spacing-6xl: 80px;
  --spacing-7xl: 96px;
  --spacing-8xl: 112px;

  --radius-card: 8px;
  --radius-panel: 12px;
  --radius-block: 16px;
  --radius-chip: 24px;
  --radius-thumb: 30px;
  --radius-control: 32px;
  --radius-hero: 112px;
  --radius-tag: 800px;
  --radius-squircle: 25%;
  --radius-circle: 50%;

  --shadow-key: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
  --shadow-key-alt: rgba(26, 25, 25, 0.2) 0px 2px 0px 0px;
  --shadow-lift: rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px;
}
```