<!-- Generated by ExtractVibe — https://extractvibe.com/brand/headspace.com -->
<!-- Extracted: 2026-05-03T16:55:28.649Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Headspace"
description: "Headspace projects a calm, scientifically grounded, and accessible presence that demystifies meditation through simple, imperative language. The design is clean and uncluttered, utilizing a soft color palette and rounded geometry to create a sense of safety and ease without feeling clinical or overly corporate."
colors:
  primary: "#0061ef"
  neutral: "#2d2c2b"
  surface: "#ffffff"
  on-surface: "#4b4c4d"
  on-surface-secondary: "#2d2c2b"
  link: "#2d2c2b"
typography:
  headline-lg:
    fontFamily: "Headspace Apercu"
    fontSize: "52px"
    fontWeight: "700"
    lineHeight: "57.2px"
    letterSpacing: "-1.56px"
  headline-md:
    fontFamily: "Headspace Apercu"
    fontSize: "40px"
    fontWeight: "700"
    lineHeight: "46px"
    letterSpacing: "-1.2px"
  headline-sm:
    fontFamily: "Headspace Apercu"
    fontSize: "24px"
    fontWeight: "700"
    lineHeight: "32px"
    letterSpacing: "-0.6px"
  body-md:
    fontFamily: "Headspace Apercu"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
rounded:
  sm: "24px"
  lg: "32px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#2d2c2b"
    rounded: "32px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "2px"
  button-primary:
    backgroundColor: "#0061ef"
    textColor: "#ffffff"
    rounded: "32px"
    padding: "14.3px 24px"
    fontSize: "14px"
    fontWeight: "700"
    borderWidth: "2px"
    boxShadow: "rgba(65, 61, 69, 0.2) 0px 2px 0px 0px"
  button-secondary:
    backgroundColor: "#f9f4f2"
    textColor: "#2d2c2b"
    rounded: "24px"
    padding: "0px 24px"
    fontSize: "18px"
    fontWeight: "700"
    borderColor: "#2d2c2b"
---

# Headspace — Design System

## Overview

Headspace design embodies the archetypes of The Sage and The Caregiver, manifesting a calm, scientifically grounded, and accessible presence. It demystifies complex concepts through a clean, uncluttered aesthetic, reminiscent of the clarity found in Notion and the user-friendly approach of Airbnb. The design prioritizes safety and ease, employing rounded geometry and a soft color palette to create an environment that is both comforting and trustworthy. This approach directly contrasts with overly clinical or corporate aesthetics, ensuring the user experience remains approachable and human-centric. 

Headspace design is not loud, aggressive, or overtly playful. It avoids sharp angles, high-contrast palettes, and complex visual metaphors. Instead, it leverages simplicity and intentionality to convey its core message. The visual language is direct and imperative, guiding users with gentle authority rather than overwhelming them. This aligns with the brand's commitment to demystifying meditation, making it accessible to a broad audience without sacrificing its scientific integrity. The design fosters a sense of peace and clarity, mirroring the mental state it aims to cultivate in its users.

**Key characteristics:**

- Vibe — calm, scientific, accessible, rounded, minimal, trustworthy
- Archetypes — The Sage, The Caregiver
- Comparable to — Calm, Duolingo, Notion, Airbnb
- Design era — contemporary-minimal
- Emotional tone — soothing-reassuring
- Target audience — Busy professionals and individuals seeking accessible, science-backed mental health tools who value simplicity and clarity over complex jargon.
- Visual energy — 3/10 (calm/understated)

## Colors

The Headspace color palette is intentionally soft and inviting, anchored by the primary color #0061ef. This choice signals trustworthiness and clarity, aligning with the brand's scientific and accessible ethos. The predominant use of #ffffff as the surface color reinforces minimalism and provides a clean canvas, preventing visual clutter. The overall color philosophy prioritizes calm and ease, ensuring the visual experience is never jarring or overstimulating, thus supporting the brand's Caregiver archetype.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0061ef` | Royal Blue |
| background | `#ffffff` | White |
| text | `#4b4c4d` | Dark Gray |
| secondary text | `#2d2c2b` | Charcoal |
| link | `#2d2c2b` | Charcoal |
| muted | `#2d2c2b` | Charcoal |

## Typography

