---
version: alpha
name: Headspace
description: A warm, grounded wellness canvas where Headspace Apercu's bold 700-weight display type, pill-rounded CTAs, and a cobalt blue primary accent over soft off-white surfaces create a feeling that is calm, confident, and quietly modern.

colors:
  # Surface / canvas — warm white and soft parchment
  background: "#ffffff"              # clean white page canvas
  surface: "#f9f4f2"                 # warm off-white — card fills, secondary sections
  surface-light: "#ffffff"           # pure-white panel alternation

  # Ink / text — warm charcoal, not cold black
  ink: "#2d2c2b"                     # near-black warm charcoal — primary headings
  ink-body: "#44423f"                # body text, nav links — the dominant text color
  ink-secondary: "#4b4c4d"           # supporting copy, captions
  on-dark: "#ffffff"                 # text on dark/colored surfaces

  # Brand accent — cobalt blue CTA (current site)
  primary: "#0061ef"                 # cobalt blue — the single "go" action ("Try for free")
  primary-hover: "#0074ff"           # lighter blue on hover
  on-primary: "#ffffff"              # white text on blue

  # Secondary action — warm charcoal pill
  secondary: "#2d2c2b"               # dark charcoal pill — prominent secondary CTAs ("Subscribe")
  on-secondary: "#ffffff"            # white text on charcoal

  # Tertiary — warm cream fill
  tertiary: "#f9f4f2"                # warm cream — quiet ghost/segment buttons, chip fills
  on-tertiary: "#44423f"             # charcoal text on cream buttons

  # Semantic
  success: "#32ae88"                 # calming green — success states, wellness indicators
  error: "#e04b3a"                   # warm red — error, alert

  # Borders
  border: "#e2ded9"                  # warm hairline — input outlines, card edges
  border-soft: "#d8d4ce"             # slightly stronger separator

  # Shadow tints (opaque approximations — originals were rgba)
  shadow-soft: "#41433d"             # was rgba(65,61,69,0.2) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -2.16px
  display:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.68px
  heading:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1.2px
  heading-sub:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.96px
  body-large:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.72px
  body:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body-small:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.18px
  button-ui:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  button-small:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  nav-link:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: -0.16px
  caption:
    fontFamily: "Headspace Apercu, Apercu, Inter, -apple-system, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  sm: 8px
  md: 16px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-dark:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    border: "2px solid transparent"
  button-dark-hover:
    backgroundColor: "{colors.ink-body}"
    textColor: "{colors.on-secondary}"

  button-ghost:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: "2px solid transparent"
  button-ghost-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.on-tertiary}"

  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.ink-body}"
    typography: "{typography.button-small}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
    border: "2px solid {colors.border}"
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-body}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-body}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-body}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-body}"
    typography: "{typography.nav-link}"
    padding: 16px 32px

  segment:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    typography: "{typography.button-small}"
    rounded: "{rounded.pill}"
    padding: 0px 24px

  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-body}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 16px
    border: "1px solid {colors.border}"
---

# Headspace Design System

## Overview

Headspace's marketing site feels warm without feeling soft, calm without being inert. The canvas is clean white (`{colors.background}`) and a faintly warm parchment (`{colors.surface}`) — surfaces that evoke paper rather than a clinical screen. Against this warmth, a single cobalt blue (`{colors.primary}`) does all the forward momentum: every "Try for free" button is that blue, and it is the only saturated color that means "go." The result is a system that carries the brand's wellness intent — measured, unhurried — while staying visually confident rather than whispery.

The typography is what makes Headspace immediately recognizable at a glance: Headspace Apercu at weight 700, set with tight negative tracking (up to -2.16px at 72px) pulls display copy into a dense, authoritative slab. Headlines don't drift; they land. Yet the ink is warm charcoal (`{colors.ink-body}`) rather than cold black, so even the boldest heading has an underlying friendliness. Body text loosens into 400-weight legibility at a comfortable 20px and -0.2px tracking, creating a rhythmic contrast between the heavy editorial headline tier and the open reading tier below it.

