DESIGN.md · Analysis

Headspace

headspace.com · 10 Oct 2026 · 47 colors · Headspace Apercu

Headspace

A science-backed mental health app combining meditation, sleep, and therapy tools in a warm, approachable interface. Headspace transforms wellness into an accessible daily practice through thoughtful design and human-centered interaction.

Colors

surface#f9f4f2

surface-dim#ede8e5

surface-bright#ffffff

surface-container-lowest#fefdfb

surface-container-low#faf7f5

surface-container#f5f1ee

surface-container-high#ede8e5

surface-container-highest#e5dfd9

on-surface#2d2c2b

on-surface-variant#4b4c4d

inverse-surface#44423f

inverse-on-surface#f9f4f2

outline#8e8b87

outline-variant#d8d8d8

surface-tint#0061ef

primary#0061ef

on-primary#ffffff

primary-container#0040ea

on-primary-container#ffffff

inverse-primary#4da3ff

secondary#ff9500

on-secondary#ffffff

secondary-container#ffd8a8

on-secondary-container#2d2c2b

tertiary#ffce00

on-tertiary#2d2c2b

tertiary-container#fff4cc

on-tertiary-container#2d2c2b

error#d32f2f

on-error#ffffff

error-container#ffebee

on-error-container#d32f2f

primary-fixed#e3f2fd

primary-fixed-dim#bbdefb

on-primary-fixed#0040ea

on-primary-fixed-variant#0061ef

secondary-fixed#ffe8cc

secondary-fixed-dim#ffc266

on-secondary-fixed#ff9500

on-secondary-fixed-variant#ff7d00

tertiary-fixed#fff9e6

tertiary-fixed-dim#ffe680

on-tertiary-fixed#ffce00

on-tertiary-fixed-variant#ffb300

background#f9f4f2

on-background#2d2c2b

surface-variant#e5dfd9

Typography

display: fontFamily: Headspace Apercu · fontSize: 56px · fontWeight: 700 · lineHeight: 64px · letterSpacing: -0.02em
headline-lg: fontFamily: Headspace Apercu · fontSize: 40px · fontWeight: 700 · lineHeight: 48px · letterSpacing: -0.01em
headline-md: fontFamily: Headspace Apercu · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Headspace Apercu · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: -0.005em
body-lg: fontFamily: Headspace Apercu · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: -0.01em
body-md: fontFamily: Headspace Apercu · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: -0.01em
label-md: fontFamily: Headspace Apercu · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0em
label-sm: fontFamily: Headspace Apercu · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.01em

Design guidance

Overview

Headspace is a science-backed mental health and meditation app designed to make wellness accessible and approachable for everyone. The brand embodies 'Warm Minimalism'—a design philosophy that balances clean, modern interfaces with human warmth and approachability. The aesthetic combines a soft, neutral palette (warm beiges and grays) with vibrant accent colors (electric blue, warm orange, and golden yellow) that evoke energy, hope, and clarity. The UI prioritizes calm, intentional interactions that guide users through meditation, sleep, and therapy content without overwhelming them. The emotional response is one of gentle empowerment: users feel supported, not judged; guided, not rushed. Voice: conversational yet authoritative, warm yet grounded in science. Example sentence: 'Take 10 minutes today to reset your mind—your future self will thank you.'

Colors

The Headspace color system operates on a principle of 'Warm Clarity'—neutral, approachable surfaces paired with confident, action-oriented accents. Primary (#0061ef) is the electric blue used exclusively for CTAs, links, and interactive focus states; it commands attention without aggression. Secondary (#ff9500) is a warm orange reserved for highlights, badges, and supporting UI elements that reinforce brand personality. Tertiary (#ffce00) is a golden yellow used sparingly for notifications, achievements, and celebratory moments. The surface stack is built on warm off-whites and soft grays: surface (#f9f4f2) is the default background, surface-container-low (#faf7f5) is used for subtle card backgrounds, and surface-container-highest (#e5dfd9) provides the darkest neutral for depth. On-surfac

Typography

The Headspace type system uses Headspace Apercu, a custom humanist sans-serif that balances geometric precision with organic warmth. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) is used for section titles and primary messaging. Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight) is the primary reading size for longer-form content, while Body-md (16px, 400 weight) is the default for UI labels and form text. Label-md (14px, 600 weight) is applied to buttons and interactive elements, with 0em letter-spacing for crisp legibility. All type uses -0.01em letter-spacing by default to create visual cohesion and reduce perceived whitespace. On small labels over busy backgroun

Layout

The Headspace layout operates on a 12-column grid with a max-width of 1440px, maintaining a fluid, responsive rhythm across all breakpoints. The gutter spacing is consistently 24px (md spacing unit), creating breathing room between columns and sections. Section separation uses lg spacing (40px) for major content blocks, while internal card padding uses md spacing (24px). The page rhythm alternates between full-width hero sections (with centered content constrained to 954px internally) and multi-column card grids that adapt from 1 column on mobile to 2–3 columns on desktop. Container max-widths vary by section (843px for narrow content, 1023px for wider layouts, 1440px for full-bleed), but all respect the visual hierarchy by centering content. White-space is generous: never collapse margins

