Headspace Design System

Overview

Headspace presents a deliberately gentle visual language that mirrors its mission: making mental health feel approachable, not clinical. The system rests on a warm cream canvas ({colors.canvas} — #f9f4f2) that immediately signals comfort—a deliberate departure from sterile white SaaS conventions. Against this soft ground plane, content floats in {colors.surface-soft} white cards with generously rounded corners ({rounded.lg} — 32px), creating a "friendly bubble" aesthetic that feels like being held rather than observed.

Brand voltage concentrates in two distinct zones: the electric-blue CTAs ({colors.primary} — #0000ee) that drive conversion actions throughout the page, and the warm orange of the Headspace logo mark ({colors.accent-orange}). These two hues form the emotional core of the palette—blue for trust and action, orange for warmth and humanity—while the yellow announcement bar ({colors.accent-yellow}) adds moments of optimism without competing for attention.

The single typographic move defining this system is its use of Headspace Apercu at bold weights for everything important. Display text sits at {typography.display-lg} (52px, weight 700) with aggressive letter-spacing compression (-1.56px), creating dense, confident word-shapes that feel modern yet unpretentious. Body copy maintains a slightly heavier-than-usual weight of 500 ({typography.body-md}), ensuring readability while preserving the typeface's humanist character. There is no "light" or "thin" voice here—the system speaks with quiet confidence at every scale.

Shape language leans heavily into super-rounded geometries: pills dominate button forms ({rounded.pill}), cards breathe through large-radius corners, and even structural containers soften their edges. This rounding extends to illustration elements visible in the hero mockups, where circular avatars, rounded phone frames, and organic blob shapes reinforce the non-judgmental, welcoming tone.

Two sub-systems operate within the broader design language: the Product Offering dialect, where paired cards present "Mental health app" vs. "Online therapy" as equal-weighted choices with identical card structures but differentiated CTAs; and the Consent/Utility layer (cookie banner, eligibility badges), which uses smaller type scales and more restrained padding to recede from primary narrative focus.

Key Characteristics:

• Warm cream canvas ({colors.canvas}) instead of pure white, establishing immediate emotional warmth
• Electric-blue primary action color ({colors.primary}) reserved exclusively for conversion-driving buttons and links
• Proprietary Headspace Apercu typeface across all scales, never falling back to system fonts visibly
• Bold weight (700) on all display and title roles, with 500-weight body copy maintaining presence
• Generous corner radii ({rounded.lg}, {rounded.pill}) on every interactive and container element
• White product cards ({product-card}) floating on the cream canvas with subtle depth treatment
• Dark-filled pill buttons ({button-secondary-dark}) as secondary CTAs alongside primary blue
• Yellow accent band ({announcement-banner}) for time-sensitive promotional messaging

Colors

Brand & Accent

• Primary ({colors.primary} — #0000ee): Electric blue used for all primary CTAs ({button-primary}), hyperlinks, and high-affordance interactive elements. Carries the entire conversion vocabulary of the site.
• Primary Active ({colors.primary-active} — #0000c8): Pressed/darker state of primary blue for buttons and links.
• Primary Hover ({colors.primary-hover} — #1a1aff): Lightened hover state for interactive elements.
• Accent Orange ({colors.accent-orange}): The brand mark color appearing in the logo circle; used sparingly for brand identity reinforcement.
• Accent Yellow ({colors.accent-yellow} — #ffce00): Announcement bar background ({announcement-banner}) and illustration accent elements; signals promotional or urgent-but-friendly messaging.
• Bright Blue ({colors.accent-bright-blue} — #0061ef): Secondary blue variant, brighter than primary; appears on certain button treatments and decorative elements.
• Secondary Blue ({colors.secondary-blue} — #3860be): Muted tertiary blue for less prominent link states or illustrative details.

Surface

• Canvas ({colors.canvas} — #f9f4f2): The foundational warm cream background covering the entire viewport behind all content; the most distinctive surface-level choice.
• Surface Soft ({colors.surface-soft} — #ffffff): Pure white used for elevated cards ({product-card}), navigation bars ({top-nav}), cookie banners ({cookie-banner}), and any content container that needs to "float" above the canvas.
• Surface Strong ({colors.surface-strong} — #efeae7): Subtle warm off-white for secondary backgrounds, hover states on light surfaces, or bordered regions needing slight differentiation from pure white.
• Surface Dark ({colors.surface-dark} — #2d2c2b): Near-black charcoal used for dark-fill secondary buttons ({button-secondary-dark}) and high-contrast reversed text blocks.
• Surface Warm Dark ({colors.surface-warm-dark} — #44423f): Slightly warmer dark tone for body text on light backgrounds and certain UI chrome.

Text / Ink

• Ink ({colors.ink} — #4b4c4d): Primary text color for navigation links, captions, labels, and general UI chrome; the workhorse dark gray.
• Body ({colors.body} — #44423f): Slightly warmer body copy color used for paragraph text, descriptions, and longer-form content.
• Heading Dark ({colors.heading-dark} — #2d2c2b): Deepest neutral, reserved for h1/h2 display headlines and the heaviest typographic moments.
• Muted ({colors.muted} — #63605d): Mid-gray for secondary information, timestamps, eligibility tags, and de-emphasized metadata.
• Mid Gray ({colors.mid-gray} — #555555): Intermediate gray for tertiary text states.
• On Primary ({colors.on-primary} — #ffffff): Pure white text atop blue or dark button backgrounds; guaranteed AA contrast against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text for reversed contexts (dark buttons, dark cards).
• On Surface ({colors.on-surface} — #4b4c4d): Alias for default text color on white/light surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — #e2ded9): Lightest border/divider color for subtle separation lines between list items or card edges.
• Border Soft ({colors.border-soft} — #e8e4df): Default border for outlined buttons ({button-outline}), inputs, and contained regions.
• Border Strong ({colors.border-strong} — #cecac5): Heavier border for focus rings or emphasized outlines.
• Input Border ({colors.input-border} — #9d968e): Muted taupe for form field borders and range slider tracks.

Semantic & Signature Illustration Colors

• Signature Pink ({colors.signature-pink} — #ffa1cc): Illustration accent for warmth/femininity-coded visual elements in marketing graphics.
• Signature Purple ({colors.signature-purple} — #3b197f): Deep purple for nighttime/sleep-themed illustration scenes.
• Signature Green ({colors.signature-green} — #02873e): Success state color and nature/wellness illustration accents.
• Signature Cyan ({colors.signature-cyan} — #00a4ff): Bright cyan for technology/AI-related illustration highlights (Ebb companion visuals).
• Error ({colors.error} — #c13515): Validation error and alert state red.
• Success ({colors.success} — #02873e): Confirmation and positive feedback green.
• Link ({colors.link} — #0000ee): Standard hyperlink color, identical to primary brand blue.
• Link Active ({colors.link-active} — #0000c8): Visited or active link state.

Typography

Font Family

The entire Headspace design system runs on Headspace Apercu, a customized version of the Apercu Pro typeface served exclusively from Headspaces CDN (static.headspace.com/fonts/apercu-v1.002/). This is a humanist sans-serif with open apertures, slightly geometric proportions, and excellent legibility at both display and body scales. The font stack declares "Headspace Apercu", sans-serif, with system fallbacks that should rarely activate given the self-hosted WOFF2/WOFF/TTF/OTF delivery strategy.

Eight font weights are available in the loaded face set: 200 (Light), 400 (Regular), 500 (Medium), and 700 (Bold), each in both Roman and Italic variants. The design system primarily utilizes three of these—400 for body-small/caption roles, 500 for paragraph body text, and 700 for all titles, displays, and buttons—creating a binary emphasis model where hierarchy comes from scale and letter-spacing rather than weight gradation. An additional mono variant (Apercu Pro Mono) exists at weights 200 and 700 for code/data displays but does not appear in the landing-page context.

The typeface's character feels simultaneously friendly and authoritative—rounded terminals prevent harshness, while sturdy stroke widths maintain clarity at small sizes. It avoids the cold precision of geometric grotesks (Futura, Circular) and the neutrality of neo-grotesks (Inter, Helvetica), occupying a space closer to Freight Sans or Ideal Sans: humanist enough for wellness content, structured enough for app interfaces.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 700 | 1.1 (-1.92px) | -1.92px | Hero headlines on wide viewports | | {typography.display-lg} | 52px | 700 | 1.1 | -1.56px | Main hero headline, card headlines | | {typography.display-md} | 40px | 700 | 1.15 | -1.2px | Section headers below hero | | {typography.title-lg} | 32px | 600 | 1.25 | -0.48px | Subsection titles | | {typography.title-md} | 52px | 700 | 1.1 | -1.56px | Product card headlines (same spec as display-lg) | | {typography.title-sm} | 24px | 700 | 1.33 | -0.6px | Feature titles, small card headers | | {typography.body-lg} | 20px | 500 | 1.45 | -0.2px | Lead paragraphs, feature descriptions | | {typography.body-md} | 18px | 500 | 1.44 | -0.18px | Standard body copy, stat lines | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Navigation links, chip labels | | {typography.caption} | 14px | 400 | 1.43 | 0 | Eligibility badges, footnotes | | {typography.caption-sm} | 12px | 500 | 1.33 | 0 | Legal microcopy, timestamps | | {typography.button} | 16px | 700 | 1.25 | 0 | All button labels, CTAs | | {typography.label} | 14px | 600 | 1.43 | 0 | Form field labels, tags | | {typography.overline} | 11px | 700 | 1.27 | 0.08em uppercase | Category labels, breadcrumbs |

Principles

Headspace's typographic hierarchy operates on scale dominance over weight variation. Notice that both {typography.display-lg} and {typography.title-md} share identical specs (52px/700), meaning the system treats card-level headlines with the same visual authority as the page hero—a flat hierarchy choice that democratizes content sections rather than enforcing a strict descending order. When differentiation is needed, the system drops to {typography.display-md} (40px) for sub-sections, then jumps down significantly to {typography.title-sm} (24px) for feature-level headers.

Letter-spacing compression is the secret weapon of this type system. Every role above 24px receives negative tracking (from -0.6px at title-sm up to -1.92px at display-xl), tightening character clusters into denser word-blocks that feel contemporary and confident. This is particularly effective with Apercu's naturally open letterforms—the compression counteracts potential "airiness" without compromising readability. Body text at 18px receives a modest -0.18px nudge, while anything below 16px sits at zero or positive spacing to preserve legibility.

The bold-or-nothing weight philosophy means you will not find 600-weight headlines or 300-weight subtitles. Buttons lock at 700, headlines lock at 700, body locks at 500, and small UI text locks at 400. This creates a predictable rhythm: if text is big, it's also heavy; if it's small, it's normal or medium. The sole exception is {typography.label} at 14px/600, which bridges the gap for form-related microcopy that needs more presence than caption text.

Uppercase appears exactly once in the defined system: the {typography.overline} role at 11px with +0.08em letter-spacing, reserved for category taxonomy (e.g., "MEDITATION", "THERAPY"). Everything else—including navigation items, button text, and even the logo wordmark—uses sentence case or lowercase, reinforcing the conversational, un-corporate tone.

Note on Font Substitutes

Headspace Apercu is a proprietary typeface not available on Google Fonts. For development environments or open-source implementations, the closest Google Fonts equivalent is DM Sans (weights 400, 500, 700), which shares similar humanist proportions, open counters, and a slightly friendly geometric skeleton. A secondary fallback option is Nunito for its rounded-terminal warmth, though Nunito reads slightly more casual. Define these as CSS variables:

:root {
  --font-family-primary: "Headspace Apercu", "DM Sans", "Nunito", sans-serif;
}

If implementing from scratch without access to the Headspace CDN font files, DM Sans at matching weights and sizes will approximate the visual output within ~90% fidelity. The primary loss will be in Apercu's specific terminal treatments (the subtly squared-off round forms), which contribute to the typeface's "designed but not designerly" quality.

Layout

Spacing System

• Base unit: 4px (the {spacing.xxs} token, appearing 200 times in extracted CSS).

• Tokens:

  • {spacing.xxs} — 4px: Icon gaps, tight internal padding
  • {spacing.xs} — 6px: Small element spacing, checkbox offsets
  • {spacing.sm} — 8px: Button internal vertical padding, badge padding
  • {spacing.md} — 12px: Form gap, compact component gutters
  • {spacing.base} — 14px: Link padding baseline
  • {spacing.base-lg} — 16px: Standard horizontal padding for inline elements
  • {spacing.lg} — 20px: Button horizontal padding, card internal margins
  • {spacing.xl} — 24px: Section gutters, card padding baseline
  • {spacing.xl-plus} — 32px: Large card padding, inter-block gaps
  • {spacing.xxl} — 48px: Major section padding, hero vertical rhythm
  • {spacing.custom-19} — 19px: Observed odd value (likely icon-centering offset)
  • {spacing.section} — 80px: Full-section vertical breathing room

• Section padding (vertical): {spacing.xxl} (48px) for standard sections, scaling to {spacing.section} (80px) for hero and major band transitions. Used consistently in {component.hero-band} and between stacked content zones.

• Card internal padding: {spacing.xxl} vertical × {spacing.xl} horizontal (48px × 24px) on {component.product-card}; tighter variants use {spacing.xl-plus} (32px) for nested content.

• Gutters: Desktop content constrains to approximately 1240px–1440px centered, with {spacing.xl} (24px) lateral gutter on each side within the main container. The header uses {spacing.xxl} (48px) horizontal padding for wider edge clearance.

Grid & Container

Maximum content width is 1440px as declared by the main and section containers. Within this envelope, the hero section employs a two-column asymmetric grid: the headline column occupies roughly 60% width (left-aligned text block), while the supporting content area (product cards, illustrations) fills the remaining space. At desktop resolution, the two {component.product-card} instances sit side-by-side with approximately 24px–32px gap between them, each taking roughly 48% of the content area.

The layout follows an editorial marketplace density—not as sparse as a luxury fashion site, not as grid-dense as an e-commerce catalog. Information groups into clear "bands": the announcement strip, the navigation bar, the hero headline zone, the dual-product card row, then subsequent scroll sections (not visible in screenshot). Each band has distinct vertical padding that creates rhythmic pauses as the user scrolls.

Hero column splits show the headline (Feel less anxious all with Headspace) sitting in a left-aligned block above a three-item stats/checkmark line, with substantial whitespace below before the card row begins. The cards themselves center-align their internal content (headline → CTA → badge → illustration).

Whitespace Philosophy

Headspace practices generous, intentional emptiness. The cream canvas isn't just a background—it's active negative space that lets the eye rest between interactions. Cards float with significant margin around them; the hero headline has roughly 100px+ of clear space below before content resumes; navigation items spread across the bar with comfortable click targets. This is not "airy-minimalist" whitespace (which would imply luxury/expense) but rather therapeutic whitespace—room to breathe that mirrors the product's meditation ethos. Density increases only inside the cookie banner (utility layer) and within illustration-rich card interiors.

Header Architecture

[1440px max-width container, 48px horizontal padding]
┌─────────────────────────────────────────────────────────────────┐
│ [🟠 Logo]   For You  Business  Providers  Plans  Resources  About │ Log In │ Help │ [Try for free ▸] │
└─────────────────────────────────────────────────────────────────┘
  ↑ sticky     ← centered nav group →              ↑ utilities →  ↑ primary CTA
  left         ~520px nav width                       text link    pill button

The {component.top-nav} is 72px tall with white ({colors.surface-soft}) background. Logo sits flush-left. Navigation links center in a ~520px cluster with uniform {component.top-nav-link} padding (8px×12px). Right-side utilities (Log In, Help) render as text-only links, followed by the primary conversion CTA ({component.button-primary}) in electric-blue pill format.

Hero Section

[Full-width {colors.canvas} background]
┌──────────────────────────────────────────────────────────────┐
│                                                              │
│  [Yellow Announcement Banner — full width]                   │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  FEEL LESS ANXIOUS                                           │
│  ALL WITH HEADSPACE                    [{typography.display-lg}]      │
│                                                              │
│  ☑ 1,000+ meditations...  ☑ Affordable therapy...  ☑ Trusted... │
│  [{typography.body-md}] stats line                            │
│                                                              │
│  ┌──────────────────────────┐  ┌──────────────────────────┐  │
│  │ Mental health app with   │  │ Online therapy that       │  │
│  │ expert-led meditations   │  │ accepts insurance         │  │
│  │                          │  │                           │  │
│  │   [ Try for $0 ]         │  │   [ Check your coverage ] │  │
│  │   {button-secondary-dark}│  │   {button-secondary-dark}  │  │
│  │                          │  │                           │  │
│  │   ✅ HSA/FSA Eligible    │  │   ✅ HSA/FSA Eligible      │  │
│  │                          │  │                           │  │
│  │   [Phone mockup w/      │  │   [Therapist video        │  │
│  │    illustration]        │  │    preview]               │  │
│  └──────────────────────────┘  └──────────────────────────┘  │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The hero uses a single-column headline, dual-card grid pattern. Headline spans full content width (or near-full), while cards split 50/50 below. Each card is a {component.product-card} with internal centering: headline → dark pill CTA → eligibility badge → rich media (app screenshot or video thumbnail).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} or {colors.surface-soft} background | Page ground, nav bar, announcement banner | | 1 — Border-defined | 2px solid {colors.border-soft}, no shadow | Outlined buttons ({button-outline}), tag chips ({tag-chip}) | | 2 — Soft lift | {extensions.shadows.bottom-edge} — 2px solid dark offset shadow | Buttons with pressed-state depth, card bottom edges | | 3 — Elevation | {extensions.shadows.subtle-elevation} — 3.23px blur shadow | Elevated dropdowns, modals, toast notifications | | 4 — Glow | {extensions.shadows.glow} — 18px diffuse shadow | Featured cards, hero illustration containers, spotlighted elements |

Headspace employs a color-block-over-shadow philosophy for primary depth cues. Rather than relying on drop shadows to separate layers, the system uses surface color contrast (white cards on cream canvas, dark buttons on white) as the primary depth indicator. Shadows exist but play a supporting role: they add subtle grounding to buttons via bottom-edge-only shadows (mimicking a physical object casting downward) and provide modal elevation when overlays appear.

The shadow palette is warm-toned (notice the rgba(65, 61, 69, ...) values with slightly warm RGB bias rather than pure-black transparency), ensuring shadows harmonize with the cream canvas rather than introducing cool visual dissonance. This attention to shadow temperature is characteristic of mature design systems that account for atmospheric coherence.

Decorative Depth

Illustration elements introduce flat-color-layer depth independent of CSS box-shadows. The hero mockups show layered graphic shapes (yellow circles, purple night-scapes, pink clouds, cyan AI indicators) rendered as opaque color fields with no gradients or blurs. These create visual interest through shape composition and color juxtaposition rather than lighting simulation. Phone frame mockups sit as rounded rectangles (matching {rounded.lg}) containing screenshot content, treated as "windows" into the product experience rather than photographic objects.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Outlined buttons, tag chips, small containers | | {rounded.DEFAULT} | 16px | Standard card radius (unused in hero; reserved for smaller components) | | {rounded.md} | 24px | Medium cards, image containers, panel corners | | {rounded.lg} | 32px | Product cards ({product-card}), hero content containers | | {rounded.xl} | 800px (near-pill) | Super-rounded containers, pill-adjacent shapes | | {rounded.pill} | 9999px | All CTA buttons ({button-primary}, {button-secondary-dark}) | | {rounded.full} | 9999px | Avatar circles, icon backgrounds |

The radius vocabulary is aggressively rounded. Even "small" radius tokens start at 8px—there are no sharp-corner (0px–4px) components in the hero fold except possibly the cookie banner (which may be intentionally rectangular to signal its utility-layer status). The dominant radius for user-facing cards is 32px ({rounded.lg}), creating a "soft rectangle" that reads as friendly and approachable. Buttons universally use pill shaping, eliminating any ambiguity about interactability while reinforcing the system's non-angular personality.

Photography Geometry

Imagery in the hero section falls into two categories:

Product screenshots (left card): Contained within a rounded phone-frame mockup at approximately 3:4 portrait aspect ratio, with {rounded.lg} (32px) corner radius on the outer frame. The screenshot itself shows the actual Headspace app interface with meditation player controls, profile chips, and chat bubbles—rendered flat without perspective distortion.

Human photography (right card): Video thumbnail showing a therapist's face, framed in a similar rounded rectangle with slightly different aspect ratio (closer to 4:3 or 1:1). The image has natural photographic depth but is contained within the same shape language as the app screenshot, maintaining visual consistency between digital-product and human-service offerings.

Both image types sit inside the card's padding zone, below the CTA and eligibility badge, functioning as "proof of concept" visual support rather than lead visual elements.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The primary conversion driver across the entire site. Electric-blue ({colors.primary}) pill-shaped button with white ({colors.on-primary}) text at 16px/700 weight ({typography.button}). Padding is generous: 14px vertical × 28px horizontal, creating a comfortable touch target (~56px height). Used for "Try for free" in the navigation and as the highest-affordance action anywhere conversion is possible. State variants include {component.button-primary-active} (deepened to {colors.primary-active}) and {component.button-primary-hover} (lightened to {colors.primary-hover}). Transitions use the system's 150ms default easing ({extensions.motion.easing-default}) for smooth state changes.

{component.button-secondary-dark} — Filled dark-charcoal ({colors.surface-dark}) pill button with white text, sharing identical dimensions and typography with the primary variant. Used for "Try for $0" and "Check your coverage" CTAs within product cards, providing visual hierarchy beneath the global primary CTA while maintaining strong contrast. Active state ({component.button-secondary-dark-active}) deepens the fill to near-black (#1a1918). These buttons feature the bottom-edge shadow ({extensions.shadows.bottom-edge}) giving them subtle physical presence against the white card background.

{component.button-outline} — White-background button with a 2px solid border in {colors.border-soft} and ink-colored ({colors.ink}) text. Rounded to {rounded.sm} (8px)—less aggressively rounded than the CTAs—with asymmetric padding (8px vertical, 16px right / 24px left) suggesting optional icon placement on the left side. Used for navigational chip-style actions like "Stress less", "Sleep soundly", "Manage anxiety" in filter/tag contexts.

{component.button-text} — Transparent-background, text-only button with body-colored ({colors.body}) text. Minimal padding (8px × 12px) keeps it compact. Used for utility navigation (Log In, Help) where affordance should be present but visually subordinate to primary actions.

{component.cookie-button-primary} — Smaller primary-action variant for the consent banner context. Uses {colors.primary} background with {rounded.sm} (8px)—noteably not pill-shaped—fitting the more utilitarian cookie UI. Padding reduces to 10px × 20px for density-appropriate sizing within the banner.

{component.cookie-button-secondary} — Text-button style for secondary consent actions ("Your Privacy Choices", potentially "Reject All"). Transparent background with link-blue ({colors.link}) text. Same {rounded.sm} treatment as the cookie primary, keeping the pair visually coherent.

Cards & Containers

{component.product-card} — The hero section's signature component. White ({colors.surface-soft}) background with 32px ({rounded.lg}) corner radius, floating on the cream canvas. Internal padding is 48px vertical × 24px horizontal ({spacing.xxl} × {spacing.xl}). Contains a headline at {typography.title-md} (52px/700) in {colors.heading-dark}, followed by a dark CTA button, an eligibility badge, and a media area (screenshot or video thumbnail). Two instances sit side-by-side in the hero grid: "Mental health app" and "Online therapy." The card has no visible border or shadow in resting state, relying purely on background contrast against {colors.canvas} for separation.

{component.hero-band} — Full-width container for the headline zone. Cream ({colors.canvas}) background (blending seamlessly with page ground), with 48px ({spacing.xxL}) vertical padding and 24px horizontal padding. Holds the display headline ({typography.display-lg}) and stats line ({component.stats-line}) above the card row. Acts as a structural grouping element more than a visual wrapper.

{component.announcement-banner} — Thin full-width strip at the very top of the page (above navigation). Bright yellow ({colors.accent-yellow}) background with 8px vertical padding. Contains underlined link-style text ("HSA/FSA eligible: save with pre-tax dollars") in {colors.heading-dark} at body-small size. Functions as a dismissible promotional notice.

{component.top-nav} — Fixed/sticky navigation bar spanning full viewport width. White ({colors.surface-soft}) background, 72px height, 48px horizontal padding. Contains logo (left), navigation link cluster (center, ~520px width), and utility/action area (right). No visible shadow or border in the screenshot, though production likely adds a subtle shadow on scroll.

{component.cookie-banner} — Bottom-positioned (fixed or sticky) consent overlay. White ({colors.surface-soft}) background with 24px ({spacing.xl}) padding. Contains legal copy at {typography.body-sm} on the left, action buttons on the right, and a close/dismiss control. Spans full viewport width with internal max-width constraint.

{component.footer} — Page-footer container (inferred from pattern, partially visible or expected below fold). Cream ({colors.canvas}) background matching page ground, with generous vertical padding. Muted ({colors.muted}) text color for reduced visual weight.

Typography & Content Components

{component.product-card-headline} — Internal headline element within {component.product-card}. Uses {typography.title-md} (52px/700) in {colors.heading-dark}, with 0 horizontal padding (inherits from parent) and 24px bottom margin before the CTA. Center-aligned within the card.

{component.eligibility-badge} — Small informational tag below card CTAs. Transparent background with muted text ({colors.muted}) at {typography.caption} size (14px/400). Includes a checkmark icon (likely SVG) preceding the text "HSA/FSA Eligible". 16px vertical padding separates it from the button above.

{component.stats-line} — Three-item horizontal list beneath the hero headline. Each item starts with a checkmark icon followed by descriptive text ("1,000+ meditations...", "Affordable therapy...", "Trusted mental health app..."). Rendered in {colors.body} at {typography.body-md} (18px/500). Items separated by generous horizontal gap (estimated 32–48px). No enclosing container border or background.

{component.tag-chip} — Identical specification to {component.button-outline}: white background, 2px border, 8px radius, asymmetric padding. Used for topic-filter or category-selection contexts. May include leading icon based on the larger-left-padding hint.

{component.icon-circle} — Circular icon container (40px × 40px, implied square size) with yellow ({colors.accent-yellow}) background and dark text/icon color. Likely used for checkmarks or status indicators in badge-like positions.

Navigation Components

{component.top-nav-link} — Individual navigation menu item within the header. Transparent background, body-colored ({colors.body}) text at {typography.body-sm} (16px/400). Padding of 8px vertical × 12px horizontal ensures comfortable click target. No active/selected state visible in screenshot; likely uses underline or color shift on hover/selection per conventional patterns.

Do's and Don'ts

Do

• Do use {colors.canvas} (#f9f4f2) as the persistent page background—never substitute pure white (#ffffff) for the root surface, as the warm cream is essential to the brand's therapeutic atmosphere.
• Do reserve {colors.primary} (#0000ee) exclusively for conversion-driving CTAs and hyperlinks; avoid using this blue for decorative borders, icons, or non-interactive elements.
• Do apply {rounded.pill} (9999px) to all primary and secondary CTA buttons—the pill shape is a mandatory brand identifier for clickable commitment actions.
• Do set display and headline text to weight 700 (bold) with negative letter-spacing; the compressed-bold look defines Headspace's typographic voice.
• Do use {rounded.lg} (32px) radius on major content cards to maintain the "soft rectangle" aesthetic that distinguishes this system from generic SaaS patterns.
• Do pair {button-secondary-dark} buttons with {button-primary} buttons to create visual hierarchy—dark fills signal secondary importance while remaining highly actionable.
• Do place illustration/media content below CTAs inside product cards, following the headline → action → proof reading order established by the hero layout.
• Do maintain the 48px vertical × 24px horizontal internal padding on {component.product-card} instances—tighter padding breaks the spacious, breathable card aesthetic.
• Do use warm-toned shadows ({extensions.shadows.bottom-edge}, {extensions.shadows.subtle-elevation}) when adding depth; avoid cool-gray or pure-black transparent shadows that clash with the cream canvas.
• Do leverage {colors.accent-yellow} for announcement/promotional banners only—it carries urgency-without-alarm semantics in the Headspace color vocabulary.
• Do set body copy to weight 500 ({typography.body-md}) rather than 400 for standard paragraph text—heavier body weight improves readability and matches the confident brand voice.
• Do include the eligibility badge ({component.eligibility-badge}) with checkmark icon beneath card CTAs when presenting HSA/FSA-aware pricing—it's a trust-building micro-pattern.

Don't

• Don't use sharp corners (0px–4px radius) on any customer-facing component; the minimum radius in the visible system is {rounded.sm} (8px), and most elements should be significantly rounder.
• Don't apply gradient backgrounds, frosted-glass effects, or complex texture layers to any surface—the system relies on flat color fields with optional single-value shadows.
• Don't use font weights below 400 for any readable text (captions, body, headings); the 200 (Light) weight in the loaded font set is reserved for decorative/display contexts only, not interface copy.
• Don't place {colors.primary} blue text on any background lighter than white—it fails accessibility testing; always use {colors.on-primary} (#ffffff) text on primary-colored surfaces.
• Don't expand the radius vocabulary beyond the seven defined tokens ({rounded.sm} through {rounded.full})—inventing new intermediate values (e.g., 12px, 20px) fragments the shape system.
• Don't convert pill buttons to rectangular buttons in responsive layouts—maintain {rounded.pill} at all breakpoints; if space is constrained, reduce padding or font-size instead.
• Don't use {colors.ink} (#4b4c4d) for headline text—headlines require the darker {colors.heading-dark} (#2d2c2b) to establish sufficient hierarchy distance from body copy.
• Don't add visible borders to {component.product-card} instances; the white-on-cream contrast provides sufficient separation, and borders would introduce unwanted visual noise.
• Don't uppercase navigation item labels, button text (except {typography.overline} category labels), or body copy—the system is overwhelmingly sentence-case/lowercase.
• Don't position CTAs below media/illustration content in cards; the established pattern places conversion actions above visual proof to prioritize scannability.
• Don't use the cookie-banner component styling ({rounded.sm} buttons) for primary page CTAs—the utilitarian radius is exclusive to the consent/utility layer.
• Don't assume dark mode from the mode: "dark" assignment in extensions; the visual evidence shows a light/warm canvas, and the token values should guide implementation regardless of the mode flag.

Motion & Animation

Transition Tokens

/* Core interactive transition — used on buttons, links, form elements */
--transition-interactive: 
  color 0.15s cubic-bezier(0.32, 0.94, 0.6, 1), 
  background-color 0.15s cubic-bezier(0.32, 0.94, 0.6, 1), 
  border-color 0.15s cubic-bezier(0.32, 0.94, 0.6, 1), 
  box-shadow 0.15s cubic-bezier(0.32, 0.94, 0.6, 1), 
  transform 0.15s cubic-bezier(0.32, 0.94, 0.6, 1);

/* Border-specific transition — focus rings, outline reveals */
--transition-border: border 0.3s ease;

/* Generic fallback */
--transition-all: all 0.15s cubic-bezier(0.32, 0.94, 0.6, 1);

/* Transform-only — hover lifts, scale effects */
--transition-transform: transform 0.1s ease-out;

/* Fade transitions — overlay appearances, tooltip reveals */
--transition-fade: 
  opacity 0.4s cubic-bezier(0.32, 0.94, 0.6, 1), 
  background-color 0.4s cubic-bezier(0.32, 0.94, 0.6, 1);

/* Quick snap — instant state changes */
--transition-instant: 0.1s ease-out;

Keyframe Animations

• onetrust-fade-in — Opacity fade-in animation used by the OneTrust cookie consent widget for its entrance transition; standard 0.3s–0.4s duration from opacity 0 to 1.
• slide-down-custom — Vertical slide-down reveal, likely used for expandable accordion sections, dropdown menus, or the cookie banner appearance.

Interaction Patterns

• Button state transitions: All {component.button-primary}, {component.button-secondary-dark}, and {component.button-outline} instances transition background-color, color, border-color, box-shadow, and transform simultaneously using the 150ms cubic-bezier(0.32, 0.94, 0.6, 1) easing—a "snappy but smooth" curve with slight overshoot that feels responsive without being jarring.
• Cookie banner entrance: The {component.cookie-banner} slides up and fades in from the viewport bottom using combined opacity + transform transitions over 300–400ms.
• Focus ring expansion: Form inputs and interactive elements grow a border or shadow ring on focus with a 300ms border-transition duration, slower than hover states to indicate sustained attention.
• Hover lift implication: While hover states aren't documented (per policy), the presence of transform in transition tokens and the ease-out transform-specific timing suggests buttons likely implement a subtle Y-axis translate (-1px to -2px) or minor scale (1.02–1.04) on hover.
• Link underline animation: The underlined text in the announcement banner likely animates underline-width or opacity on hover, consistent with the border transition token.
• Scroll-triggered reveals: Not explicitly detected in static CSS, but the section-based layout strongly implies fade-up or slide-up animations for card rows as they enter the viewport—standard for this class of marketing page.

No explicit motion tokens suggest parallax, marquee, or complex orchestrated animation sequences. Recommended timing for any added motion: 150ms for micro-interactions (hover, press), 300ms for structural transitions (expand, reveal), 400ms for modal/overlay entrances, all using the brand's signature cubic-bezier(0.32, 0.94, 0.6, 1) easing for organic deceleration.

Imagery Style

• Photographic style: Human faces appear in natural, warm-toned lighting (visible in the therapist video thumbnail on the right card)—approachable, diverse representation without overly polished studio aesthetics. Photography supports rather than dominates; it lives inside card containers as "social proof" elements.
• Product screenshots: App interface captures rendered at device-native resolution inside rounded phone-frame mockups. Screenshots show the actual Headspace UI with meditation player controls, profile avatars (circular), chat bubbles (rounded rectangles), and progress indicators—functionally informative rather than artistically stylized.
• Illustration language: Flat-vector decorative elements accompany the app screenshot—organic blob shapes in brand colors (yellow smile-face circle, purple nightscape with moon/stars, pink cloud forms, cyan sparkle/star). Style is playful, abstract, and non-literal: shapes suggest emotion/mood (calmness, sleep, joy) without depicting specific scenes.
• Color treatment in imagery: Illustrations use the exact semantic palette tokens ({colors.accent-yellow}, {colors.signature-purple}, {colors.signature-pink}, {colors.signature-cyan}) ensuring visual cohesion with the UI layer. No photographic filters or color overlays are applied to images—they retain natural color.
• Aspect ratios: Phone mockups use ~3:4 (portrait) aspect ratio; therapist video uses ~4:3 or 1:1 (square-ish) aspect ratio. Both are tightly cropped to relevant content.
• Rounding consistency: Image containers match {rounded.lg} (32px), aligning with card corner radius so images appear "native" to their containers rather than inserted foreign objects.
• Visual hierarchy: In the dual-card layout, imagery sits at the bottom third of each card, below the conversion action. This prioritizes the written offer and CTA, using imagery as supporting credibility rather than lead attention-grabber.
• Icon/avatar style: User avatar shown in the app screenshot is a circular photograph with thin border, consistent with common social/app patterns. The "Ebb" AI companion indicator appears to use a simple dot/badge treatment.
• No stock photography aesthetics: Despite being a mass-market consumer app, imagery avoids obviously stock-photo compositions (no handshakes, no isolated-on-white business people, no forced-diversity boardroom shots). The therapist thumbnail looks candid/session-capture in style.

Icon System

• Library: Custom SVG — No third-party icon library (Lucide, Heroicons, Material) was detected in the framework analysis. Headspace uses self-contained inline SVGs or a private icon sprite.
• Specific icons observed:
  • Checkmark/circle-check (✓) — Used in stats line items and eligibility badges
  • Menu/hamburger (implied for mobile nav, not visible in desktop screenshot)
  • Close/X — Visible on cookie banner dismissal control
  • Play/triangle — Visible in the meditation player mockup (center play button)
  • Arrow-right/chevron-right — Likely on "Try for free" CTA (though not clearly visible)
  • Logo mark — Orange filled circle with implied white interior detail (the Headspace "dot")
• Treatment: Icons appear to be stroke-based or filled-simple (geometric primitives rather than detailed illustrations). Color is typically currentColor inheriting from parent text color, or set to explicit brand colors (yellow for the logo, white for on-dark contexts).
• Size alignment: Checkmark icons in stats lines estimate at 18–20px height, aligned with {typography.body-md} cap height for optical balance. Badge checkmarks are slightly smaller (~14–16px) matching caption-scale text.
• Stroke weight: Appears consistent at 1.5px–2px stroke width, matching the medium weight of body copy—not too thin (fragile) or too thick (heavy).
• Container shapes: Icons sit inside circular containers when acting as standalone indicators (eligibility badge), using {colors.accent-yellow} background with dark foreground color.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React Server Components, App Router) — matches the detected 
                  React-based architecture and HEADSPACE.COM's apparent Next.js deployment
- Styling:        CSS Modules or Styled Components with CSS custom properties — the extracted 
                  CSS shows BEM-like class names (css-v74ccp, css-zf0iqh) consistent with 
                  CSS Modules or styled-components hashing; Tailwind NOT detected
- Fonts:          Self-hosted "Headspace Apercu" from static.headspace.com CDN with 
                  font-display: swap; fall back to "DM Sans" via Google Fonts for dev env
- Animation:      Framer Motion for scroll-triggered reveals and layout animations; 
                  CSS transitions for hover/focus states (already defined in extension tokens)
- Icons:          Custom SVG library (internal); consider Lucide for prototyping with 
                  strokeWidth=2 to approximate the observed weight
- Component lib:  Custom components (no shadcn/Radix detected); recommend Radix Primitives 
                  for accessible dropdowns/modals if building interactive features

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; nav collapses to hamburger; cards stack vertically; hero headline shrinks to ~32-40px | | Tablet | 640px – 1024px | Two-column card grid may persist with reduced padding; nav items may truncate or wrap | | Desktop | 1024px – 1440px | Full layout as seen in screenshot: dual cards side-by-side, full nav visible, 1440px max container | | Wide | > 1440px | Container stops expanding; content centers with increasing lateral whitespace |

Touch Targets

• {component.button-primary}: ~56px height (14px padding × 2 + 16px font + border) × ~160px+ width — exceeds WCAG AAA 44×44 minimum comfortably
• {component.button-secondary-dark}: Identical dimensions to primary — exceeds minimum
• {component.button-outline}: ~40px height (8px × 2 + 16px font + border) — within spec but tighter; ensure tap areas don't shrink further
• {component.top-nav-link}: ~40px height (8px × 2 + 16px font) — meets minimum; adequate for desktop, monitor on mobile
• {component.cookie-button-primary}: ~44px height (10px × 2 + 16px font + border) — meets AA/AAA threshold exactly

Collapsing Strategy

• Navigation: At tablet/mobile widths, the horizontal link cluster ("For You", "For Business", etc.) collapses into a hamburger menu (☰) icon, revealing a slide-down or off-canvas drawer. The "Try for free" CTA likely remains visible as a compact pill button or moves into the menu.
• Hero headline: {typography.display-lg} (52px) steps down to {typography.display-md} (40px) on tablet, then to {typography.title-lg} (32px) on mobile. Letter-spacing compression reduces proportionally.
• Product cards: The dual-card side-by-side layout stacks vertically on mobile, with each {component.product-card} taking full viewport width minus gutters. Card padding may compress from 48px×24px to 32px×20px.
• Stats line: The three-item checkmark list wraps from horizontal to vertical stacking, becoming a bullet-like list beneath the headline on narrow screens.
• Announcement banner: Persists full-width at all breakpoints but may truncate text with ellipsis on mobile or reduce font size to {typography.caption}.
• Cookie banner: Transitions from horizontal layout (text left, buttons right) to vertical stacking (text → buttons → close) on mobile. May become a bottom-sheet-style overlay.

Image Behavior

• Phone mockup (left card): Maintains aspect ratio on mobile but reduces maximum width to fit the single-column card. Height scales proportionally; may crop slightly on very narrow viewports.
• Therapy video thumbnail (right card): Similar proportional scaling. On stacked mobile layout, both images appear sequentially (first card's image, then second card's image) as user scrolls.
• Avatar/profile images: Remain circular regardless of viewport; diameter likely caps at 40–48px in compact layouts.

Iteration Guide

1. Initialize with the exact token set from this DESIGN.md YAML frontmatter. Define CSS custom properties for every {colors.x}, {spacing.x}, {rounded.x}, and {typography.x} token. Never hard-code a hex, px value, or font-size that has a corresponding token—this is the single most common implementation failure point.

2. Set up font loading first. The "Headspace Apercu" font-face declarations must load with font-display: swap from the Headspace CDN URL pattern shown in the extracted CSS (static.headspace.com/fonts/apercu-v1.002/). If CDN access is restricted, substitute DM Sans (Google Fonts, weights 400/500/700) and define --font-family-primary: "DM Sans", "Headspace Apercu", sans-serif.

3. Build the surface layer before adding content. Start with {colors.canvas} as the <body> background. Add {component.top-nav} (white, 72px height, 48px horizontal pad). Add {component.announcement-band} (yellow, full-width, 8px pad). Verify the warm-cream-to-white-to-yellow vertical stack renders correctly before inserting any text or cards.

4. Implement the hero headline zone next. Set {typography.display-lg} (52px/700/-1.56px tracking) in {colors.heading-dark}. Add the stats line below at {typography.body-md} with checkmark icons. Test that the headline wraps gracefully at 1024px viewport width (the container constraint).

5. Build the dual-card grid. Create two {component.product-card} instances with {colors.surface-soft} background, {rounded.lg} (32px) corners, 48px×24px internal padding. Place {component.product-card-headline} → {component.button-secondary-dark} → {component.eligibility-badge} → media placeholder in each. Ensure 24–32px gap between cards on desktop.

6. Add all button variants with state classes. Implement {component.button-primary} (blue pill), {component.button-secondary-dark} (charcoal pill), and {component.button-outline} (white with border). Create -active, -hover, and -disabled modifier classes using the separate component entries in the frontmatter. Apply --transition-interactive to all.

7. Layer in the cookie banner last (it's a z-index overlay). Build {component.cookie-banner} with its unique {rounded.sm} button treatment. Include the {component.cookie-button-primary} and {component.cookie-button-secondary} variants. Position fixed at viewport bottom.

8. Apply motion tokens conservatively. Add transition: var(--transition-interactive) to all buttons and links. Add var(--transition-fade) to the cookie banner entrance. Resist adding animation beyond what the transition tokens define—the brand voice is "subtle moderate," not "expressive."

9. Run contrast checks on every text/background combination. Specifically verify: {colors.primary} + {colors.on-primary} (blue on white), {colors.surface-dark} + {colors.on-dark} (near-black on charcoal), and {colors.heading-dark} + {colors.canvas} (dark on cream). Target WCAG AA (4.5:1) minimum; AAA (7:1) preferred for body text.

10. Test at three breakpoints (375px mobile, 768px tablet, 1440px desktop). Verify: nav collapse, card stacking, headline scale step-down, touch-target sizes, and image proportionality. The design should feel "the same" at every size, not like a different website.

Font Setup for Non-Production Environments:

<!-- Google Fonts substitute for Headspace Apercu -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

<style>
  :root {
    --font-family-primary: "DM Sans", "Headspace Apercu", -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Type scale variables mapping to DESIGN.md tokens */
    --font-size-display-xl: 64px;
    --font-size-display-lg: 52px;
    /* ... etc for all typography roles */
  }
</style>

When production deployment requires the authentic typeface, replace the Google Fonts import with the @font-face declarations from the extracted CSS, pointing to https://static.headspace.com/fonts/apercu-v1.002/HeadspaceApercu-{Weight}.woff2.

Known Gaps

• Hover state styling: Per the no-hover policy, hover background color shifts, border color changes, and transform translations (lift effects) are inferred from transition token presence but not explicitly extractable from the static screenshot. Implement hover states using the -hover component variants and --transition-interactive timing.
• Loading/skeleton states: No loading indicators, skeleton placeholders, or shimmer effects were visible in the above-fold content. Recommend implementing skeleton cards matching {component.product-card} geometry with pulse animation for perceived performance during data fetches.
• Form validation states beyond focus: The extracted CSS contains range input styling but no error-message typography, red-border treatments, or validation-icon patterns. Design these using {colors.error} red, {typography.caption} sizing, and the existing border-radius/shadow tokens.
• Dark mode palette: The mode: "dark" extension value contradicts the visually light appearance. If a true dark mode exists (activated via toggle or system preference), its token values (dark canvas, light text, adjusted surface colors) were not captured in this screenshot and require separate extraction.
• Authenticated/user-dashboard surfaces: The screenshot captures the anonymous landing page only. Post-login surfaces (dashboard, meditation player, therapy scheduling UI) likely have additional component patterns (progress bars, session cards, calendar grids) not represented here.
• Mobile-navigation drawer: The collapsed hamburger menu contents, animation behavior, and item listing are not visible in the desktop screenshot. Assume standard slide-down or off-canvas panel with the same {typography.body-sm} nav-link styling.
• Illustration asset specifications: The decorative vector shapes (blobs, stars, clouds) visible in the hero mockups are rasterized in the screenshot. Their original SVG specifications, animation behaviors (if any), and responsive scaling rules are unknown.
• Accessibility focus-indicator styling: Focus-visible outlines (keyboard navigation rings) are not captured statically. Recommend implementing a 2px solid {colors.primary} or {colors.border-strong} outline with 2px offset on all interactive elements, using :focus-visible pseudo-class.
• Internationalization/right-to-left layout: No RTL or localized variant was visible. The asymmetric padding on {component.button-outline} (24px left vs 16px right) assumes LTR reading order and would need mirroring for Arabic/Hebrew deployments.
• Third-party integration styling: The OneTrust cookie widget (detected via onetrust-fade-in keyframe name) brings its own styling that partially overrides the design system. Document exceptions where vendor CSS cannot be customized.