Health & Wellness / iOS / Android / Web

Headspace

Headspace makes mental health feel light and friendly through saturated, happy color blocks, warm neutrals and soft rounded shapes.

Download
  • #0061EF
  • #FFCE00
  • #F9F4F2
  • #2D2C2B
  • #FFA1CC
  • #3B197F
  • #02873E
  • #FC5500

Color

Every color token in the file, grouped by role.

Brand

  • primary#0061EF
  • on primary#FFFFFF
  • secondary#2D2C2B
  • ink secondary#63605D

Surfaces

  • canvas#FFFFFF
  • surface#F9F4F2

Text

  • pink#FFA1CC
  • ink#2D2C2B
  • ink body#44423F

Lines

  • border#E2DED9

More

  • yellow#FFCE00
  • sky#00A4FF
  • violet#3B197F
  • green#02873E
  • orange#FC5500

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Headspace ApercuHeadspace Apercu is private and not available in open fonts. Shown in Figtree, the closest open match.
  • display64px / 700 / 72px

    Headspace

  • headline52px / 700 / 57.2px

    Headspace

  • title32px / 700 / 38.4px

    Headspace

  • body16px / 400 / 18.4px

    The quick brown fox jumps over the lazy dog

  • button14px / 700 / 15.4px

    Continue to checkout

  • chip14px / 500 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 88px
  • radius 1212px
  • radius 1616px
  • radius 2424px
  • radius 3232px

Spacing

The spacing scale, drawn to size.

  • space 88px
  • space 1212px
  • space 1616px
  • space 2424px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button dark
    button-dark
  • choice card
    choice-card
  • plan card
    plan-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 101 lines
version: alpha
name: Headspace-design-analysis
description: "A meditation and mental health app with a playful color set: strong blue #0061ef for the main action, sunshine yellow #ffce00, warm paper #f9f4f2, soft brown-black text and Apercu headlines on round pills."
status: Draft
appVersion: "measured in a browser from headspace.com, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0061ef"
  on-primary: "#ffffff"
  secondary: "#2d2c2b"
  yellow: "#ffce00"
  sky: "#00a4ff"
  pink: "#ffa1cc"
  violet: "#3b197f"
  green: "#02873e"
  orange: "#fc5500"
  canvas: "#ffffff"
  surface: "#f9f4f2"
  ink: "#2d2c2b"
  ink-body: "#44423f"
  ink-secondary: "#63605d"
  border: "#e2ded9"

typography:
  # Font note: "Headspace Apercu" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  display:
    fontFamily: "'Headspace Apercu', sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 72px
    letterSpacing: -1.92px
  headline:
    fontFamily: "'Headspace Apercu', sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 57.2px
    letterSpacing: -1.56px
  title:
    fontFamily: "'Headspace Apercu', sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 38.4px
    letterSpacing: -0.96px
  body:
    fontFamily: "'Headspace Apercu', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18.4px
  button:
    fontFamily: "'Headspace Apercu', sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 15.4px
  chip:
    fontFamily: "'Headspace Apercu', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: -0.14px

rounded:
  radius-8: 8px
  radius-12: 12px
  radius-16: 16px
  radius-24: 24px
  radius-32: 32px

spacing:
  space-8: 8px
  space-12: 12px
  space-16: 16px
  space-24: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-32}"
    height: 48px
  button-dark:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-32}"
    height: 48px
  choice-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-8}"
    height: 78px
  plan-card:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-12}"
    padding: 24px

Overview

Headspace offers guided meditation, sleep and mental health support in iOS and Android apps. Its public site uses big blocks of saturated color and warm text. The product sits behind a subscription, so this file covers the public pages. [Measured]

What defines the look:

  1. Saturated color blocks. Blue, yellow, sky, pink, violet and green fill whole sections. [Measured]
  2. A strong blue main action. #0061ef with white bold text, 48 high at 32 radius, with a soft shadow. [Measured]
  3. Warm text. #2d2c2b, #44423f and #63605d lean brown, never pure black. [Measured]
  4. Warm paper. #f9f4f2 is the resting surface. [Measured]
  5. Bold, tight headlines. Apercu 700 with negative tracking. [Measured]

Source for this file: the headspace.com home and subscriptions pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass. A third page tried returned an older error page with a different style, and it was left out. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Main action#0061efTry for free [Measured]
Dark button#2d2c2bTry for $0 [Measured]
Yellow#ffce00blocks, plan card [Measured]
Other blockssky #00a4ff, pink #ffa1cc, violet #3b197f, green #02873esections [Measured]
Warm accents#fc5500 links, #ff7300, #ffa500 chipssubscriptions page [Measured]
Text#2d2c2b, #44423f, #63605d, #4b4c4dsteps [Measured]
Surfaces#ffffff, #f9f4f2page, sections [Measured]
Borders#e2ded9, #d2d5de2px on cards [Measured]

Typography

RoleDesktopMobileFace and weight
Display64 on 72not measuredApercu 700, tracking -1.92 [Measured]
Headline52 on 57.236 on 36Apercu 700, tracking -1.56 [Measured]
Title32 on 38.424 on 28.8Apercu 700, tracking -0.96 [Measured]
Body16 on 18.4sameApercu 400 [Measured]
Button14 on 15.4, also 1614 on 15.4Apercu 700 [Measured]
Chip14 on 18not measuredApercu 500 [Measured]

Shape and spacing

Buttons 32, cards 16 to 32, choice cards 8, plan cards 12, chips 8, circles 50 percent. Choice cards carry a 2px #e2ded9 border. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only on the web. The dark pass changed nothing. [Measured]

Platform: iOS

How the Headspace app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the blue and yellow set, warm text and round shapes with the web. [Inferred]

Platform: Android

How the Headspace app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the blue and yellow set, warm text and round shapes with the web. [Inferred]

Platform: Web

The home and subscriptions pages, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar of 16px text links with a promotion strip above. A blue Try for free pill stays visible at the mobile width. [Measured]

Main action

Expected on Web: Page-level button.

#0061ef pill with white bold 14px text, 48 high at 32 radius on desktop and 33 at the mobile width, with a soft shadow. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Choice cards are white, 78 high at 8 radius with a 2px #e2ded9 border. A plan card fills #ffce00 at 12 radius with 24 padding. Category chips are 34 high at 8 radius. [Measured]

Text sizing

Expected on Web: Browser zoom.

Fixed pixels that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 48 high and choice cards 76 to 78. The mobile top pill is 33 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Content needs a subscription or trial. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site that keeps its color blocks at every width. [Measured]

Cross-platform consistency

Consistent across platforms: the blue and yellow set, warm text and round shapes. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use whole sections of saturated color.
  • Keep the main action strong blue.
  • Use warm near-black text.
  • Round everything generously.

Don't

  • Don't use pure black body text.
  • Don't use muted grays for the main surfaces.
  • Don't use sharp corners.
  • Don't put white text on yellow.

Known Gaps

  • The app and its sessions, players and illustrations were not measured.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Illustration style, icons and motion were not measured, and they matter to this brand.
  • Body line height of 18.4 is the page default and may not reflect reading text in the app.
  • Headspace Apercu is private. Figtree is within 1 percent at 64px and closest in shape. Urbanist matched width but has a more geometric, slanted look. Outfit looked heavier.
  • Account deletion and store sign-in rules were not verified.