Elevation & Depth

Depth in Headspace is achieved through subtle shadows and layering, never through darkness. The elevation system uses three levels: Level 1 (Base) has no shadow and sits flush with the surface. Level 2 (Standard Card) uses box-shadow: 0px 1px 8px rgba(20, 19, 19, 0.2), creating a soft, barely-perceptible lift that distinguishes cards from the background. Level 3 (Elevated/Modal) uses box-shadow: 0px 4px 12px rgba(20, 19, 19, 0.12), providing clear visual separation for modals, dropdowns, and floating elements. All shadows use warm, desaturated black (rgba(20, 19, 19, ...)) rather than pure bla

Shapes

The Headspace shape philosophy is 'Soft-Technical'—combining geometric precision with humanizing curves. Buttons use full (2rem / 32px) border-radius to create pill-shaped, approachable CTAs that feel friendly rather than corporate. Cards and containers use xl (1.5rem / 24px) radius for a modern, rounded aesthetic that softens the grid. Input fields and smaller interactive elements use DEFAULT (0.5rem / 8px) radius for subtle definition without visual noise. The full radius (2rem) is also applied to badges and notification elements to emphasize their secondary, non-critical nature. Avoid sharp

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#0061ef) background with white text, 12px 32px padding, 48px height, and full (2rem) radius. On hover, shift to button-primary-hover with {colors.primary-container} (#0040ea) background—a darker blue that signals interactivity without jarring the user. Apply a 200ms ease-out transition on all state changes. Button-secondary uses {colors.surface-container-high} background with on-surface text, same dimensions, and is used for secondary actions (e.g., 'View all', 'Learn more'). Button-ghost is transparent with a 2px solid {colors.primary} border and primary text; on hover, fill the background with {colors.primary-fixed} (light blue) to indicate activation. All buttons must have a minimum to

Do's and Don'ts

**Do**

