# Headspace · Design system migration spec

> Source: https://www.headspace.com  ·  Curated by OpenDesign  ·  en

> Worth including as a benchmark for how consumer wellness brands use warm, playful design (illustrations, rounded shapes, friendly typography) to make mental health feel approachable and non-clinical.

## 1. Identity DNA

Headspace's design system is built like a welcoming room in a well-considered home—warm, uncluttered, and softly lit, designed to put a visitor at ease from the moment they step inside. The system translates the complex, often clinical world of mental health into a language of playful shapes, warm tones, and conversational type, making wellness feel like a friendly invitation rather than a daunting prescription.

**One-liner:** A warm, playful consumer wellness platform combining meditation, sleep, and therapy with friendly illustrations and approachable typography.
**Keywords:** mental health · meditation · therapy · wellness · accessible
**Analogy:** A friendly, approachable wellness companion that uses warm, inviting design to make mental health feel less intimidating and more accessible to everyone.

## 2. Color

The palette is grounded in a warm off-white base, #F9F4F2, which serves as a non-sterile canvas. Text hierarchy is established through deep charcoal tones, while high-chroma yellow (#FFCE00) and blue (#0061EF) are reserved as vibrant accents for calls to action and illustrative highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F4F2` | main background |
| `--ink` | `#2D2C2B` | body text |
| `--ink-soft` | `#4B4C4D` | secondary text |
| `--muted` | `#44433F` | placeholder |
| `--accent` | `#FFCE00` | single accent |
| `--line` | `rgba(75,76,77,0.3)` | divider |

**Color principle:** Warm off-white base with high-chroma yellow and orange accents paired with deep charcoal text for maximum readability and warmth.

The core principle is maximum readability and warmth, deliberately avoiding cold, clinical grays in favor of an inviting, sunlit atmosphere.

## 3. Typography

Typography employs a clean humanist sans-serif, selected for its approachable, organic qualities. Headlines are set bold and tight, using compact line-heights and negative letter-spacing to create a strong, friendly presence that contrasts with the relaxed, comfortable setting of the body text.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 700 | -1.2px | hero headline |
| h1 | 48px | 1.1 | 700 | -0.96px | section titles |
| h2 | 32px | 1.2 | 700 | -0.54px | card headings |
| body | 16px | 1.15 | 400 | 0 | body text |
| caption | 12px | 1.15 | 400 | 0 | labels and fine print |

**Type rules:**
- Use tight line-heights (1.0-1.2) for headlines to maintain compact, modern feel
- Use negative letter-spacing on larger text for tighter typographic presence
- Body text uses standard 16px base with slightly tighter leading than default

## 4. Spacing

Layout rhythm follows a consistent 4px base grid, with generous section gaps (48-64px) and comfortable inner padding that creates a breathable, uncluttered flow between content areas.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous section spacing (48-64px) and comfortable inner padding (24-32px) creating breathable layouts

## 5. Surfaces

Surfaces are defined by soft, low-contrast shadows rather than hard borders, contributing to a sense of gentle depth. The minimal use of borders keeps the interface feeling light and open, with any necessary divisions rendered in muted charcoal.

- **Radius:** sm 8px · md 16px · lg 32px · pill 999px
- **Shadows:**
  - 0px 1px 8px 0px rgba(20,19,19,0.2)
  - 0px 2px 0px 0px rgba(65,61,69,0.2)
- **Borders:** Minimal borders; cards use subtle shadows instead. When present, borders use 2px solid with muted charcoal tones.

## 6. Layout

The page skeleton begins with a centered, single-column hero section dominated by oversized display type and a key visual. This transitions into a two-column card layout for content discovery, followed by full-width scrolling banners and grid sections that maintain generous whitespace.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column hero with large typography, followed by two-column card layout, then full-width scrolling banner and grid sections

## 7. Motion & Interaction

Motion is minimal and purposeful, focused on confirming interaction rather than decoration. All changes—color shifts, transforms, opacity fades—use smooth 0.15-second transitions with a custom easing curve for a consistently polished feel.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.32, 0.94, 0.6, 1)`
- **Patterns:**
  - Color and background transitions on interactive elements
  - Transform transitions for hover states
  - Opacity fades for content reveals

- **Hover:** Subtle background-color and color shifts with 0.15s ease timing
- **Click:** Immediate visual feedback through transform and color changes
- **Transition:** Smooth 0.15s transitions on all interactive properties with custom cubic-bezier easing
- **Keyboard:** Standard focus management with pointer cursor on interactive elements

## 8. Voice & Don'ts

The editorial voice is warm, encouraging, and benefit-focused, speaking in direct, conversational phrases that lower the barrier to entry. It avoids clinical jargon, aggressive sales language, and somber messaging in favor of a psychologically safe tone.

- **Tone:** Warm, encouraging, and approachable without being clinical or preachy
- **Headline style:** Conversational, benefit-focused statements with large friendly type
- **CTA style:** Direct action phrases like 'Try for free', 'Check your coverage', and 'Try for $0' emphasizing low barrier to entry
- **Avoid:** Clinical or medical terminology / Aggressive sales language / Complex jargon / Dark or somber messaging

### Don'ts
- ❌ Don't use sharp, angular shapes — screenshot shows rounded corners (16-32px radius) on all cards and buttons
- ❌ Don't use cold blue-gray backgrounds — screenshot shows warm off-white (#F9F4F2) as primary background
- ❌ Don't use serif or decorative fonts — screenshot shows clean humanist sans-serif throughout
- ❌ Don't create dense, cramped layouts — screenshot shows generous whitespace (48-64px gaps) between sections
- ❌ Don't use harsh, saturated accent colors everywhere — screenshot limits high-chroma colors to specific CTAs and illustrations
- ❌ Don't use thin, subtle text weights for headlines — screenshot uses bold (700) weight consistently for all headings
- ❌ Don't avoid illustration — screenshot shows playful character illustrations and abstract shapes as core visual elements

The system deliberately excludes cold color schemes, sharp angles, dense layouts, and the omission of illustration in favor of plain UI.

## System Prompt (paste into AI tool)

```
Headspace is a consumer mental health app positioned as a friendly, accessible wellness companion. The design uses a warm off-white background (#F9F4F2) with charcoal text (#2D2C2B) and bright yellow (#FFCE00) and blue (#0061EF) accents. Typography is humanist sans-serif with bold, tight-set headlines and generous body text. Layouts are centered with large display type and playful illustration compositions. Critical don'ts: never use cold grays or blues as backgrounds, avoid clinical/medical visual language, don't create cramped or dense layouts, avoid thin font weights for headlines, don't skip illustrations in favor of plain UI, and never use aggressive or dark color schemes. The overall feel should be warm, inviting, and psychologically safe.
```