Headspace utilizes Headspace Apercu for all textual elements. This font choice communicates a friendly yet authoritative tone, balancing accessibility with scientific grounding. The typographic hierarchy is clear and direct, employing varied weights and sizes to guide the user's attention without resorting to overly ornate or complex structures. This approach reinforces the brand's Sage archetype, delivering information with precision and clarity while maintaining an approachable and calm demeanor, consistent with the minimal and trustworthy brand vibe.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Headspace Apercu | body | self-hosted | 400, 500, 700 |
| Headspace Apercu | heading | self-hosted | 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Headspace Apercu | 52px | 700 | 57.2px | -1.56px |
| Heading 3 | Headspace Apercu | 40px | 700 | 46px | -1.2px |
| Heading 4 | Headspace Apercu | 24px | 700 | 32px | -0.6px |
| Body | Headspace Apercu | 16px | 400 | 18.4px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 18.4px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| button | `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px` |

## Shapes

Border-radius scale:

- `sm` — 24px
- `lg` — 32px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#2d2c2b`
- Radius — `32px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Sample copy — "Log in"

**Primary**

- Background — `#0061ef`
- Text — `#ffffff`
- Radius — `32px`
- Padding — `14.3px 24px`
- Font size — `14px`
- Font weight — `700`
- Shadow — `rgba(65, 61, 69, 0.2) 0px 2px 0px 0px`
- Sample copy — "Try for free"

**Secondary**

- Background — `#f9f4f2`
- Text — `#2d2c2b`
- Radius — `24px`
- Padding — `0px 24px`
- Font size — `18px`
- Font weight — `700`
- Border — ` solid #2d2c2b`
- Sample copy — "Guided meditations"

## Do's and Don'ts

### Do

- Use the custom 'Headspace Apercu' font family for all text; apply weight 700 for headings and 400/500 for body copy.
- Format all headings in sentence-case (e.g., 'Take a Global Deep Breath') and maintain body line-height at 18.4px for readability.
- Style primary CTA buttons with background #0061ef, white text (#ffffff), 32px border-radius, and a subtle bottom shadow: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px.
- Style secondary buttons with background #f9f4f2, text #2d2c2b, 24px border-radius, and a solid border of #2d2c2b.
- Use the primary brand color #0061ef for key interactive elements and links, set against a pure white (#ffffff) background.
- Keep copy simple and jargon-light; use action-oriented imperative verbs (e.g., 'Try for free', 'Log in') and avoid exclamations or emojis.
- Apply a base spacing unit of 2px for consistent padding and margins, ensuring a clean, uncluttered layout.
- Use text color #4b4c4d for body copy and #2d2c2b for button text to ensure high contrast without using pure black.

### Don't

- Do not use title case for headings; strictly adhere to sentence-case conventions.
- Avoid using gradients; the design relies on flat colors and subtle shadows for depth.
- Do not use serif fonts; the brand is strictly sans-serif using Headspace Apercu.
- Avoid sharp corners (0px or 4px radius); all interactive elements and cards should use significant rounding (24px-32px).
- Do not use emojis or excessive punctuation (exclamations) in marketing copy or UI labels.
- Avoid using pure black (#000000) for text; use #4b4c4d or #2d2c2b to maintain a softer, more approachable feel.
- Do not use multi-layered or complex shadows; keep shadows subtle and single-layered, specifically the 2px offset shadow on primary buttons.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — some
- CTA style — action-oriented imperative verbs
- Rhetorical devices — metaphor, imperative mood

### Sample copy

> Live a healthier, happier, more well-rested life in just a few minutes a day.

> Take a Global Deep Breath on May 13th

> Get the science-backed mental health app for every moment.

> Try for free.

> Sleepy hygiene

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/headspace.com) | 100% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/headspace.com/logo-2.svg) | 80% |
| wordmark | — | svg | [link](https://extractvibe.com/api/assets/brands/headspace.com/logo-1.svg) | 80% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/headspace.com/logo-0.ico) | 62% |

## Sources

- Live brand page — https://extractvibe.com/brand/headspace.com
- Raw JSON — https://extractvibe.com/api/brand/headspace.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/headspace.com/design.md
- Extracted — 2026-05-03T16:55:28.649Z
- Generator — ExtractVibe vv1
- Quality score — 90/100