Design system do headspace.com

---
version: alpha
name: "headspace.com"
description: "Design system extracted from https://www.headspace.com/ on 2026-09-28"
colors:
  background: "#f9f4f2"
  foreground: "#2d2c2b"
  muted-foreground: "#ffffff"
  primary: "#0061ef"
  on-primary: "#ffffff"
  secondary: "#ffce00"
  border: "#e2ded9"
typography:
  headline-display:
    fontFamily: "Headspace Apercu"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-lg:
    fontFamily: "Headspace Apercu"
    fontSize: "64px"
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: "-1.92px"
  headline-md:
    fontFamily: "Headspace Apercu"
    fontSize: "40px"
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: "-1.2px"
  body-md:
    fontFamily: "Headspace Apercu"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "-0.2px"
  label-md:
    fontFamily: "Headspace Apercu"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.5"
    letterSpacing: "-0.14px"
  button:
    fontFamily: "Headspace Apercu"
    fontSize: "18px"
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.54px"
rounded:
  none: "0px"
  2xl: "32px"
  md: "8px"
  xl: "16px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "48px"
  9: "64px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "32px"
    height: "48px"
    padding: "14.3px 24px"
  button-secondary:
    backgroundColor: "#2d2c2b"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "32px"
    height: "48px"
    padding: "14px 20px"
  input:
    backgroundColor: "#ffffff"
    rounded: "8px"
    height: "58px"
  card:
    backgroundColor: "#0061ef"
    rounded: "0px"
    padding: "56px"
---

# headspace.com

## Overview

Mental Health App for Meditation & Sleep - Headspace: Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Try for free.

Soft, well-rounded controls, layered shadows for depth, confident display type at 48px / 700, a single blue accent on neutrals. The site ships in light mode by default. Measured from 3425 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f9f4f2` | Page background |
| foreground | `#2d2c2b` | Primary text |
| muted-foreground | `#ffffff` | Secondary text, captions |
| primary | `#0061ef` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#ffce00` | Secondary accent (yellow) |
| border | `#e2ded9` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#f9f4f2`, `#ffce00`, `#0061ef`, `#00a4ff`, `#ffa1cc`, `#3b197f`, `#02873e`, `#44423f`.

The accent `#0061ef` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Headspace Apercu** for h2, h3, body, label, button: self-hosted webfont, not freely available; use **Figtree** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Headspace Apercu | 48px | 700 | 1.4 | normal |
| headline-lg | Headspace Apercu | 64px | 700 | 1 | -1.92px |
| headline-md | Headspace Apercu | 40px | 700 | 1.15 | -1.2px |
| body-md | Headspace Apercu | 20px | 400 | 1.5 | -0.2px |
| label-md | Headspace Apercu | 12px | 500 | 1.5 | -0.14px |
| button | Headspace Apercu | 18px | 700 | 1.2 | -0.54px |

Type scale in use: 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 64px, 72px. Base body size 20px.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 48, 64 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 24, 28, 32 px.
- Content max width: 1344px, centred.
- Breakpoints: 550px, 768px, 896px, 1024px, 1440px.
- Header: 80px tall, static, background `rgb(255, 255, 255)`; 12 nav links at 16px / 400 (For You · Meditation · Online therapy · Mindfulness · Sleep · Mental health coaching · Ebb AI companion · Anxiety).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`
- shadow-2: `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px`

## Shapes

- Buttons: 32px
- Inputs: 8px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 32px, md 8px, xl 16px, full 9999px

## Components

### Button, primary

Background `#0061ef`, text `#ffffff`, border 2px solid transparent, radius 32px, height 48px, padding 14.3px 24px, 14px / 700, shadow `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`. Sample label: "Try for free".

### Button, secondary

Background `#2d2c2b`, text `#ffffff`, border 2px solid transparent, radius 32px, height 48px, padding 14px 20px, 16px / 700. Sample label: "Try for $0".

### Input

Height 58px, background `#ffffff`, border 1px solid #d2d5de, radius 8px, 16px text, padding 24px 16px.

### Card

Background `#0061ef`, border 2px solid transparent, radius 112px, padding 56px, shadow `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px`. Typical size about 750×188px.

### Link

Colour `#2d2c2b`, no underline at rest, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1344px | 0px | 16px |  | 80px, 9 links, 1 CTA |  | 2→1 col; 2→2 col; 2→1 col | content-width |
| laptop 1024px | 928px | 0px | 16px |  | 80px, 9 links, 1 CTA |  | 2→1 col; 2→2 col; 2→1 col | content-width |
| tablet 768px | 672px | 0px | 16px |  | 80px, hamburger (icon), 1 CTA |  | 2→2 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 342px | 0px | 16px |  | 64px, hamburger (icon), 1 CTA |  | 2→1 col; 2→1 col; 6→1 col | content-width |

- Nav collapses to a hamburger by 390px (first seen at 768px); header 80px → 64px.
- Card grids: 3 columns → 1 column on phones (gap 20px → 12px).
- Body text stays 16px at every width.
- Phone side gutter 0px.
- Section top padding 24px → 24px.

## Interaction & Motion

182 elements carry transitions; typical 0.15s with cubic-bezier(0.32, 0.94, 0.6, 1), mostly on background-color, transform, color. 1 running keyframe animations (onetrust-fade-in 0.4s 1).

- Hover on button-primary ("Try for free"): background #0061ef → #0040ea; cursor pointer; transition color, background-color, border-color, box-shadow, transform | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1) | delay 0s, 0s, 0s, 0s, 0s.
- Hover on button-secondary ("Try for $0"): background #2d2c2b → #141313; cursor pointer; transition color, background-color, border-color, box-shadow, transform | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1) | delay 0s, 0s, 0s, 0s, 0s.
- Hover on nav-link ("For You"): no visible change; cursor pointer.
- Hover on body-link ("Sword is acquiring Headspace to shape th"): no visible change; cursor pointer.
- Focus on button-primary: outline 2px solid rgb(0, 64, 234), offset 1px.
- Focus on body-link: outline 1px auto rgb(16, 16, 16), offset 1px.
- Tooltip triggers exist (2 × aria-describedby, 2 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 1 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 47 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#0061ef` for actions and focus; never paint large areas with it.
- Do keep body text at 20px in Headspace Apercu.
- Do match corner radii per element class (buttons 32px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.