--- version: alpha name: "headspace.com" description: "Design system extracted from https://www.headspace.com/ on 2026-10-28" colors: background: "#ffffff" foreground: "#2d2c2b" muted-foreground: "#63605d" primary: "#0061ef" on-primary: "#ffffff" secondary: "#ffce00" border: "#e2ded9" typography: headline-display: fontFamily: "Headspace Apercu" fontSize: "52px" fontWeight: 700 lineHeight: "57.2px" letterSpacing: "-1.56px" headline-lg: fontFamily: "Headspace Apercu" fontSize: "64px" fontWeight: 700 lineHeight: "64px" letterSpacing: "-1.92px" headline-md: fontFamily: "Headspace Apercu" fontSize: "40px" fontWeight: 700 lineHeight: "46px" letterSpacing: "-1.2px" body-md: fontFamily: "Headspace Apercu" fontSize: "20px" fontWeight: 400 lineHeight: "30px" letterSpacing: "-0.2px" label-md: fontFamily: "Headspace Apercu" fontSize: "14px" fontWeight: 500 lineHeight: "18px" letterSpacing: "-0.14px" button: fontFamily: "Headspace Apercu" fontSize: "18px" fontWeight: 700 lineHeight: "21.6px" letterSpacing: "-0.54px" rounded: none: "0px" 2xl: "32px" md: "8px" xl: "16px" full: "9999px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "20px" 6: "24px" 7: "32px" 8: "48px" 9: "64px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "32px" height: "48px" padding: "14.3px 24px" button-secondary: backgroundColor: "#2d2c2b" textColor: "#ffffff" typography: "{typography.button}" rounded: "32px" height: "48px" padding: "14px 20px" input: backgroundColor: "#ffffff" rounded: "8px" height: "58px" card: backgroundColor: "#0061ef" rounded: "0px" padding: "56px" --- # headspace.com ## Overview Mental Health App for Meditation & Sleep - Headspace: Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Try for free. Soft, well-rounded controls, layered shadows for depth, confident display type at 52px / 700, a single blue accent on neutrals. The site ships in light mode by default. Measured from 3573 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("Stress less"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("Stress less"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("Stress less"), focus - `screenshots/c-toggle-button-1--rest.png`: Toggle / segmented control 1, rest - `screenshots/c-text-input-1--rest.png`: Text input 1, rest - `screenshots/c-text-input-1--focus.png`: Text input 1, focus - `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled - `screenshots/c-text-input-1--filled.png`: Text input 1, filled - `screenshots/c-text-input-1--invalid.png`: Text input 1, invalid - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("For You"), rest - `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("For You"), hover - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("For You"), focus - `screenshots/c-card-1--rest.png`: Card 1 ("I appreciate the consist"), rest - `screenshots/c-stat-1--rest.png`: Stat / metric 1 ("8M+Downloads"), rest - `screenshots/c-list-1--rest.png`: Styled list 1 ("What is Headspace?Headsp"), rest - `screenshots/c-list-item-1--rest.png`: List row / menu row 1 ("What is Headspace?Headsp"), rest - `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("What is Headspace?Headsp"), rest - `screenshots/c-accordion-1--open.png`: Accordion / disclosure 1 ("What is Headspace?Headsp"), open - `screenshots/c-blockquote-1--rest.png`: Blockquote 1 ("I appreciate the consist"), rest - `screenshots/c-icon-1--rest.png`: Icon 1, rest - `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("Email addressSubscribe"), rest - `screenshots/c-button-2--rest.png`: Button 2 ("Guided meditations"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Guided meditations"), hover - `screenshots/c-button-2--focus.png`: Button 2 ("Guided meditations"), focus - `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest - `screenshots/c-icon-button-2--hover.png`: Icon button 2, hover - `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus - `screenshots/c-icon-button-2--active.png`: Icon button 2, active - `screenshots/c-icon-button-2--disabled.png`: Icon button 2, disabled - `screenshots/c-link-2--rest.png`: Text link 2 ("TrendingMeet EbbGet pers"), rest - `screenshots/c-link-2--focus.png`: Text link 2 ("TrendingMeet EbbGet pers"), focus - `screenshots/c-link-2--active.png`: Text link 2 ("TrendingMeet EbbGet pers"), active ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | foreground | `#2d2c2b` | Primary text | | muted-foreground | `#63605d` | Secondary text, captions | | primary | `#0061ef` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | secondary | `#ffce00` | Secondary accent (yellow) | | border | `#e2ded9` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#ffffff`, `#ffce00`, `#0061ef`, `#00a4ff`, `#ffa1cc`, `#3b197f`, `#02873e`, `#44423f`. The accent `#0061ef` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **Headspace Apercu** for h2, h3, body, label, button: self-hosted webfont; verify availability and permission; **Figtree** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | Headspace Apercu | 52px | 700 | 57.2px | -1.56px | | headline-lg | Headspace Apercu | 64px | 700 | 64px | -1.92px | | headline-md | Headspace Apercu | 40px | 700 | 46px | -1.2px | | body-md | Headspace Apercu | 20px | 400 | 30px | -0.2px | | label-md | Headspace Apercu | 14px | 500 | 18px | -0.14px | | button | Headspace Apercu | 18px | 700 | 21.6px | -0.54px | - headline-display: inferred-role (source h2); inferred fields: role mapping only. Type scale in use: 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 64px, 72px. Base body size 20px. The hero heading (h2, role inferred) renders at 52px / 700, center aligned, up to 420px wide, tracking -1.56px. Sample: "all with Headspace". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 48, 64 (px). - Flex and grid gaps: 4, 8, 12, 16, 20, 24, 28, 32 px. - Content max width: 1344px, centred. - Breakpoints: 550px, 768px, 896px, 1024px, 1440px. - Header: 80px tall, static, background `rgb(255, 255, 255)`; 12 nav links at 16px / 400 (For You · Meditation · Online therapy · Mindfulness · Sleep · Mental health coaching · Ebb AI companion · Anxiety). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px` - shadow-2: `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px` ## Shapes - Buttons: 32px - Inputs: 8px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, 2xl 32px, md 8px, xl 16px, full 9999px ## Components ### Button, primary Background `#0061ef`, text `#ffffff`, border 2px solid transparent, radius 32px, height 48px, padding 14.3px 24px, 14px / 700, shadow `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`. Sample label: "Try for free". ### Button, secondary Background `#2d2c2b`, text `#ffffff`, border 2px solid transparent, radius 32px, height 48px, padding 14px 20px, 16px / 700. Sample label: "Try for $0". ### Input Height 58px, background `#ffffff`, border 1px solid #d2d5de, radius 8px, 16px text, padding 24px 16px. ### Card Background `#0061ef`, border 2px solid transparent, radius 112px, padding 56px, shadow `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px`. Typical size about 750×188px. ### Link Colour `#2d2c2b`, no underline at rest, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (20 of 87 in the checklist, 37 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 18 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | secondary-icon-right lg, secondary, secondary-with-icon, ink, primary, ink, secondary, secondary | hover, focus | "Stress less" | | Icon button | outline, outline, outline | hover, focus, active, disabled | | | Toggle / segmented control | secondary | rest only | | | Text link | underlined, plain-accent, plain, plain | focus, active | "meditation" | | Text input | outlined | focus, disabled, filled, invalid | | | Field label | other | rest only | "Email address" | | Navigation link | plain | hover, focus | "For You" | | Footer link | plain | rest only | "Try 14-days free" | | Card | filled, filled-with-media | rest only | "I appreciate the consistent re" | | Stat / metric | default | rest only | "8M+Downloads" | | Styled list | default, default | rest only | "What is Headspace?Headspace is" | | List row / menu row | filled | rest only | "What is Headspace?Headspace is" | | Accordion / disclosure | details | open | "What is Headspace?Headspace is" | | Blockquote | default | rest only | "I appreciate the consistent re" | | Image / figure | aspect-0.73, aspect-1, aspect-2.02 | rest only | | | Icon | outline-16px, filled-18px | rest only | | | Newsletter / signup form | default | rest only | "Email addressSubscribe" | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Table, Table row, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Video / media embed, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Hero, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1344px | 0px | 16px | 52px, 1 line, center (h2 mapped to hero) | 80px, 9 links, 1 CTA | text only | 2→1 col; 2→2 col; 2→1 col | content-width | | laptop 1024px | 928px | 0px | 16px | 40px, 1 line, center (h2 mapped to hero) | 80px, 9 links, 1 CTA | text only | 2→1 col; 2→2 col; 2→1 col | content-width | | tablet 768px | 672px | 0px | 16px | 40px, 1 line, center (h2 mapped to hero) | 80px, hamburger (icon), 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width | | phone 390px | 342px | 0px | 16px | 36px, 1 line, center (h2 mapped to hero) | 64px, hamburger (icon), 1 CTA | text only | 2→1 col; 2→1 col; 6→1 col | content-width | - H1 goes 52px → 36px (69%), 1 → 1 lines. - Nav collapses to a hamburger by 390px (first seen at 768px); header 80px → 64px. - Card grids: 3 columns → 1 column on phones (gap 20px → 12px). - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 0px. - Section top padding 24px → 24px. ## Interaction & Motion 178 elements carry transitions; typical 0.15s with cubic-bezier(0.32, 0.94, 0.6, 1), mostly on background-color, transform, color. 1 running keyframe animations (onetrust-fade-in 0.4s 1). - Hover on button-primary ("Try for free"): background #0061ef → #0040ea; cursor pointer; transition color, background-color, border-color, box-shadow, transform | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1) | delay 0s, 0s, 0s, 0s, 0s. - Hover on button-secondary ("Try for $0"): background #2d2c2b → #141313; cursor pointer; transition color, background-color, border-color, box-shadow, transform | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1), cubic-bezier(0.32, 0.94, 0.6, 1) | delay 0s, 0s, 0s, 0s, 0s. - Hover on nav-link ("For You"): no visible change; cursor pointer. - Hover on body-link ("HSA/FSA eligible: save with pre-tax doll"): no visible change; cursor pointer. - Focus on button-primary: outline 2px solid rgb(0, 64, 234), offset 1px. - Focus on body-link: outline 1px auto rgb(16, 16, 16), offset 1px. - Tooltip triggers exist (2 × aria-describedby, 2 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip. - Hover/click menus: below the trigger, 18px gap, shifted left; transparent, radius 0px, padding 0px 0px, shadow none; appears after a delay; stays open after the pointer leaves (click-away or hover-intent grace). - 44 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe). Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#0061ef` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 20px in Headspace Apercu. - Do match corner radii per element class (buttons 32px, cards 0px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from browser-default; large surface colors remain in the palette.