Shape language is decisive and consistent: nearly everything interactive is a pill. Primary CTAs, secondary CTAs, ghost buttons, segmented selectors, chips, and badges all use `{rounded.pill}`. The only squared-off elements are inputs and background panels that use `{rounded.md}` or `{rounded.lg}`. This binary radius discipline — either very round (pill) or moderately round (24px) — communicates accessibility and approachability without the rigid angularity of enterprise software.

**Key Characteristics:**
- Clean white canvas (`{colors.background}`) warmed by a soft parchment alternative surface (`{colors.surface}`)
- Warm charcoal ink (`{colors.ink-body}`) with a brown undertone — never a cold dark gray
- A single cobalt blue (`{colors.primary}`) reserved entirely for the primary CTA — the "go" action
- Dark charcoal pills (`{colors.secondary}`) for prominent secondary CTAs like "Subscribe" and "Download"
- **Headspace Apercu** at weight 700 for all display and heading tiers — dense, confident, warm
- Aggressive negative tracking on display type (-2.16px at 72px) — compressed, not condensed
- **Pill radius** on every interactive control — the dominant shape language, applied consistently
- Warm cream ghost buttons (`{colors.tertiary}`) for low-emphasis actions and segmented selectors
- Feather-light bottom-pressed shadows (`{colors.shadow-soft}` 0px 2px 0px) — subtle tactile lift
- Motion at 150ms with a custom ease-out cubic-bezier — responsive without feeling rushed
- Generous 8px base grid; section gaps reach `{spacing.4xl}` (96px) for breathing room

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The page canvas and primary panel fill.
- **Warm Parchment** (`{colors.surface}`): The signature off-white (`#f9f4f2`) that softens secondary sections, card fills, and ghost button fills. A subtle warmth that prevents the site from reading as clinically blank.

### Ink / Text
- **Warm Near-Black** (`{colors.ink}`): The deepest heading color — a brown-tinged charcoal.
- **Charcoal** (`{colors.ink-body}`): Body text, nav links — the dominant everyday text color.
- **Soft Charcoal** (`{colors.ink-secondary}`): Supporting copy, captions, less-prominent metadata.
- **White** (`{colors.on-dark}`): Text on dark or colored surfaces (blue or charcoal buttons).

### Brand Accent
- **Cobalt Blue** (`{colors.primary}`): The sole primary CTA color — "Try for free," "Get started." Applied nowhere else in the UI chrome.
- **Blue Hover** (`{colors.primary-hover}`): A lighter cobalt for hover/focus states.

### Secondary & Tertiary
- **Charcoal Pill** (`{colors.secondary}`): Dark charcoal fill for prominent secondary CTAs ("Subscribe," "Download the app"). Assertive but not competing with blue.
- **Warm Cream** (`{colors.tertiary}`): The quiet ghost/segment button fill — low-emphasis actions and tab selectors.

### Semantic
- **Success Green** (`{colors.success}`): Calm, teal-leaning green for confirmations and wellness indicators.
- **Error Red** (`{colors.error}`): Warm red for alerts and invalid states.

### Borders & Shadow
- **Hairline Warm** (`{colors.border}`): The standard input and card outline — a desaturated warm beige.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for the 20%-opacity charcoal bottom shadow (original `rgba(65,61,69,0.2)` — flattened for Google spec).

## Typography

### Font Family
- **Primary**: `Headspace Apercu` — a custom grotesk variant of the Apercu typeface, carrying the entire hierarchy. Fallbacks: `Apercu, Inter, -apple-system, Helvetica Neue, sans-serif`.
- **Weights used**: 400 for body and secondary text; 500 for nav and subtle UI labels; 600 for captions and metadata labels; 700 for all display, heading, and button text.
- **Tracking philosophy**: aggressively negative on large display (-2.16px at 72px, -1.68px at 56px) creating a compressed editorial weight; near-zero on body (-0.2px) for relaxed reading.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px / 700 / -2.16px — primary hero headline |
| `display` | 56px / 700 / -1.68px — major section titles |
| `heading` | 40px / 700 / -1.2px — feature headings |
| `heading-sub` | 32px / 700 / -0.96px — sub-section headings, card titles |
| `body-large` | 24px / 400 / -0.72px — lead paragraphs, hero sub-copy |
| `body` | 20px / 400 / -0.2px — standard body copy |
| `body-small` | 18px / 400 / -0.18px — input text, fine copy |
| `button-ui` | 18px / 700 / 0px — primary and secondary CTA labels |
| `button-small` | 16px / 700 / 0px — compact buttons, ghost actions |
| `nav-link` | 16px / 500 / -0.16px — top navigation labels |
| `caption` | 14px / 600 / 0px — badges, overlines, small labels |

