name: headspace-design
version: alpha
description: >
  A warm, playful wellness canvas: a cream page (#FAF4EE) with soft dark ink
  (#2D2C2B), exploding into big bright color-blocked sections — signature
  Headspace yellow (#FFCD00), friendly blue (#0061EF), pink (#FF9DCB) — and
  squishy 3D blob mascots. Type is Apercu set BOLD (700) and tight for warm,
  rounded headlines, with a medium body. Everything is generously rounded
  (full pills, big-radius cards) and optimistic. Actions are blue or dark
  pills; sections alternate cream and saturated brand color. The orange-dot
  logo and friendly Ebb blob are the signature motifs.
colors:
  # Brand
  yellow: '#ffcd00'           # signature Headspace yellow (hero/section blocks)
  blue: '#0061ef'             # primary CTA + links ("Get your headspace", "Login")
  on-blue: '#ffffff'
  blue-bright: '#0a93f5'      # bright sky-blue "Join the millions" stat block (approx)
  pink: '#ff9dcb'             # accent blocks / carousel
  orange: '#ff7e1d'           # the dot logo + warm accents (approx)
  # Text / ink (warm)
  on-surface: '#2d2c2b'       # headings / strong copy
  on-surface-body: '#4b4c4d'  # body gray
  on-yellow: '#2d2c2b'        # dark ink on yellow blocks
  # Surface
  surface: '#faf4ee'          # warm cream page (approx)
  surface-card: '#f7f1ea'     # soft cream cards (approx)
  surface-chip: '#f4ede5'     # pill chip track (approx)
  dark-pill: '#2d2c2b'        # dark CTA pill ("Try for $0")
  # Hairlines
  hairline: 'rgba(45,44,43,0.12)'
typography:
  font-sans: '"Headspace Apercu", sans-serif'  # OSS sub: "Apercu"→ "Hanken Grotesk" / "Sofia Sans"
  h1:                         # "Stress less all with Headspace"
    fontFamily: '{typography.font-sans}'
    fontSize: 48px            # scales responsively
    fontWeight: 700
    letterSpacing: -0.03em
  h2:
    fontFamily: '{typography.font-sans}'
    fontSize: 40px
    fontWeight: 700
    lineHeight: 44px
    letterSpacing: -0.03em    # -1.2px
  h3:
    fontFamily: '{typography.font-sans}'
    fontSize: 32px
    fontWeight: 700
    lineHeight: 36.8px
    letterSpacing: -0.03em    # -0.96px
  body:
    fontFamily: '{typography.font-sans}'
    fontSize: 18px
    fontWeight: 500
    lineHeight: 26px
    letterSpacing: -0.01em
  body-sm:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  link:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 500
    letterSpacing: -0.01em
rounded:
  card: 24px                  # bright section cards (approx)
  card-lg: 32px               # large hero/stat blocks (approx)
  pill: 9999px                # buttons + chips
  control: 8px                # small inputs / list rows (approx)
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px]
components:
  button-primary:             # "Try for free" / "Get your headspace" / "Login"
    backgroundColor: '{colors.blue}'
    textColor: '{colors.on-blue}'
    fontWeight: 700
    rounded: '{rounded.pill}'
    padding: '~12px 24px'
  button-dark:                # "Try for $0" / "Check coverage"
    backgroundColor: '{colors.dark-pill}'
    textColor: '#ffffff'
    rounded: '{rounded.pill}'
  button-on-color:            # "Chat with Ebb" / "Try for free" on a color block
    backgroundColor: '#ffffff'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.pill}'
  chip-tab:                   # "Featured / Popular / Sleep / Stress" filter pills
    backgroundColor: '{colors.surface-chip}'
    textColor: '{colors.on-surface}'
    selected-bg: '{colors.dark-pill}'
    selected-text: '#ffffff'
    rounded: '{rounded.pill}'
  card-color:                 # big yellow/pink/blue feature blocks
    rounded: '{rounded.card-lg}'
    note: 'solid brand-color fill (yellow/pink/blue) holding a heading, body, pill CTA + 3D blob art'
  list-row:                   # "Stress less ›" choose-your-path rows
    backgroundColor: '#ffffff'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.control}'
  newsletter-input:
    backgroundColor: '#ffffff'
    rounded: '{rounded.control}'
motion:
  # Friendly: carousels with dot indicators + circular arrows, soft squishy blob animations, gentle reveals.
icons:
  style: outline / 3d-blob
  stroke: ~2px
  sizes: { sm: 16px, md: 24px }
  color-rules: 'Chevron "›" on list rows and "+" on FAQ. The logo is the orange dot. Ebb is a soft gradient 3D blob mascot.'

Headspace

headspace-design — version alpha

Surfaces studied via Playwright (headspace.com home): computed styles + screenshots. The site exposes no semantic :root brand vars, so the bright brand hues (yellow/blue/pink/orange) and cream surfaces are nearest-hex approximations from the rendered blocks; type (Headspace Apercu) and the bold-tight heading metrics are high-confidence computed values.

Overview

