Headspace design system

What font does Headspace use?

Headspace’s website uses Headspace Apercu for headings and body text. Headspace Apercu is not on Google Fonts; the closest free match is Figtree.

Headspace colour palette

Headspace’s home page is light (#F9F4F2 background, #4B4C4D text) and uses #2D2C2B for its main actions. Its palette: #FFFFFF, #FFCE00, #F9F4F2, #2D2C2B, #0061EF, #00A4FF.

• #FFFFFF
  38.3% · backgrounds
• #FFCE00
  15.7% · backgrounds
• #F9F4F2
  11% · backgrounds
• #2D2C2B
  8.3% · text
• #0061EF
  8.1% · backgrounds
• #00A4FF
  6.2% · backgrounds
• #FFA1CC
  5.1% · backgrounds
• #000000
  2.5% · drawings
• #44423F
  2.3% · backgrounds, text, drawings
• #281466
  0.2% · drawings

Type scale

Each size the page sets text in, with its weight and line height. Headspace’s largest type is 72px at weight 700.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 44px, 48px, 56px.

Corner radii: 1px, 2px, 3px, 8px, 12px, 16px, 17px, pill. 4 shadow levels measured.

What makes Headspace look like Headspace

Colourful: only 63% of the page is neutral; #FFCE00 (15.7%) and #0061EF (8.1%) fill whole sections.

#281466 is an accent: 0.2% of the page, used for drawings only. Don't fill large areas with it.

#1A0C54 is an accent: 0.2% of the page, used for drawings only. Don't fill large areas with it.

The largest type (72px Headspace Apercu) is bold (700), tracked to -0.03em.

Headspace DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Headspace’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Headspace’s product, so use your own name, words and images.

Download Headspace DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Headspace’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");

:root {
  --color-background: #F9F4F2; /* Background */
  --color-surface: #FFFFFF; /* Surface */
  --color-text: #4B4C4D; /* Text */
  --color-text-muted: #63605D; /* Text muted */
  --color-border: #D2D5DE; /* Border */
  --color-action: #2D2C2B; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #0061EF; /* Link */
  --color-positive: #02873E; /* Positive */
  --color-warning: #FFCE00; /* Warning */
  --color-00a4ff: #00A4FF; /* 6.2% of the page, as fills */
  --color-ffa1cc: #FFA1CC; /* 5.1% of the page, as fills */
  --color-000000: #000000; /* 2.5% of the page, as drawings */
  --color-44423f: #44423F; /* 2.3% of the page, as fills */
  --font-body: "Headspace Apercu", "Figtree", sans-serif; /* Headspace Apercu on the site; Figtree renders */
  --type-display-1: 72px; /* Display 1, weight 700 */
  --type-display-1-leading: 72px;
  --type-display-1-tracking: -0.03em;
  --type-display-2: 64px; /* Display 2, weight 700 */
  --type-display-2-leading: 64px;
  --type-display-2-tracking: -0.03em;
  --type-display-3: 56px; /* Display 3, weight 700 */
  --type-display-3-leading: 61.6px;
  --type-display-3-tracking: -0.03em;
  --type-display-4: 52px; /* Display 4, weight 700 */
  --type-display-4-leading: 57.2px;
  --type-display-4-tracking: -0.03em;
  --type-display-5: 48px; /* Display 5, weight 700 */
  --type-display-5-leading: 48px;
  --type-display-5-tracking: -0.03em;
  --type-display-6: 40px; /* Display 6, weight 700 */
  --type-display-6-leading: 46px;
  --type-display-6-tracking: -0.03em;
  --type-headline-large: 32px; /* Headline Large, weight 700 */
  --type-headline-large-leading: 38.4px;
  --type-headline-large-tracking: -0.03em;
  --type-headline-small: 24px; /* Headline Small, weight 400 */
  --type-headline-small-leading: 31.2px;
  --type-title-large: 20px; /* Title Large, weight 400 */
  --type-title-large-leading: 30px;
  --type-title-large-tracking: -0.01em;
  --type-title-small: 18px; /* Title Small, weight 700 */
  --type-title-small-leading: 21.6px;
  --type-title-small-tracking: -0.03em;
  --type-body: 16px; /* Body, weight 400 */
  --type-body-leading: 24px;
  --type-label-large: 13.01px; /* Label Large, weight 400 */
  --type-label-large-leading: 19.512px;
  --type-label-small: 12px; /* Label Small, weight 500 */
  --type-label-small-leading: 13.8px;
  --type-label-small-tracking: -0.01em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

How this was measured

PikSpec’s scanner read the headspace.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Headspace is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Headspace.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.