What font does Calm use?

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

What are Calm’s brand colours?

The main colours on calm.com are Dark Slate Blue (#1A3E6F), Slate Blue (#6461E0), Royal Blue (#176293), Steel Blue (#2477AA), Lavender (#E2EAFF) and White (#FFFFFF).

What colour is Calm’s text and background?

Body text is #1C1C1C on a #FFFFFF background.

Where is Calm’s logo from?

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

Is this Calm’s official style guide?

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

Calm 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: Calm - The #1 App for Meditation and Sleep; ● 42 / 60 characters
Meta description: Calm is the #1 app for sleep and meditation. Join the millions experiencing better sleep, lower stress, and less anxiety.; ● 121 / 160 characters
og:title: Experience Calm
og:description: Relax with Calm, a simple mindfulness meditation app that brings clarity and peace of mind into your life
Language: en

In search results

Calmhttps://www.calm.com/

Calm - The #1 App for Meditation and Sleep

Calm is the #1 app for sleep and meditation. Join the millions experiencing better sleep, lower stress, and less anxiety.

When shared

calm.com

Experience Calm

Relax with Calm, a simple mindfulness meditation app that brings clarity and peace of mind into your life

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 128 × 128.

Logo

On white

On black

On Dark Slate Blue

Favicons

2 found

256 px · ICO icon
180 px · PNG apple-touch-icon

Calm - The #1 App for Meditation and Sleep

Light browser tab

Calm - The #1 App for Meditation and Sleep

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 (#1C1C1C) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 52.5%
Dark Slate Blue 14.8%
Slate Blue 6.1%
Near Black 6%
Royal Blue 5.3%
Charcoal 5%
Steel Blue 4.1%
Lavender 4.1%
Light Grey 2%

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
17.04:1 AAA

On white
—

Background, text, graphic · .daZqfX:after, .gIpaKJ:after
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 89

On text
—

On white
17.04:1 AAA

Text, graphic · .biZCqe span:nth-child(2), .biZCqe p
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 78

On text
1.45:1 Fail

On white
11.73:1 AAA

Text · .gHvnMY, .fslxDW
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 22

On text
9.98:1 AAA

On white
1.71:1 Fail

Background · .BpRfW

Colours

Brand colours and accents, most used first

Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
77 44 0 56

On text
1.59:1 Fail

On white
10.70:1 AAA

Text, border · .bEgoTX > h3, .cBHMmT
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
55 57 0 12

On text
3.51:1 AA large

On white
4.85:1 AA

Background · .iODOPy, .heofUb
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
84 33 0 42

On text
2.60:1 Fail

On white
6.55:1 AA

Text, background, border · .eKoySm:hover .styles__ItemHeading-sc-d026f2c8-5, .fhYVJu
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
79 30 0 33

On text
3.48:1 AA large

On white
4.89:1 AA

Background · .iODOPy, .koTljZ
Lavender

HEX

RGB

HSL

OKLCH

CMYK
11 8 0 0

On text
14.16:1 AAA

On white
1.20:1 Fail

Background · .fdpSQj, .iUXAgh

Gradients

linear-gradient(180deg,#2477AA 0%,#6461E0 100%)
linear-gradient( 180deg, rgba(247,247,247,0) 0%, rgba(247,247,247,0.0885417) 8.85%, #f7f7f7 100% )
linear-gradient(180deg,#60B4E7 0%,#6461E0 100%)

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.

Figtree

Aa 300 Aa 700

Figtree

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

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

Type scale

From the site’s CSS

Heading 1 2.75rem · 44 px

Calm

Heading 2 2.25rem · 36 px

Calm - The #1 App for Meditation and Sleep

Heading 3 1.5rem · 24 px

Calm - The #1 App for Meditation and Sleep

Heading 4 1.5rem · 24 px

Calm - The #1 App for Meditation and Sleep

Heading 5 1.25rem · 20 px

Calm - The #1 App for Meditation and Sleep

Heading 6 0.75rem · 12 px

Calm - The #1 App for Meditation and Sleep

Body 16px weight 400 · Figtree

Calm is the #1 app for sleep and meditation. Join the millions experiencing better sleep, lower stress, and less anxiety.

Paragraph 1rem · 16 px

Calm is the #1 app for sleep and meditation. Join the millions experiencing better sleep, lower stress, and less anxiety.

Button 1rem · 16 px Figtree

Get started

Sizes in use

Most common across the site

44px1 rules
36px1 rules
24pxline normal · 9 rules
20pxline 150% · 3 rules
18px3 rules
16pxline 28px · 19 rules
15pxline 20px · 1 rules
12px1 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

100px · 27×
100% · 2×
20px · 2×
2.5px · 1×
10px · 1×
10px 10px 0 0 · 1×

Shadows

0 4px 16px rgba(0,0,0,0.16)

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

480

767

768

1024

1299

1300

1440

1550

On a scale of 0 to 1550 px.

Content widths (max-width)

1440 px

1168 px

960 px

335 px

Back to top ↑

Notes

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

Notes

● FineThe title is 42 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 Calm use?: Calm’s website uses one typeface: Figtree (headings and body text), self-hosted.
What are Calm’s brand colours?: The main colours on calm.com are Dark Slate Blue (#1A3E6F), Slate Blue (#6461E0), Royal Blue (#176293), Steel Blue (#2477AA), Lavender (#E2EAFF) and White (#FFFFFF).
What colour is Calm’s text and background?: Body text is #1C1C1C on a #FFFFFF background.
Where is Calm’s logo from?: The logo shown in this guide was found on calm.com’s homepage. For official logo files and usage rules, check Calm’s own brand or press page.
Is this Calm’s official style guide?: No. SiteStyleGuide made it from calm.com’s public web pages on 27 October 2026, and isn’t affiliated with Calm. 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

calm-com-tokens.css

Download

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

/* calm.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/calm.com) */
:root {
  /* Colours */
  --text: #1C1C1C;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1C1C1C;
  --colour-charcoal: #383838;
  --colour-light-grey: #C6C6C6;
  --colour-dark-slate-blue: #1A3E6F;
  --colour-slate-blue: #6461E0;
  --colour-royal-blue: #176293;
  --colour-steel-blue: #2477AA;
  --colour-lavender: #E2EAFF;
  --gradient-1: linear-gradient(180deg,#2477AA 0%,#6461E0 100%);
  --gradient-2: linear-gradient( 180deg, rgba(247,247,247,0) 0%, rgba(247,247,247,0.0885417) 8.85%, #f7f7f7 100% );
  --gradient-3: linear-gradient(180deg,#60B4E7 0%,#6461E0 100%);

  /* Typefaces */
  --font-body: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2.75rem;
  --text-h2: 2.25rem;
  --text-h3: 1.5rem;
  --text-h4: 1.5rem;
  --text-h5: 1.25rem;
  --text-h6: 0.75rem;
  --text-body: 16px;
  --text-p: 1rem;
  --text-button: 1rem;

  /* Shape */
  --radius-1: 100px;
  --radius-2: 100%;
  --radius-3: 20px;
  --radius-4: 2.5px;
  --radius-5: 10px;
  --radius-6: 10px 10px 0 0;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1299px;
  --breakpoint-6: 1300px;
  --breakpoint-7: 1440px;
  --breakpoint-8: 1550px;
  --max-width-1: 1440px;
  --max-width-2: 1168px;
  --max-width-3: 960px;
  --max-width-4: 335px;
}

{
    "site": "calm.com",
    "source": "https://sitestyleguide.com/calm.com",
    "text": "#1C1C1C",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1C1C1C",
            "rgb": [
                28,
                28,
                28
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#383838",
            "rgb": [
                56,
                56,
                56
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#C6C6C6",
            "rgb": [
                198,
                198,
                198
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#1A3E6F",
            "rgb": [
                26,
                62,
                111
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#6461E0",
            "rgb": [
                100,
                97,
                224
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#176293",
            "rgb": [
                23,
                98,
                147
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#2477AA",
            "rgb": [
                36,
                119,
                170
            ]
        },
        {
            "name": "Lavender",
            "hex": "#E2EAFF",
            "rgb": [
                226,
                234,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Figtree",
            "stack": "'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            "weights": [
                300,
                400,
                500,
                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 calm.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/calm.com" title="Calm 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 ↑

Calmstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Charcoal

Light Grey

Colours

Dark Slate Blue

Slate Blue

Royal Blue

Steel Blue

Lavender

Gradients

Figtree

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Sveltewind

Lightshot

histats.com

Statcounter

Node.js

Calmstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Charcoal

Light Grey

Colours

Dark Slate Blue

Slate Blue

Royal Blue

Steel Blue

Lavender

Gradients

Figtree

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run calm.com?

Also set in Figtree

Sveltewind

Similar colours

Lightshot

histats.com

Statcounter

Node.js

Title &
description