What font does Headspace use?

Headspace’s website uses one typeface: Headspace Apercu (headings and body text), self-hosted.

What are Headspace’s brand colours?

The main colours on headspace.com are Royal Blue (#0061EF), Blue (#0040EA), Gold (#FFCE00), Medium Blue (#0000DB), White (#FFFFFF) and Light Charcoal (#44423F).

What colour is Headspace’s text and background?

Body text is #4B4C4D on a #FFFFFF background.

Where is Headspace’s logo from?

The logo shown in this guide was found on headspace.com’s homepage. For official logo files and usage rules, check Headspace’s own brand or press page.

Is this Headspace’s official style guide?

No. SiteStyleGuide made it from headspace.com’s public web pages on 27 October 2026, and isn’t affiliated with Headspace. Members can refresh a guide after 90 days to pick up changes.

Headspace Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Mental Health App for Meditation & Sleep - Headspace; ● 52 / 60 characters
Meta description: Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Try for free.; ● 150 / 160 characters
Site name: Headspace
og:title: Mental Health App for Meditation & Sleep - Headspace
og:description: Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Try for free.
Language: en

In search results

Headspacehttps://www.headspace.com/

Mental Health App for Meditation & Sleep - Headspace

Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Try for free.

When shared

headspace.com

Mental Health App for Meditation & Sleep - Headspace

Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental h…

Back to top ↑

Logo & favicons

Found as: image in the header. SVG, 32 × 32.

Logo

On white

On black

On Royal Blue

Favicons

1 found

32 px · ICO icon

Mental Health App for Meditation & Sleep - Headspace

Light browser tab

Mental Health App for Meditation & Sleep - Headspace

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#4B4C4D) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 32.2%
Light Charcoal 22.8%
Deep Charcoal 21.8%
Off White 9.7%
Royal Blue 6.1%
Blue 3.7%
Gold 2.6%
Medium Blue 1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
8.61:1 AAA

On white
—

Text, background, border · .css-1eg4w1g, .css-1wlbpr6
Light Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 3 7 73

On text
1.16:1 Fail

On white
10.02:1 AAA

Text, background, border · .css-h34ow8, .css-h34ow8.css-h34ow8.css-h34ow8[disabled]
Deep Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 2 4 82

On text
1.62:1 Fail

On white
13.94:1 AAA

Text, background · body, .css-bppcan button
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 2 3 2

On text
7.89:1 AAA

On white
1.09:1 Fail

Background · .css-15t8m5e, .css-1ko1g75.css-1ko1g75.css-1ko1g75[disabled]

Colours

Brand colours and accents, most used first

Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 59 0 6

On text
1.62:1 Fail

On white
5.31:1 AA

Background, text · .css-vt1579, .css-1gr7t27
Blue

HEX

RGB

HSL

OKLCH

CMYK
100 73 0 8

On text
1.20:1 Fail

On white
7.19:1 AAA

Background, border · .css-11fbkag:focus, .css-1eg4w1g:focus
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 19 100 0

On text
5.77:1 AA

On white
1.49:1 Fail

Background · .css-187rd0f, .css-1fh13ok
Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
100 100 0 14

On text
1.21:1 Fail

On white
10.38:1 AAA

Background · .css-11fbkag.css-11fbkag:not([disabled]):active, .css-1eg4w1g.css-1eg4w1g:not([disabled]):active

Gradients

linear-gradient(180deg, rgba(20, 19, 19, 0) 50%, rgba(20, 19, 19, 0.35) 75%, rgba(20, 19, 19, 1) 150%)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Headspace Apercu

Aa 200 Aa 700

Headspace Apercu

Self-hosted · weights 200, 400, 500, 600, 700 · body · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 2em · 32 px

Headspace

Body 16px Headspace Apercu

Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Tr…

Small 0.75rem · 12 px Headspace Apercu

Live a healthier, happier, more well-rested life in just a few minutes a day. Get the science-backed mental health app for every moment. Tr…

Button 100% / 1.15 none

Get started

Sizes in use

Most common across the site

32pxline 2.625rem · 6 rules
24pxline 2rem · 13 rules
20pxline 1.1em · 8 rules
18pxline 1.625rem · 3 rules
16pxline 1.1em · 32 rules
14pxline 1.1em · 3 rules
12pxline 1rem · 19 rules
8px5 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

2rem · 75×
0.5rem · 11×
50% · 6×
1.5rem · 4×
1rem · 4×
7rem · 2×

Shadows

0 0.125rem 0 rgba(65, 61, 69, 0.2)
0 0.125rem 0 transparent
0 3.23px 6.45px 0 #14131333
0px 1px 8px 0px #14131333

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

768

1024

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

758 px

620 px

450 px

400 px

327 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 52 characters, short enough to show in full in search results.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Headspace use?: Headspace’s website uses one typeface: Headspace Apercu (headings and body text), self-hosted.
What are Headspace’s brand colours?: The main colours on headspace.com are Royal Blue (#0061EF), Blue (#0040EA), Gold (#FFCE00), Medium Blue (#0000DB), White (#FFFFFF) and Light Charcoal (#44423F).
What colour is Headspace’s text and background?: Body text is #4B4C4D on a #FFFFFF background.
Where is Headspace’s logo from?: The logo shown in this guide was found on headspace.com’s homepage. For official logo files and usage rules, check Headspace’s own brand or press page.
Is this Headspace’s official style guide?: No. SiteStyleGuide made it from headspace.com’s public web pages on 27 October 2026, and isn’t affiliated with Headspace. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

headspace-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* headspace.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/headspace.com) */
:root {
  /* Colours */
  --text: #4B4C4D;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-light-charcoal: #44423F;
  --colour-deep-charcoal: #2D2C2B;
  --colour-off-white: #F9F4F2;
  --colour-royal-blue: #0061EF;
  --colour-blue: #0040EA;
  --colour-gold: #FFCE00;
  --colour-medium-blue: #0000DB;
  --gradient-1: linear-gradient(180deg, rgba(20, 19, 19, 0) 50%, rgba(20, 19, 19, 0.35) 75%, rgba(20, 19, 19, 1) 150%);

  /* Typefaces */
  --font-body: 'Headspace Apercu', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-body: 16px;
  --text-small: 0.75rem;
  --text-button: 100%;
  --leading-button: 1.15;

  /* Shape */
  --radius-1: 2rem;
  --radius-2: 0.5rem;
  --radius-3: 50%;
  --radius-4: 1.5rem;
  --radius-5: 1rem;
  --radius-6: 7rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 768px;
  --breakpoint-2: 1024px;
  --breakpoint-3: 1440px;
  --max-width-1: 1440px;
  --max-width-2: 758px;
  --max-width-3: 620px;
  --max-width-4: 450px;
  --max-width-5: 400px;
  --max-width-6: 327px;
}

{
    "site": "headspace.com",
    "source": "https://sitestyleguide.com/headspace.com",
    "text": "#4B4C4D",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Light Charcoal",
            "hex": "#44423F",
            "rgb": [
                68,
                66,
                63
            ]
        },
        {
            "name": "Deep Charcoal",
            "hex": "#2D2C2B",
            "rgb": [
                45,
                44,
                43
            ]
        },
        {
            "name": "Off White",
            "hex": "#F9F4F2",
            "rgb": [
                249,
                244,
                242
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0061EF",
            "rgb": [
                0,
                97,
                239
            ]
        },
        {
            "name": "Blue",
            "hex": "#0040EA",
            "rgb": [
                0,
                64,
                234
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFCE00",
            "rgb": [
                255,
                206,
                0
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#0000DB",
            "rgb": [
                0,
                0,
                219
            ]
        }
    ],
    "fonts": [
        {
            "name": "Headspace Apercu",
            "stack": "Headspace Apercu, sans-serif",
            "weights": [
                200,
                400,
                500,
                600,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run headspace.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/headspace.com" title="Headspace style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Headspacestyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Light Charcoal

Deep Charcoal

Off White

Colours

Royal Blue

Blue

Gold

Medium Blue

Gradients

Headspace Apercu

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Digg

CTV News

cargocollective.com

WeTransfer

Headspacestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Light Charcoal

Deep Charcoal

Off White

Colours

Royal Blue

Blue

Gold

Medium Blue

Gradients

Headspace Apercu

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run headspace.com?

Similar colours

Digg

CTV News

cargocollective.com

WeTransfer

Title &
description