### Principles
- **Bold as default**: display headings use 700 weight with tight negative tracking — the system's "voice" is confident and unhurried, not delicate.
- **Sharp-to-open gradient**: the biggest display text tracks at -2.16px; body text relaxes to near-zero — visual rhythm through spacing, not just size.
- **Single family, broad range**: Apercu carries everything from a massive hero to a tiny badge. No secondary typeface, no serif accent — calm coherence.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block. Base unit: 8px. The scale follows a strict 8px-grid increment (4, 8, 16, 24, 32, 48, 64, 96px), with 24px and 32px being the heavy inner-section workhorses and 96px (`{spacing.4xl}`) closing large vertical gaps between page zones.

### Grid & Container
- Centered content max-width approximately 1280px; inner content comfortably padded at `{spacing.2xl}` on large breakpoints
- Hero sections: left-aligned headline with product imagery (phone mockup, illustrated characters) inset at right
- Feature sections alternate between warm-surface and white backgrounds to create page zones without borders
- Segmented/tab selectors run horizontally inside warm cream pill containers

### Whitespace Philosophy
- **Generous vertical rhythm**: major section gaps at 64-96px (`{spacing.3xl}`–`{spacing.4xl}`) — the breathing room is part of the calm
- **Warm surface zoning**: alternating white and parchment (`{colors.surface}`) divides the page into calm zones without hard rules
- **Internal padding scales with hierarchy**: card internals at 24px (`{spacing.lg}`), hero at 32px+ (`{spacing.xl}`)

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.border}` hairline only | Form inputs, quiet panels |
| Pressed (Level 1) | `box-shadow: 0px 2px 0px {colors.shadow-soft}` | Primary and dark pill buttons — a "stamp" effect |
| Card (Level 2) | `box-shadow: 0px 1px 8px rgba(20,19,19,0.2)` (≈ `{colors.shadow-soft}`) | Floating cards, modals, pop-up banners |
| Dialog (Level 3) | Bottom-sheet + `24px 24px 0px 0px` top radius | Mobile dialogs, bottom drawers |
| Focus Ring | `outline: 2px solid {colors.primary}` offset 2px | Focused buttons and inputs |

**Shadow Philosophy**: Headspace's depth is minimal and precise. Resting surfaces are flat; the signature shadow is a 2px bottom-only press — a tactile stamp quality that suggests buttons have physical weight without adding visual complexity. The occasional card shadow is soft and diffuse (1px spread, 8px blur). Nothing floats dramatically. Depth is earned only at the dialog level; everything else stays grounded.

## Shapes

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Input fields, progress bars — restrained, functional corners |
| `md` | 16px | Feature panels, image containers |
| `lg` | 24px | Dialog sheets, modal cards, bottom-sheet tops |
| `pill` | 9999px | Buttons (all types), chips, badges, segmented selectors — the dominant shape |

The system is functionally binary: interactive controls are pills; static containers are moderately rounded (16-24px). There is no sharp-corner element in the interactive tier. This enforces a consistent "softness" that aligns with the brand's wellness proposition. The pill is not decorative — it is the system's primary shape language, applied with discipline.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants
- **`button-primary`** — Cobalt blue (`{colors.primary}`) fill, white text, pill radius. The singular CTA — "Try for free." One per view.
- **`button-dark`** — Charcoal (`{colors.secondary}`) fill, white text, pill radius, 2px press shadow. Prominent secondary CTAs — "Subscribe," "Start your journey."
- **`button-ghost`** — Warm cream (`{colors.tertiary}`) fill, charcoal text, pill radius. Low-emphasis actions — "Chat with Ebb," "Learn more."
- **`button-outline`** — Transparent fill, warm border, charcoal text. Quiet tertiary controls, language/locale selectors.

### Cards
- **`card`** — Warm parchment (`{colors.surface}`) fill, `{rounded.lg}` 24px radius, 24px padding. Feature benefit cards.
- **`card-elevated`** — White fill with soft shadow, same radius. Product screenshot panels, testimonials.

### Inputs
- **`input`** — White fill, `{colors.border}` 1px outline, `{rounded.sm}` 8px radius. **`input-focus`** swaps border to blue (`{colors.primary}`).

### Badges / Chips
- **`badge`** — Warm parchment fill, pill radius. Category labels and section overlines.
- **`chip`** — Parchment fill, `{colors.border}` outline, pill radius. Filter pills, content-type selectors.

### Navigation
- **`nav-bar`** — White background, warm charcoal labels at 500 weight. Sticky on scroll with a hairline bottom separator; primary CTA ("Try for free") persists as a blue pill in the top-right.

### Segmented Selectors
- **`segment`** — Warm cream pill container; active segment gets a white or charcoal-fill pill inside. Used for "For You / For Business" switchers.

## Do's and Don'ts

### Do
- Reserve cobalt blue (`{colors.primary}`) for exactly one CTA per view — "Try for free" or "Get started." It loses its stamp quality if applied to multiple elements.
- Use warm charcoal (`{colors.ink-body}`) for body text, never a cold neutral gray — the warmth is the difference between a wellness brand and a SaaS tool.
- Apply pill radius (`{rounded.pill}`) to every interactive control — buttons, chips, badges, selectors. The system's coherence depends on this consistency.
- Set display type in Headspace Apercu at 700 with tight negative tracking — the compression is deliberate editorial weight, not a stylistic flourish.
- Alternate warm parchment (`{colors.surface}`) and white sections to create page zones without hard borders or heavy dividers.
- Use the bottom-press shadow (`0px 2px 0px {colors.shadow-soft}`) on pill buttons — the tactile "stamp" quality is part of the interaction language.
- Keep section vertical gaps at 64-96px (`{spacing.3xl}`–`{spacing.4xl}`) — the breathing room is structural, not optional.

### Don't
- Don't introduce a second saturated color as a CTA. If a button is orange, yellow, or any other brand-adjacent color, it competes with blue and breaks the visual hierarchy.
- Don't apply sharp corners (0px radius) to buttons or chips — even the quietest interactive element should be pill-shaped in this system.
- Don't use pure black (`#000000`) or a cold dark ink — the warmth of `{colors.ink-body}` (`#44423f`) is a deliberate palette decision.
- Don't reduce Apercu heading weight below 700 for display tiers — lighter weights at large sizes lose the confident density that defines the brand voice.
- Don't reach for gradients or image-heavy backgrounds as primary surface treatments — the system relies on flat warm whites and parchment, not visual complexity.
- Don't crowd cards with fine typography — body copy below 18px (`{typography.body-small}`) becomes too small for the wellness audience's expectation of ease.
- Don't mix the warm-cream tertiary (`{colors.tertiary}`) with pure white interchangeably in the same surface tier — the contrast is subtle enough to cause inconsistency.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <428px | Single column; hero type scales to ~32px; pill CTAs go full-width |
| Mobile | 428–768px | Single column; nav collapses to a menu icon; hero stacks copy then image |
| Tablet | 769–1023px | Two-column feature grids begin; hero maintains split layout at reduced scale |
| Desktop | 1024–1280px | Full layout; hero is side-by-side copy + phone mockup; section padding opens up |
| Large Desktop | >1280px | Centered max-width; section gaps reach 96px (`{spacing.4xl}`) |

