Headspace Mobile — design system & UI screens

Health & Fitness · 6 screens · headspace.com

Browse sleep and meditation content including guided storytelling, breathing exercises, calming music, and bedtime tools for kids and parents. The screen uses a card-based layout with category cards stacked vertically, each featuring descriptive text and illustrative artwork, with a bottom tab navigation for switching between Today, Explore, and Profile sections.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/headspace-mobile.

Decoded design system

Headspace Mobile's decoded design system: background #FFFFFF, text #00001F, accent #FFB700, link #FFB700, primary #FFB700; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #FFB700 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#EFEFF1`
border	`#D8D8DD`
text	`#00001F`
text_muted	`#606074`
primary	`#FFB700`
accent	`#FFB700`
link	`#FFB700`
button_bg	`#FFB700`
button_text	`#FFFFFF`

Using these colors

Action color #FFB700 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #FFB700 — one role, not several (the action color).
accent #FFB700 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

h1: 34px
h2: 22px
body: 17px

Spacing

base unit: 8px
scale: 4px, 8px, 10px, 12px, 16px, 19px, 20px, 24px, 32px, 48px

Radii

base: 12px
button: 12px

Shadows (elevation)

subtle: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px
card: rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.32, 0.94, 0.6, 1).

durations: 150ms · 300ms · 400ms
easings: cubic-bezier(0.32, 0.94, 0.6, 1) · ease
animated properties: background-color, transform, color, border-color

Button states (measured)

primary hover: background #0040EA
primary focus: background #0040EA · outline 2px solid rgb(0, 64, 234)

Layout (measured)

container max-width: 1440px
nav: 80px

Motion choreography (measured)

Load order: div.css-ql5950×2 → div.css-c9r2uv → div.css-1ugswzl×2 → span.ot-sdk-show-settings → span.ot-sdk-show-settings → span.ot-sdk-show-settings

Scroll reveal: 24 elements rest at opacity 0, animate in over 500ms.

Stagger: div ×7 — 500ms apart.

Responsive (measured)

mobile (390px): nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →