---
title: "Headspace design system"
variant: extended
source: https://www.headspace.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/headspace-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Headspace · Design System

> Bright, calm wellness with a playful human touch

**Theme:** light · **Industry:** health · **Source:** https://www.headspace.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Headspace pairs a spacious white canvas and bold, rounded typography with vivid colour and friendly illustrations. The homepage guides visitors through meditation, therapy, member stories, and practical next steps using clear, approachable cards and calls to action.

## North star

Keep the page calm and legible with generous white space, then use rounded, saturated colour and friendly imagery to make each next step feel inviting.

## Overview

The page balances a predominantly white canvas with warm off-white panels, giving the content a calm foundation while making vivid blue and yellow section bands feel energetic rather than overwhelming. Headspace Apercu is used throughout: heavy, closely tracked headlines create clear focal points, while readable regular-weight text keeps benefits and navigation approachable. Large centered headings and generous whitespace distinguish the major sections, with compact horizontal navigation, pill-shaped topic controls, rounded cards, and a dense footer providing contrast in rhythm. The hero places concise proof points above two large service cards, where app imagery and therapy photography make the offerings tangible. Later sections alternate product-oriented content, logo and partner imagery, a bright library gallery, and a blue photographic statistics panel. Colourful character illustrations add personality; their colours are expressive content accents, not a replacement for the restrained white, ink, blue, and yellow interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, light card areas, and occasional reversed text on saturated buttons or footer details. |
| Warm Ink | `#2d2c2b` | `--color-warm-ink` | neutral | Main headlines, body copy, navigation, and dark pill controls. |
| Headspace Blue | `#0061ef` | `--color-headspace-blue` | brand | Primary try-free and login buttons, key links, and the prominent employer section. |
| Sunshine Yellow | `#ffce00` | `--color-sunshine-yellow` | brand | Large feature and closing CTA bands; also appears in colorful product illustrations. |
| Soft Divider | `#e2ded9` | `--color-soft-divider` | neutral | Subtle borders and hairlines separating controls and content. |
| Quiet Charcoal | `#44423f` | `--color-quiet-charcoal` | neutral | Secondary text and footer copy against light surfaces. |
| Warm Porcelain | `#f9f4f2` | `--color-warm-porcelain` | surface | Rounded hero service cards, small badges, and softly contrasting content panels. |
| Clear Sky | `#00a4ff` | `--color-clear-sky` | accent | Bright section and illustration accent, most visible in the blue photographic campaign panel. |
| Stone Edge | `#c6c1b9` | `--color-stone-edge` | neutral | Secondary measured border tone; keep it to quiet outlines rather than prominent surfaces. |
| Soft Pop | `#ffa1cc` | `--color-soft-pop` | accent | Announcement strip and occasional library or campaign artwork accent. |
| Deep Violet | `#3b197f` | `--color-deep-violet` | accent | Illustrated content colour, notably artwork and library cards rather than core interface chrome. |
| Garden Green | `#02873e` | `--color-garden-green` | accent | Small illustration and category accent; use selectively within content artwork. |
| Muted Graphite | `#63605d` | `--color-muted-graphite` | neutral | Low-emphasis text details and supporting copy. |
| True Black | `#000000` | `--color-true-black` | semantic | Occasional measured text colour; the page’s primary text is the warmer #2d2c2b. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f4f2` (Warm Porcelain) · `--color-text` → `#2d2c2b` (Warm Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#44423f` (Quiet Charcoal) · `--color-border` → `#e2ded9` (Soft Divider) · `--color-accent` → `#0061ef` (Headspace Blue) · `--color-accent-2` → `#ffce00` (Sunshine Yellow) · `--color-accent-3` → `#00a4ff` (Clear Sky) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d2c2b` | `#ffffff` | 13.94:1 | AAA |
| `#2d2c2b` | `#f9f4f2` | 12.78:1 | AAA |
| `#ffffff` | `#f9f4f2` | 1.09:1 | fail |
| `#44423f` | `#ffffff` | 10.02:1 | AAA |
| `#44423f` | `#f9f4f2` | 9.18:1 | AAA |
| `#0061ef` | `#ffffff` | 5.31:1 | AA |
| `#0061ef` | `#f9f4f2` | 4.87:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Headspace Apercu | `--font-body` | webfont | 400, 500, 700 | All page typography, from display headlines and body copy to navigation, buttons, and footer links. | DM Sans |

- **Headspace Apercu:** Use bold, tightly tracked sentence-case headlines; regular-weight body and navigation stay open and readable.

### Type scale — Major Third (ratio ≈ 1.262, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1 | -0.03em | — | Headspace Apercu | Large campaign or section display headings. |
| h1 | 52px | 700 | 1.1 | -0.03em | — | Headspace Apercu | Primary page headline and major hero titles. |
| h2 | 48px | 700 | 1 | -0.03em | — | Headspace Apercu | Centered section headings and prominent feature titles. |
| h3 | 40px | 700 | 1.15 | -0.03em | — | Headspace Apercu | Subsection headings and content-card titles. |
| h4 | 32px | 700 | 1.2 | -0.03em | — | Headspace Apercu | Smaller feature and supporting panel headings. |
| body | 20px | 400 | 1.5 | -0.01em | — | Headspace Apercu | Explanatory copy, benefit descriptions, and introductory text. |
| caption | 16px | 400 | 1.5 | 0 | — | Headspace Apercu | Badges, eligibility notes, and compact supporting labels. |
| button | 18px | 700 | 1.2 | -0.03em | — | Headspace Apercu | Primary and secondary call-to-action labels. |
| nav | 16px | 400 | 1.15 | 0 | — | Headspace Apercu | Header navigation and footer category links. |
| link | 20px | 400 | 1.5 | -0.01em | — | Headspace Apercu | Inline informational links and text actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 19, 20, 24, 32, 48, 56, 64 px.
- Section rhythm 48px · element gap 8px · card padding 20px · max content width 1344px.

Use a centered, responsive content frame with a measured maximum width of 1344px. The header is a compact horizontal bar beneath a full-width announcement strip; the hero centers its headline and proof points above a two-card service layout. Follow with centered topic controls, product-feature panels, testimonials, partner content, library cards, statistics, FAQ, CTA, and footer. Preserve the measured 48px section rhythm and 8px element rhythm where applicable, with comfortable density, broad whitespace, and occasional full-bleed or wide colour bands.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `24px` · badge `9999px` · nav `50%` · link `16px` · xs `8px` · sm `12px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `hairline` (button): `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`
- Shadow `sm` (link): `rgba(20, 19, 19, 0.2) 0px 3.23px 6.45px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.32, 0.94, 0.6, 1)` on interactive elements.

The design is mostly flat, relying on whitespace, surface contrast, and rounded card shapes rather than layered shadows. Use the measured subtle button shadow for a slight pressed-control lift and a restrained shadow on selected links. Hairline borders remain quiet; avoid heavy outlines or dramatic depth.

## Imagery

Mix app and phone mockups, candid therapy imagery, partner logos, and cheerful character illustrations. Keep photos framed within rounded cards or campaign panels; use bright illustrations as expressive accents around product content. Some imagery contributes its own vivid colours, so keep surrounding interface areas quiet and avoid treating artwork colours as global chrome.

## Components

### Announcement bar

A narrow, full-width soft-pink strip above the header, with centered underlined announcement text.

### Primary CTA

Blue #0061ef pill with white bold text and a subtle measured hairline shadow; use for actions such as “Try for free”.

### Hero service cards

Warm Porcelain #f9f4f2 panels with 24px measured card radius, bold centered titles, dark pill actions, and app or therapy imagery.

### Topic selector

A centered heading followed by a compact grid of rounded category controls with simple icons and short labels.

### Feature carousel

Wide, vividly coloured product panels pair a short feature explanation with a character illustration or app conversation preview.

### Library cards

A horizontal gallery of colourful illustrated content cards with small badges, clear titles, and supporting descriptions.

### FAQ rows

A restrained vertical question list with thin light dividers and a right-aligned expand affordance.

### Footer signup

Warm light surface containing a short newsletter pitch, email field, dark subscribe button, and multi-column link groups.

### Measured component styles

- **Primary button** (“Try for free”): background #0061ef · text #ffffff · border 2px solid · radius 32px · padding 14.3px 24px · 700 14px Headspace Apercu · shadow rgba(65, 61, 69, 0.2) 0px 2px 0px 0px
- **Secondary button** (“Guided meditations”): background #f9f4f2 · text #2d2c2b · radius 24px · padding 0px 24px · 700 18px Headspace Apercu
- **Link** (“Trending Meet Ebb Get personalized conte”): transparent background · text #0000ee · radius 16px · padding 0px · 400 16px Headspace Apercu
- **Input**: background #ffffff · text #000000 · border 1px solid #d2d5de · radius 8px · padding 24px 16px 8px 16px · 400 16px Headspace Apercu
- **Card** (“Mental health app with expert-led medita”): background #f9f4f2 · text #4b4c4d · radius 24px · padding 30px 25px 0px 25px · 400 16px Headspace Apercu
- **Badge** (“Trending”): background #f9f4f2 · text #0061ef · radius 800px · padding 3.5px 8px · 700 14px Headspace Apercu
- **Navigation item** (“For You”): transparent background · text #2d2c2b · radius 0px · padding 0px · 400 16px Headspace Apercu

## Do

- Keep the white canvas dominant and section backgrounds calm.
- Use #0061ef for prominent conversion actions.
- Reserve #ffce00 for bold feature or CTA moments.
- Set major headlines in bold, closely tracked sentence case.
- Use rounded cards and pill-shaped action controls.
- Pair product content with friendly, purposeful imagery.

## Don't

- Do not turn every section into a saturated colour block.
- Do not use sharp, angular card treatments.
- Do not replace warm ink text with pure black by default.
- Do not crowd the hero with competing messages.
- Do not apply illustration colours as the global interface palette.
- Do not add heavy borders or dramatic shadows.

## Agent prompt

Build a responsive mental wellness homepage in the Headspace visual style. Use Gallery White (#ffffff) as the main canvas, Warm Ink (#2d2c2b) for primary text, and Warm Porcelain (#f9f4f2) for softly rounded service cards. Make #0061ef the clear primary-action colour, reserving Sunshine Yellow (#ffce00) and Clear Sky (#00a4ff) for distinct feature or campaign panels. Set all type in Headspace Apercu, or DM Sans if unavailable, with bold tightly tracked headlines and readable regular body text. Structure the page as a centered hero, service cards, topic selector, product features, social proof, partner content, library gallery, statistics, FAQ, CTA, and multi-column footer. Use generous whitespace, friendly illustrations, real-looking product and therapy imagery, pill buttons, subtle borders, and restrained shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Full-width announcement above a compact header; centered promotional link. | announcement link | soft pink band, underlined text, horizontal navigation |
| 2 | hero | Centered proof points above two wide, side-by-side rounded service cards. | try-free action, check-coverage action | warm off-white cards, pill buttons, phone and app imagery |
| 3 | category-nav | Centered heading above a three-column, two-row topic selector. | topic selection | rounded category controls, small illustrative icons |
| 4 | feature-grid | Centered product heading, horizontal feature tabs, and wide carousel-style panels. | feature tab selection, carousel pagination, chat action | bright colour panel, character artwork, rounded controls |
| 5 | testimonials | A centered heading introduces a broad, lightly populated testimonial area. | social proof | centered headline, spacious white background |
| 6 | integrations | Wide blue feature panel with partner logos across the top and copy beside imagery. | request-demo action, learn-more action | blue panel, logo cloud, photo collage |
| 7 | gallery | Horizontal content gallery with category controls and a row of illustrated cards. | category filtering, view-all link, horizontal browse | yellow marquee band, colourful cards, small badges |
| 8 | stats | Full-width rounded blue photographic panel with centered headline and metrics. | try-free action, trust signals | soft blue imagery, star rating, large numeric stats |
| 9 | faq | Narrow, centered question list beneath the statistics panel. | expandable questions | thin row dividers, right-aligned plus icons |
| 10 | cta | Large yellow full-width band with a centered blue pill action. | prominent conversion action | wave-like section edge, yellow field, blue button |
| 11 | footer | Warm light footer with signup content above several columns of categorized links. | email subscription, footer navigation | email input, dark subscribe pill, multi-column link lists |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/headspace-com