Do use primary (#0061ef) exclusively for CTAs, focus states, and key interactive elements—never for decorative or background purposes.
Do maintain the warm off-white surface (#f9f4f2) as the default background; it reduces eye strain and reinforces the brand's approachable personality.
Do apply full (2rem) border-radius to all buttons and major interactive elements to create the signature soft-technical aesthetic.
Do use md spacing (24px) as the default padding and gutter; it creates visual rhythm and prevents cramped layouts.
Do transition all interactive state changes (hover, focus, active) over 150–200ms with ease-out timing to feel responsive without jarring.
Do apply {elevation.sm} shadows (0px 1px 8px rgba(20, 19, 19, 0.2)) to cards and containers; avoid larger shadows that create visual chaos.

**Don't**

Don't use pure black (#000000) or pure white (#ffffff) as primary text or background; stick to the warm palette (on-surface #2d2c2b, surface #f9f4f2).
Don't apply secondary (#ff9500) or tertiary (#ffce00) to buttons or CTAs; reserve them for badges, highlights, and supporting UI.
Don't use sharp corners (0px radius) on interactive elements; the brand's warmth depends on consistent, gentle curves.
Don't exceed {elevation.lg} (0px 16px 40px rgba(20, 19, 19, 0.08)) shadow depth; larger shadows feel heavy and undermine the calm aesthetic.
Don't mix font families; Headspace Apercu is the only typeface—no fallbacks to system fonts or serif alternatives.
Don't collapse spacing below sm (12px) between interactive elements; maintain breathing room to reduce cognitive load and support accessibility.

---
version: alpha
name: Headspace
description: >-
  A science-backed mental health app combining meditation, sleep, and therapy tools in a warm, approachable interface.
  Headspace transforms wellness into an accessible daily practice through thoughtful design and human-centered
  interaction.
logo:
  src: https://images.ctfassets.net/v3n26e09qg2r/64mSWkeWKMrDAwmTViOdmS/ec6d493260ff34b5a6205be6aec2a485/Logo.svg
colors:
  surface: '#f9f4f2'
  surface-dim: '#ede8e5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fefdfb'
  surface-container-low: '#faf7f5'
  surface-container: '#f5f1ee'
  surface-container-high: '#ede8e5'
  surface-container-highest: '#e5dfd9'
  on-surface: '#2d2c2b'
  on-surface-variant: '#4b4c4d'
  inverse-surface: '#44423f'
  inverse-on-surface: '#f9f4f2'
  outline: '#8e8b87'
  outline-variant: '#d8d8d8'
  surface-tint: '#0061ef'
  primary: '#0061ef'
  on-primary: '#ffffff'
  primary-container: '#0040ea'
  on-primary-container: '#ffffff'
  inverse-primary: '#4da3ff'
  secondary: '#ff9500'
  on-secondary: '#ffffff'
  secondary-container: '#ffd8a8'
  on-secondary-container: '#2d2c2b'
  tertiary: '#ffce00'
  on-tertiary: '#2d2c2b'
  tertiary-container: '#fff4cc'
  on-tertiary-container: '#2d2c2b'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffebee'
  on-error-container: '#d32f2f'
  primary-fixed: '#e3f2fd'
  primary-fixed-dim: '#bbdefb'
  on-primary-fixed: '#0040ea'
  on-primary-fixed-variant: '#0061ef'
  secondary-fixed: '#ffe8cc'
  secondary-fixed-dim: '#ffc266'
  on-secondary-fixed: '#ff9500'
  on-secondary-fixed-variant: '#ff7d00'
  tertiary-fixed: '#fff9e6'
  tertiary-fixed-dim: '#ffe680'
  on-tertiary-fixed: '#ffce00'
  on-tertiary-fixed-variant: '#ffb300'
  background: '#f9f4f2'
  on-background: '#2d2c2b'
  surface-variant: '#e5dfd9'
typography:
  display:
    fontFamily: Headspace Apercu
    fontSize: 56px
    fontWeight: '700'
    lineHeight: 64px
    letterSpacing: '-0.02em'
  headline-lg:
    fontFamily: Headspace Apercu
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
    letterSpacing: '-0.01em'
  headline-md:
    fontFamily: Headspace Apercu
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Headspace Apercu
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: '-0.005em'
  body-lg:
    fontFamily: Headspace Apercu
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: '-0.01em'
  body-md:
    fontFamily: Headspace Apercu
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: '-0.01em'
  label-md:
    fontFamily: Headspace Apercu
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0em
  label-sm:
    fontFamily: Headspace Apercu
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.01em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 2rem
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1440px
elevation:
  sm: 0px 1px 8px rgba(20, 19, 19, 0.2)
  md: 0px 4px 12px rgba(20, 19, 19, 0.12)
  lg: 0px 16px 40px rgba(20, 19, 19, 0.08)
layout:
  containerMaxWidth: 1440px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    fontWeight: '600'
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary}'
  button-primary-active:
    backgroundColor: '#0040ea'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    fontWeight: '600'
  button-secondary-hover:
    backgroundColor: '{colors.outline-variant}'
    textColor: '{colors.on-surface}'
  button-ghost:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    border: 2px solid {colors.primary}
  button-ghost-hover:
    backgroundColor: '{colors.primary-fixed}'
    textColor: '{colors.primary}'
  card:
    backgroundColor: '{colors.surface-container-low}'
    rounded: '{rounded.xl}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-container}'
    boxShadow: '{elevation.md}'
  input-field:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 24px 16px 8px 16px
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px {colors.primary-fixed}
  badge:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 6px 12px
    fontWeight: '600'
  badge-secondary:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 6px 12px
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  banner-accent:
    backgroundColor: '#ffc0e8'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
    border: none
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#0061ef) background with white text, 12px 32px padding, 48px height, and full (2rem) radius. On hover, shift to button-primary-hover with {colors.primary-container} (#0040ea) background—a darker blue that signals interactivity without jarring the user. Apply a 200ms ease-out transition on all state changes. Button-secondary uses {colors.surface-container-high} background with on-surface text, same dimensions, and is used for secondary actions (e.g., 'View all', 'Learn more'). Button-ghost is transparent with a 2px solid {colors.primary} border and primary text; on hover, fill the background with {colors.primary-fixed} (light blue) to indicate activation. All buttons must have a minimum to

## Do's and Don'ts

**Do**
- Do use primary (#0061ef) exclusively for CTAs, focus states, and key interactive elements—never for decorative or background purposes.
- Do maintain the warm off-white surface (#f9f4f2) as the default background; it reduces eye strain and reinforces the brand's approachable personality.
- Do apply full (2rem) border-radius to all buttons and major interactive elements to create the signature soft-technical aesthetic.
- Do use md spacing (24px) as the default padding and gutter; it creates visual rhythm and prevents cramped layouts.
- Do transition all interactive state changes (hover, focus, active) over 150–200ms with ease-out timing to feel responsive without jarring.
- Do apply {elevation.sm} shadows (0px 1px 8px rgba(20, 19, 19, 0.2)) to cards and containers; avoid larger shadows that create visual chaos.

**Don't**
- Don't use pure black (#000000) or pure white (#ffffff) as primary text or background; stick to the warm palette (on-surface #2d2c2b, surface #f9f4f2).
- Don't apply secondary (#ff9500) or tertiary (#ffce00) to buttons or CTAs; reserve them for badges, highlights, and supporting UI.
- Don't use sharp corners (0px radius) on interactive elements; the brand's warmth depends on consistent, gentle curves.
- Don't exceed {elevation.lg} (0px 16px 40px rgba(20, 19, 19, 0.08)) shadow depth; larger shadows feel heavy and undermine the calm aesthetic.
- Don't mix font families; Headspace Apercu is the only typeface—no fallbacks to system fonts or serif alternatives.
- Don't collapse spacing below sm (12px) between interactive elements; maintain breathing room to reduce cognitive load and support accessibility.

Edit, then copy or download.