Headspace's canvas is warm, playful, and optimistic: a cream page ({colors.surface} ~#FAF4EE) with soft dark ink ({colors.on-surface} #2D2C2B, not pure black), that explodes into big bright color-blocked sections — the signature Headspace yellow {colors.yellow} #FFCD00, a friendly blue {colors.blue} #0061EF, and pink {colors.pink} #FF9DCB — populated with squishy 3D blob mascots (Ebb). Type is Apercu set bold (700) and tight for warm, rounded headlines, with a medium (500) body. Everything is generously rounded (full pills, big-radius cards) and friendly. Actions are blue or dark pills; sections alternate cream and saturated brand color. The orange-dot logo and the Ebb blob are the signature motifs — calm, approachable, human.

Colors

• Headspace yellow — {colors.yellow} #FFCD00. The signature brand hue: hero accents, large feature blocks, and the bottom "Get your headspace" band — always with dark ink ({colors.on-yellow}).
• Blue — {colors.blue} #0061EF. Primary CTA and links ("Try for free", "Get your headspace", "Login"), and the enterprise block. A brighter sky-blue {colors.blue-bright} (~#0A93F5) fills the "Join the millions" stat block.
• Pink — {colors.pink} #FF9DCB. Accent blocks and carousel cards.
• Orange — {colors.orange} (~#FF7E1D). The dot logo and warm accents (Ebb's gradient leans orange-pink).
• Warm ink. Headings {colors.on-surface} #2D2C2B; body gray {colors.on-surface-body} #4B4C4D — both warm, never pure black/gray.
• Surfaces. Cream page; soft-cream cards/chips; a dark pill {colors.dark-pill} #2D2C2B for "Try for $0" / selected tabs. Hairlines ~12% warm ink.

Typography

• Headspace Apercu — the single family (a customized Apercu). Closest open-source substitute: Hanken Grotesk or Sofia Sans (humanist grotesque with rounded warmth). The signature is bold (700) headings with tight negative tracking (-0.03em) for a friendly, confident voice, and a medium (500) body for warmth.

Token	Size	Weight	Line-height	Tracking	Usage
h1	48px+	700	~1.05	-0.03em	Hero ("Stress less…")
h2	40px	700	44px	-0.03em	Section heads
h3	32px	700	36.8px	-0.03em	Card titles
body	18px	500	26px	-0.01em	Body (medium = warm)
body-sm	16px	400	24px	normal	Secondary copy
link	16px	500	—	-0.01em	Links / nav

Layout

Base 8px. The page is a stack of alternating cream and saturated color-block sections. Patterns: a hero with two rounded promo cards ("app" + "therapy"), a 2-column "choose your path" list of white rounded rows with "›", a pill-tab filter ("Featured / Popular / Sleep / Stress") above a carousel of bright cards, an enterprise blue block, a stat block (sky-blue), a FAQ accordion, and a big yellow "Get your headspace" CTA band. Generous spacing; rounded everything.

Elevation & Depth

Depth is color-blocking + 3D mascots, not shadows. Large saturated cards sit flat on cream; the Ebb blob and other soft 3D characters provide dimension. Cards have big radii and occasional faint borders; no heavy drop shadows.

Shapes

Very rounded: full pills ({rounded.pill}) for buttons and filter chips, ~24–32px for feature/stat cards, 8px for list rows and inputs. The soft, generous geometry matches Apercu's rounded warmth and the squishy blob art.

Components

• Primary button {components.button-primary} — blue full-pill, white bold label ("Try for free", "Get your headspace", "Login").
• Dark button {components.button-dark} — #2D2C2B pill ("Try for $0", "Check coverage").
• On-color button {components.button-on-color} — white pill on a saturated block ("Chat with Ebb").
• Filter chip {components.chip-tab} — pill tabs on a cream track; selected fills dark with white text.
• Color feature card {components.card-color} — solid yellow/pink/blue fill, ~32px radius, heading + body + pill CTA + 3D blob art.
• List row {components.list-row} — white rounded row with a trailing "›" ("Stress less", "Manage anxiety").
• Newsletter input {components.newsletter-input} — white field + dark "Subscribe" pill.

Motion

Friendly and gentle: carousels with dot indicators + circular arrow buttons, soft squishy blob animations (Ebb), and easy scroll reveals. Nothing jarring — motion reinforces calm.

Iconography

A mix of outline monoline UI icons (chevron "›" on rows, "+" on FAQ) and 3D-blob illustration (Ebb, the gradient mascot). The logo is the orange dot. Stroke ~2px, 16/24px.

Do's and Don'ts

• Do anchor on warm cream with soft dark ink (#2D2C2B), never pure black.
• Do explode into big color-blocked sections (yellow/blue/pink) and keep dark ink on yellow.
• Do set headlines in Apercu bold (700), tight; body in medium (500) for warmth.
• Do make CTAs blue or dark full pills; use 3D blob mascots (Ebb) for personality.
• Do round everything generously.
• Don't use pure-black text or hard drop shadows.
• Don't desaturate the brand hues — the bright optimism is the point.
• Don't square corners or go light-weight on headings.

Known Gaps

• No semantic :root tokens are exposed; yellow/blue/pink/orange and the cream surfaces are nearest-hex approximations from rendered blocks.
• Headspace Apercu is proprietary; only observed weights (400/500/700) are listed. Hero size scales responsively above 48px.