Headspace Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

9type steps

3radius steps

6pxspacing base

Headspace, in one page

Headspace is a hand-drawn morning — warm, slow, and humanly imperfect. Where Nike Run Club is a stadium and Strava is a stopwatch, Headspace is a pottery studio. The canvas is butter-cream (#FFF7E7) — never pure white, never gray — and the palette behaves like a sunset gradient: a marigold orange (#FF6B35), a butter yellow (#FFD25C), a moss sage (#7E9F4B), and a deep dusk-eggplant (#2E1A47) for surface contrast. Every screen looks like a children's book illustration of a meditation: spheres breathe, characters smile, gradients soften everything. Headspace is the most distinctive UI in the entire wellness category because it commits fully to its illustration style rather than relying on photography.

The animated meditation circles are the brand's signature visual — a sphere that breathes (scale 1.0 → 1.04 → 1.0 over 8 seconds, in time with the inhale/exhale guidance), tinted in a warm gradient (Marigold → Butter), pulsing as the meditation session progresses. On the Today screen, an "Aurora gradient" wash (Marigold → Butter → Coral) blankets the top third — it's the visual equivalent of waking up. The illustration set features round-headed characters in soft pastel hoodies, doing things like sitting cross-legged on hilltops, holding mugs, walking dogs. They appear on every empty state, every milestone reveal, every meditation completion screen — never as marketing pop-ups, always as gentle companions to the moment.

Typography is Apercu (a soft, slightly humanist sans by Colophon Foundry) at five weights. Apercu's lowercase 'a' has a curl that makes it feel like it was drawn rather than constructed — the perfect match for the illustration style. Headspace uses generous line-height (1.5 on body), title-case (not all-caps, ever), and a warm Ink Brown (#2E1A47) for text — never true black. The hierarchy is calming: 28pt for screen titles, 22pt for meditation titles, 18pt for body, 13pt for metadata. Numbers are not the star here — minutes meditated, streak count, all rendered tabular but never screaming.

The most signature screen is the in-meditation Play screen: butter-cream canvas, a breathing sphere in the center filling 60% of the screen, soft guidance text above it ("Take a deep breath in..."), and a thin progress arc at the very top. Below the sphere, a play/pause control. Nothing else. It's the meditative app pretending it isn't an app at all.

Key Characteristics:

Butter-cream canvas (#FFF7E7) — warm, off-white, never pure
Marigold Orange (#FF6B35) primary accent — Today CTA, primary buttons, meditation sphere gradient stop
Butter Yellow (#FFD25C) secondary accent — selected pills, breath-cycle pacing chip
Moss Sage (#7E9F4B) tertiary accent — Sleep tab, meditation streak chips
Dusk Eggplant (#2E1A47) — primary text and the rare dark surface (sleep mode)
Aurora gradient — Marigold → Butter → Coral wash on Today screen and meditation hero cards
Breathing meditation sphere — gradient circle 60% of screen, scales 1.0 → 1.04 → 1.0 over 8s during inhale/exhale
Illustration-heavy — round-headed characters in pastel hoodies on every empty state and milestone reveal
Apercu typography at 5 weights with generous 1.5 line-height — feels like a journal
Bottom tab bar: Today / Meditate / Sleep / Move / Profile — Marigold active, Sage on Sleep tab
Card corners at 24pt — soft, comfortable, never aggressive
Soft shadows (rgba(46,26,71,0.08)) tinted with the eggplant ink so they feel warm, not gray
Audio scrubber is a soft sage track with a butter ball — never tech-blue

Do's and don'ts

Do

Use Butter Cream #FFF7E7 for the canvas — never pure white, never cool gray
Use Marigold #FF6B35 as the primary action color — Start, Continue, Save
Apply the Aurora gradient (Marigold → Butter → Coral) on Today hero and meditation full-bleed cards
Render the breathing sphere as a radial gradient (#FFB89E highlight → #FF6B35 mid → #E55A2B shadow) with continuous breath animation
Use Apercu (or Nunito as fallback) — soft humanist sans, never grotesque
Use title case on every label — never UPPERCASE; UPPERCASE feels shouty
Use Ink Brown #2E1A47 for body text — warm purple-brown, never harsh black
Use illustration companions on every empty state and milestone reveal — characters are the brand
Use generous spacing — 24pt margins, 1.5 body line-height — pace it like breath
Use 24pt corner radius on meditation cards — Headspace's signature soft corner
Use warm Ink-tinted shadows (rgba(46,26,71,0.08)) — never true-black shadows
Use Marigold-tinted glow under primary CTAs — a sunrise, not a drop shadow
Use .impactOccurred(.soft) haptics — Headspace's haptic vocabulary is always soft
Tint the Sleep tab Sage #7E9F4B — the only tab with its own color; Sleep is its own world

Don't

Don't use pure white as the canvas — Headspace is warm-cream by brand
Don't use harsh black #000000 for text — Ink Brown #2E1A47 is the value
Don't use UPPERCASE on Apercu — title case only, never all-caps
Don't replace illustration companions with photography — Headspace is fully illustrated
Don't use cool blues or grotesque sans-serif typography — the brand is warm and humanist
Don't use heavy haptics — Headspace's haptic vocabulary is all soft and selection
Don't use a true-black drop shadow — shadows are tinted with Ink Brown for warmth
Don't animate the breathing sphere with a spring — pure ease-in-out is correct (springs feel digital)
Don't render the meditation sphere flat — the radial gradient is what makes it feel like a sun
Don't pack content tight — Headspace breathes; 24pt margins minimum
Don't use Marigold as the Sleep mode primary — Sage is the Sleep accent
Don't dim the canvas to dark gray on Sleep mode — Dusk #1A1430 is the value (warm purple-blue)

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Headspace design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Marigold Orange: #ff6b35
- Marigold Pressed: #e55a2b
- Marigold Light: #ffb89e
- Aurora Stop 1: #ffb89e
- Aurora Stop 2: #ffd25c
- Aurora Stop 3: #ff6b35
- Butter Yellow: #ffd25c
- Sage Moss: #7e9f4b
- Sage Light: #b4c68f
- Coral Flush: #f4877e

Type:
- families: Apercu, Nunito, Manrope
- scale: 11, 13, 16, 17, 18, 22, 28, 32, 56
- weights: 400, 500, 600, 700

Shape:
- radius: 20, 24, 28
- elevation: Shadow: `rgba(46,26,71,0.08) 0 4px 16px` — warm, soft, tinted with the ink color | Shadow: `rgba(255,107,53,0.25) 0 6px 16px` — a soft warm glow | Use Marigold-tinted glow under primary CTAs — a sunrise, not a drop shadow

Spacing: 6, 12, 14, 16, 24, 32

Rules:
- Use Butter Cream `#FFF7E7` for the canvas — never pure white, never cool gray
- Use Marigold `#FF6B35` as the primary action color — Start, Continue, Save
- Apply the Aurora gradient (Marigold → Butter → Coral) on Today hero and meditation full-bleed cards
- Render the breathing sphere as a radial gradient (`#FFB89E` highlight → `#FF6B35` mid → `#E55A2B` shadow) with continuous breath animation
- Use Apercu (or Nunito as fallback) — soft humanist sans, never grotesque
- Use title case on every label — never UPPERCASE; UPPERCASE feels shouty

Avoid:
- Don't use pure white as the canvas — Headspace is warm-cream by brand
- Don't use harsh black `#000000` for text — Ink Brown `#2E1A47` is the value
- Don't use UPPERCASE on Apercu — title case only, never all-caps
- Don't replace illustration companions with photography — Headspace is fully illustrated
- Don't use cool blues or grotesque sans-serif typography — the brand is warm and humanist
- Don't use heavy haptics — Headspace's haptic vocabulary is all soft and selection

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary

Marigold Orange (#FF6B35): Today CTA, primary buttons, "Continue" / "Start", meditation sphere gradient stop.
Marigold Pressed (#E55A2B): Active/pressed state on Marigold CTAs.
Marigold Light (#FFB89E): Background tints, illustration accents, Today-screen sky gradient stop.

Aurora Gradient (signature wash)

A 3-stop linear gradient used on the Today hero and many full-bleed meditation cards.

Aurora Stop 1 (#FFB89E): Top (peachy dawn)
Aurora Stop 2 (#FFD25C): Middle (butter sun)
Aurora Stop 3 (#FF6B35): Bottom (marigold morning)

Secondary (Mood Accents)

Butter Yellow (#FFD25C): Selected pills, breath-cycle indicator, "feel happier" mood tag.
Sage Moss (#7E9F4B): Sleep tab tint, meditation streak chips, ground accents in illustrations.
Sage Light (#B4C68F): Backgrounds on Sleep cards, soft sage tint.
Coral Flush (#F4877E): "Feel calm" mood tag, illustration cheeks.
Sky Lavender (#B7B0DC): "Mindful Moment" tag, evening meditation accent.

Sleep / Evening Mode (Dark)

Headspace's Sleep mode shifts the entire canvas to a deep dusk palette — gentle, warm, sleepy.

Dusk Canvas (#1A1430): Primary Sleep / dark-mode canvas (warm purple-blue).
Dusk Surface 1 (#2A2046): Card backgrounds.
Dusk Surface 2 (#3A2F5C): Pressed states.
Dusk Divider (#3F3460): Hairlines.

Canvas, Surfaces & Dividers (Light / Default Mode)

Butter Cream (#FFF7E7): Primary canvas everywhere except Sleep.
Off Cream (#FBF1DA): Card backgrounds, search-field fill, settings rows.
Warm Gray (#E8DFC9): Dividers, chip outlines.
Surface Light (#FFFFFF): Used very sparingly — only inside text-input dialogs.

Text

Ink Brown (#2E1A47): Primary text — screen titles, meditation titles, body. The Dusk Eggplant doubles as the text color; it's warm and never harsh.
Ink Brown Soft (#594675): Secondary text — metadata, "Hosted by Andy Puddicombe", session subtitles.
Ink Brown Mute (#8E7DA5): Tertiary — placeholders, captions.
Inverted Cream (#FFF7E7): Text on Sleep mode surfaces.

Semantic

Success Sage (#7E9F4B): Streak maintained, session completed.
Warning Amber (#FF9F4A): Subscription expiring.
Error Coral (#E04646): Failed sync, payment failed — never a hard red, just a muted coral.

Streak & Milestone Colors

Streak Marigold (#FF6B35): Active streak ring.
Milestone Gold (#E5B85C): "30 days mindful" — a warm gold, not a metallic yellow.
Achievement Coral (#F4877E): Special edition badges.

Type scaleRead the full spec

Font Family

Primary: Apercu (Colophon Foundry, 2010) — Headspace's house face since their 2017 rebrand
Weights available: Light (300), Regular (400), Medium (500), Bold (700), Black (900)
Fallback stack: 'Apercu', 'Apercu Pro', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif
Web/marketing Google Fonts substitute: Nunito (soft humanist sans, similar curl on the 'a'); also Manrope works as a slightly cooler stand-in
Body fallback: SF Pro Text is acceptable for the iOS app where Apercu isn't licensed

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Today Greeting Hero	Apercu	32pt	700 (Bold)	1.2	-0.3pt	"Good morning, Sam" — first thing on Today
Screen Title	Apercu	28pt	700	1.2	-0.3pt	"Meditate", "Sleep", "Move"
Meditation Title	Apercu	22pt	700	1.3	-0.2pt	"Stress Release" on a session card
Section Header	Apercu	18pt	700	1.3	-0.1pt	"Featured this week", "Quick meditations"
Card Title	Apercu	17pt	600 (Medium)	1.3	-0.1pt	Smaller card titles, list items
Body	Apercu	16pt	400 (Regular)	1.5	0pt	Description copy, journal entries — generous line-height
Body Bold	Apercu	16pt	600	1.5	0pt	Inline emphasis
Meditation Guidance	Apercu	22pt	400	1.4	0pt	"Take a deep breath in..." on the play screen — large, breathing
Metadata	Apercu	13pt	400	1.3	0pt	"Andy Puddicombe · 10 min", "20:32 remaining"
Tag Pill	Apercu	13pt	600	1.0	0.2pt	"Calm", "Stress", "Sleep" — title-case
Button (Primary)	Apercu	17pt	600	1.0	0pt	"Start", "Continue", "Save" — title-case
Tab Label	Apercu	11pt	500	1.0	0.1pt	Bottom tab labels
Time Display	Apercu	56pt	700	1.0	-0.5pt	"10:00" countdown on play screen
Streak Number	Apercu	22pt	700	1.0	0pt	"12" days in a row — tabular
Caption	Apercu	11pt	400	1.3	0pt	Footnotes, "tap to learn more"

Principles

Title case, never all caps: Apercu is a gentle face — UPPERCASE on Apercu reads as shouty and breaks the meditative tone
Weights concentrated at 400 / 600 / 700: Regular for body, Medium for card titles and buttons, Bold for screen titles and section headers; Light and Black appear only on the rare illustration overlay
Generous line-height (1.5 on body, 1.4 on guidance) — text feels paced, like breath
Ink Brown over true black: body text is #2E1A47 (the Dusk Eggplant) — warm purple-brown, never harsh black
No letter-spacing tricks: title case at 0 tracking is the default; very tight tracking (-0.3pt) is reserved for the 32pt greeting hero
monospacedDigit() on the countdown timer — minutes:seconds need to align as the timer ticks
Dynamic Type respected on body, titles, and guidance; FIXED on tag pills, tab labels, streak numbers (small, layout-sensitive)

Components and layoutRead the full spec

Breathing Meditation Sphere (the hero component)

Design

A circle in the center of the play screen
Diameter: 60% of screen width (≈234pt on iPhone 15)
Fill: radial gradient — #FFB89E 0% (highlight, top-left) → #FF6B35 70% → #E55A2B 100% (darkest, bottom-right)
Border: 1pt rgba(46,26,71,0.08) very soft to give the sphere a planet-like edge

Breath Animation

Continuous loop while in a breathing exercise
Inhale: 4-second scale from 1.0 → 1.04 with .easeInOut
Hold: 2-second hold at 1.04 with no animation
Exhale: 4-second scale from 1.04 → 0.96 with .easeInOut
Hold: 2-second hold at 0.96
The total breath cycle is 12 seconds; the sphere is the visual metronome

Particle Halo (optional, during sleep meditations)

12 small #FFD25C butter-yellow dots orbiting the sphere at 200pt radius, 360° in 60 seconds, each at 30° spacing
Each particle is 6pt with 50% opacity and slow fade in/out

Today Hero (the Aurora gradient screen)

Layout

Top third of the Today screen: full-bleed Aurora gradient (#FFB89E → #FFD25C → #FF6B35)
Greeting: "Good morning, Sam" in Apercu 32pt Bold Ink Brown, top-left with 24pt inset and 16pt below safe area
Subtitle: "Today's vibe: Mindful Moment" in Apercu 16pt Medium Ink Brown @ 80%, below greeting
Featured meditation hero card: full-width minus 24pt margins, 200pt tall, 24pt corner radius, with the breathing sphere on the left and "Start your day with peace" copy on the right
"Start" pill CTA: Marigold background, white text, full-width inside the card

Below the Aurora wash: butter-cream canvas resumes, with section "Quick meditations" horizontal scroll cards.

Meditation Session Card

Format

Width: full content width minus 24pt margins (or 280pt fixed in horizontal scroll)
Height: 200pt
Background: full-bleed illustration (a character meditating on a hilltop, sitting cross-legged, walking the dog) with rgba(46,26,71,0.0 → 0.6) gradient overlay bottom-up
Corner radius: 24pt
Bottom-aligned content:
Tag pill: "Stress" / "Sleep" / "Focus" in 13pt Semibold white on a rgba(255,255,255,0.25) glass background, full-pill 500pt
Title: "Stress Release" in Apercu 22pt Bold white
Subtitle: "Andy Puddicombe · 10 min" in Apercu 13pt Regular white @ 85%

Shadow: rgba(46,26,71,0.08) 0 4px 16px — warm, soft, tinted with the ink color

Quick Action Tile (Today screen Quick Meditations row)

Format

Width: 140pt fixed, in horizontal scroll
Height: 180pt
Background: solid soft color from the palette — Butter Yellow / Sage Light / Coral Flush / Sky Lavender / Marigold Light
Corner radius: 20pt
Content stack: 64pt illustration character at the top (centered), title "3-min Reset" in Apercu 17pt Medium Ink Brown, subtitle "Quick calm" in Apercu 13pt Regular Ink Brown @ 70%
16pt content inset all around
Tap: scale 0.98, haptic .impactOccurred(.soft)

Player Controls (in-meditation play screen)

Layout

Bottom of screen, below the breathing sphere
Horizontal row: skip-back 15s / play-pause (large) / skip-forward 15s — centered
Play/Pause: 72pt × 72pt circular, Marigold #FF6B35 background, white play.fill / pause.fill 28pt glyph centered
Skip buttons: 48pt × 48pt circular, Off-Cream #FBF1DA background, Ink Brown gobackward.15 / goforward.15 22pt glyph centered

Below the controls: a thin progress arc on the very top of the screen rendering the elapsed/total minutes. Sage #7E9F4B filled, Warm Gray #E8DFC9 track, 2pt stroke, rounded caps.

Buttons

Primary Pill CTA ("Start", "Continue", "Save")

Background: #FF6B35 Marigold
Text: #FFFFFF, Apercu 17pt Medium (NOT Bold — Headspace stays gentle)
Padding: 14pt vertical, 28pt horizontal
Corner radius: 28pt (full pill on a 56pt button)
Height: 56pt
Pressed: background #E55A2B, scale 0.98
Shadow: rgba(255,107,53,0.25) 0 6px 16px — a soft warm glow
Haptic: .impactOccurred(.soft) — Headspace's haptics are always soft, never heavy

Secondary Outline Button

Background: transparent
Border: 1.5pt #2E1A47 Ink Brown
Text: #2E1A47, Apercu 17pt Medium
Corner radius: 28pt full pill
Padding: 12pt vertical, 26pt horizontal

Soft Tag Pill (selected mood / category)

Background: #FFD25C Butter Yellow when selected; #FBF1DA when unselected
Text: #2E1A47 Apercu 13pt Semibold title-case
Padding: 6pt vertical, 14pt horizontal
Corner radius: 500pt full pill
Selected has a subtle 1pt darker inner glow

Text Link

"See all", "Tap to continue" — Apercu 13pt Semibold #FF6B35 Marigold, no underline
44pt hit target

Navigation

Bottom Tab Bar

Height: 56pt + safe area
Background: #FFF7E7 Butter Cream with 0.5pt #E8DFC9 top hairline; on Sleep mode, switches to #1A1430 Dusk
Tabs (5): Today / Meditate / Sleep / Move / Profile
Icon: 24pt SF Symbol — outlined inactive, filled active
Active color: Marigold #FF6B35 on Today/Meditate/Move/Profile; Sage #7E9F4B on Sleep (the only tab with its own tint)
Inactive: Ink Brown Mute #8E7DA5
Labels: Apercu 11pt Medium, mixed case
Tap haptic: .selectionChanged()

Top App Bar

Height: 56pt + safe area
Background: matches the screen — butter cream or sleep dusk
Title: Apercu 28pt Bold Ink Brown, left-aligned with 24pt inset
Right: profile avatar (28pt circle) + optional settings glyph at 22pt Ink Brown

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Breathing sphere shrinks to 200pt; greeting at 28pt
iPhone 13/14/15	390pt	Standard 234pt sphere, 32pt greeting
iPhone 15/16 Pro	393pt	Dynamic Island respected — top app bar sits below it
iPhone 15/16 Pro Max	430pt	Larger 260pt sphere, 36pt greeting
Apple Watch (companion)	184-220pt	Breathing sphere only, no other UI
iPad	768pt+	Library uses 3-col grid, meditation play screen centers the sphere in a 480pt frame

Dynamic Type

Greeting, screen titles, body, guidance copy: full scale
Meditation timer countdown (56pt): scales up to xLarge then clamps
Tab labels, tag pills, streak number, mood tag labels: FIXED (layout-sensitive)

Orientation

Portrait-locked everywhere — Headspace is a single-hand, single-orientation app
Sleep stories may allow landscape if user holds phone sideways while lying down (rare)

Touch Targets

Mood tag pill: 80pt × 88pt visual, full hit area
Play/Pause button: 72pt visual, 80pt hit area
Tab icons: 24pt visual, 56pt row hit area
Tag pill: 44pt height visible, full row hit

Safe Area Handling

Top: safe area honored — greeting starts at safe-area top + 16pt
Bottom: tab bar respects home indicator; play screen controls have 32pt clearance above home indicator
Sides: 24pt content inset

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-headspace {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #2a2046;
  --heading-color: #2a2046;
  --link-color: #d03700;
  --link-hover-color: #9d2a00;
  --border-color: #d9d7de;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(42,32,70,0.06);
  --card-hover-shadow: 0 6px 18px rgba(42,32,70,0.12);
  --header-bg: #2a2046;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #756e87;
  --button-bg: #ff6b35;
  --button-text-color: #000000;
  --button-hover-bg: #ff4602;
  --button-border: none;
  --button-border-radius: 24px;
  --button-secondary-bg: #f2f2f4;
  --button-secondary-text-color: #2a2046;
  --button-secondary-hover-bg: #e5e4e9;
  --button-secondary-border: 1px solid #d9d7de;
  --prompt-bg: #f4f4f6;
  --prompt-text-color: #2a2046;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 24px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

kyocera museum 76.3%
sanu 75.4%
clay 72.9%
ferrari 72.7%
gmail 72.5%

Where this came from

Source document: ios/design-md/fitness/headspace/DESIGN.md · 27.7 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.