---
name: Headspace
description: "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."
version: alpha

colors:
  background: "#F9F4F2"
  primary: "#2D2C2B"
  secondary: "#4B4C4D"
  tertiary: "#FFCE00"
  neutral: "#44433F"
  line: "rgba(75,76,77,0.3)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-1.2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.96px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.54px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 8px
  md: 16px
  lg: 32px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A warm, playful consumer wellness platform combining meditation, sleep, and therapy with friendly illustrations and approachable typography.

*A friendly, approachable wellness companion that uses warm, inviting design to make mental health feel less intimidating and more accessible to everyone.*

## Colors

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

- **Background (`#F9F4F2`)** — uses `bg` token
- **Primary text (`#2D2C2B`)** — uses `ink` token
- **Secondary text (`#4B4C4D`)** — uses `ink-soft` token
- **Accent (`#FFCE00`)** — uses `accent` token
- **Muted (`#44433F`)** — uses `muted` token
- **Borders (`rgba(75,76,77,0.3)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Consistent 4px base grid with generous section spacing (48-64px) and comfortable inner padding (24-32px) creating breathable layouts

## Elevation & Depth

- 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.

## Shapes

- `sm`: 8px
- `md`: 16px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with generous padding (16-24px). Primary: bright blue (#0061EF) with white text. Secondary: dark charcoal (#2D2C2B) with white text. High border-radius (32px+).
- **card:** Large rounded cards (16-32px radius) with soft off-white background, subtle shadow, containing mixed media (illustrations, photos, UI mockups) in playful compositions.
- **chip:** Pill-shaped filter chips with rounded borders, light background, and small emoji icons. Active state uses darker fill.
- **input:** Form inputs implied through clean, minimal styling consistent with the overall restrained aesthetic.
- **hero:** Full-width centered layout with oversized display type (56px+), supporting checkmark list, and large illustration/card showcase below.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```