### Touch Targets
- Pill buttons are generously padded (14-16px vertical) — comfortable for thumb interaction without needing explicit min-height declarations.
- Segmented selectors use 0px vertical padding but carry implicit height from `{typography.button-small}` line-height.
- Chips and chips use 6px vertical / 16px horizontal — at the lower bound; avoid smaller.

### Collapsing Strategy
- **Navigation**: horizontal nav → hamburger icon on mobile; the blue pill CTA persists in the header at all sizes.
- **Hero**: two-column (copy left, device image right) → single column stacked; image drops below the headline and CTA.
- **Feature grids**: 3-4 column → 2-column → single column; parchment section background persists.
- **Type**: display-hero drops from 72px to ~36px at mobile; negative tracking scales proportionally.
- **Spacing**: section gaps compress from 96px toward 48px (`{spacing.2xl}`) at mobile.

### Image Behavior
- Phone mockup product images are contained in `position: relative` frames; they scale within their grid cell.
- Illustrated blob characters and ambient spot art reduce opacity or hide entirely on mobile to avoid crowding the copy.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`) / Warm Parchment (`{colors.surface}`)
- Text: Warm Charcoal (`{colors.ink-body}`)
- Brand accent: Cobalt Blue (`{colors.primary}`)
- Secondary text: Soft Charcoal (`{colors.ink-secondary}`)
- Border: Hairline Warm (`{colors.border}`)
- Primary CTA: Cobalt Blue (`{colors.primary}`) — one per view
- Secondary CTA: Charcoal Pill (`{colors.secondary}`)

### Example Component Prompts

- "Create a hero section on white (`{colors.background}`) with a 72px warm charcoal (`{colors.ink}`) headline in Headspace Apercu weight 700 and letter-spacing -2.16px, a 24px body paragraph in weight 400 (`{typography.body-large}`), a cobalt blue pill CTA (`{colors.primary}` fill, white text, `{rounded.pill}`, 14px 24px padding) and a charcoal pill secondary CTA (`{colors.secondary}` fill, white text, same radius). Right side: a phone mockup on a warm parchment (`{colors.surface}`) blob shape."
- "Build a primary pill button: cobalt blue (`{colors.primary}`) fill, white text, Headspace Apercu 700 18px (`{typography.button-ui}`), `{rounded.pill}` radius, `14px 24px` padding, `0px 2px 0px {colors.shadow-soft}` bottom press shadow. Hover shifts to `{colors.primary-hover}`."
- "Make a feature card: warm parchment (`{colors.surface}`) fill, `{rounded.lg}` 24px radius, `24px` padding, no shadow. Headline in `{typography.heading-sub}` warm charcoal; body in `{typography.body}`. Ghost CTA in `{colors.tertiary}` fill with `{rounded.pill}`."
- "Design a segmented selector: outer pill container in `{colors.tertiary}`, two segment pills inside with `{rounded.pill}`. Active segment: white fill or charcoal fill. Inactive: transparent. Labels in `{typography.button-small}` 700."
- "Create a navigation bar on white (`{colors.background}`), sticky on scroll with a `{colors.border}` hairline at the bottom. Left: Headspace wordmark. Center: nav links in `{typography.nav-link}` charcoal. Right: 'Log in' text link + 'Try for free' cobalt blue pill button (`{components.button-primary}`)."
- "Build a content chip/tag: `{colors.surface}` parchment fill, `{colors.border}` 1px border, `{rounded.pill}` radius, `6px 16px` padding, `{typography.caption}` text in `{colors.ink-body}`. Use for mindfulness / sleep / stress category filters."

### Iteration Guide

1. Start on white (`{colors.background}`); alternate warm parchment (`{colors.surface}`) for every second major section to create page zones without adding visual noise.
2. Set every display headline in Headspace Apercu weight 700 with tight negative tracking. If the headline feels loose, tighten spacing — don't reduce weight.
3. There is one CTA color: cobalt blue (`{colors.primary}`). Every other button is charcoal (`{colors.secondary}`) or cream (`{colors.tertiary}`). If two things look blue, one is wrong.
4. Make every interactive control a pill. Buttons, chips, badges, selectors — if it is interactive, it is `{rounded.pill}`.
5. Apply the bottom-press shadow (`0px 2px 0px {colors.shadow-soft}`) to prominent pill buttons; keep card surfaces flat or with a soft diffuse shadow only.
6. Keep ink warm: charcoal (`{colors.ink-body}`) for body, near-black (`{colors.ink}`) for display. Never reach for a cold gray or pure black.
7. Honor the breathing room — 64-96px between sections is not wasted space, it is the calm.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Headspace. Brand names and trademarks belong to their respective owners.