What font does Eight Sleep use?

Eight Sleep’s website uses four typefaces: Apple Color Emoji (headings and body text), a system font; IBM Plex Mono, self-hosted; Oswald, self-hosted; NeueMontreal, self-hosted.

What are Eight Sleep’s brand colours?

The main colours on eightsleep.com are Deep Royal Blue (#4158EE), Light Royal Blue (#1862FF), Cornflower Blue (#6E9AF8), Slate Grey (#797C8E), Dark Slate Blue (#0249A0) and Light Cornflower Blue (#8AAFFF).

What colour is Eight Sleep’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Eight Sleep’s logo from?

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

Is this Eight Sleep’s official style guide?

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

Unofficial A style guide made by SiteStyleGuide from eightsleep.com’s public web pages. Not affiliated with or endorsed by Eight Sleep. The real site is eightsleep.com ↗

Unofficial style guide

Eight Sleepstyle guide

Eight Sleep’s website (eightsleep.com) uses Apple Color Emoji for its headings and body text. Its palette is led by Deep Royal Blue (#4158EE), Light Royal Blue (#1862FF) and Cornflower Blue (#6E9AF8), with #000000 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: eightsleep.com
Typefaces: Apple Color Emoji, IBM Plex Mono, Oswald
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the eightsleep.com homepage on a desktop screen — Screenshot of eightsleep.com on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the eightsleep.com homepage on a phone — On a phone, 390 px.

Identity & metadata

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

Title &
description

Page title: Eight Sleep | Now in Australia; ● 30 / 60 characters
Meta description: Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod 6 reduces snoring and works with any mattress.; ● 156 / 160 characters
og:title: Eight Sleep | Now in Australia
og:description: Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod 6 reduces snoring and works with any mattress.
Language: en

In search results

Eight Sleephttps://www.eightsleep.com/au/

Eight Sleep | Now in Australia

Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod 6 reduces snoring and works with any mattress.

When shared

eightsleep.com

Eight Sleep | Now in Australia

Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod…

Logo & favicons

Found as: image in the header. SVG, 64 × 27.

Logo

On white

On black

On Deep Royal Blue

Favicons

4 found

180 px · PNG apple-touch-icon
48 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon

Eight Sleep | Now in Australia

Light browser tab

Eight Sleep | Now in Australia

Dark browser tab

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

Colour

Balance

How much each colour is used

White 45.9%
Black 23%
Dark Grey 9.7%
Off White 6.9%
Deep Royal Blue 3.1%
Light Royal Blue 2.2%
Cornflower Blue 1.6%
Slate Grey 1.5%
Dark Slate Blue 1.5%
Light Cornflower Blue 0.7%
Deep Cornflower Blue 0.7%
Tan 0.7%
Brown 0.6%
Light Midnight Blue 0.6%
Deep Midnight Blue 0.6%
Cornflower Blue 0.6%

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

On white
—

Background, text, border · inline style on <svg>, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · .Button_dark__hONrt:before, .Pod5Quiz_modal_wrapper_content__aZJsZ.Pod5Quiz_modal_wrapper_ab__rQe7d button[i
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 61

On text
3.50:1 AA large

On white
6.01:1 AA

Text, background, border · .Accordion_panel__0wVFN>button:after, .UserStoryCopy_title__drdnN
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 2 7

On text
17.54:1 AAA

On white
1.20:1 Fail

Background, text, border · .BestSleepYouveNeverHad_subtitle__ax8Gq, .BestSleepYouveNeverHad_title__5D9NE

Colours

Brand colours and accents, most used first

Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
73 63 0 7

On text
3.86:1 AA large

On white
5.45:1 AA

Text, background, border · --tw-shadow, .Badge_default__aJXZE:not(.Badge_transparent__yFTDf)
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
91 62 0 0

On text
4.23:1 AA large

On white
4.96:1 AA

Text, background · div.MiniModal_root__gyz9I .MiniModal_suptitle__GOmwB, .button_text__Q9RLw
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
56 38 0 3

On text
7.64:1 AAA

On white
2.75:1 Fail

Text, background, border · inline style on <span>, .bg-\[\#6E9AF8\]
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
15 13 0 44

On text
5.09:1 AA

On white
4.13:1 AA large

Text · .Sticky_top_line__4nGL9 s, .Checkout_checkbox_container__B_z9v p
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
99 54 0 37

On text
2.46:1 Fail

On white
8.53:1 AAA

Background, border, text · .ErrorBoundary_container__hdu2p button, .Button_button__mAixm
Light Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
46 31 0 0

On text
9.66:1 AAA

On white
2.17:1 Fail

Background, border · .Button_button__mAixm:disabled, .bg-\[\#98B7FF\]
Deep Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
69 50 0 0

On text
5.81:1 AA

On white
3.61:1 AA large

Background · inline style on <div>, .bg-\[\#4F7FFF\]
Tan

HEX

RGB

HSL

OKLCH

CMYK
0 10 25 29

On text
8.66:1 AAA

On white
2.42:1 Fail

Background, text · .Badge_orange__qWgv8:not(.Badge_transparent__yFTDf), .bg-daytime-1
Brown

HEX

RGB

HSL

OKLCH

CMYK
0 90 73 27

On text
3.20:1 AA large

On white
6.56:1 AA

Text · .OrderSummary_error__0wfsn, .MiniModal_form_container__3IbMB p
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 68 0 42

On text
1.86:1 Fail

On white
11.31:1 AAA

Background · .Button_blue__c8pdL:after, .Button_blue__c8pdL:focus-visible:before
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 71 0 55

On text
1.47:1 Fail

On white
14.33:1 AAA

Background, border · .ErrorBoundary_container__hdu2p button:active, .Button_button__mAixm:active
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
69 45 0 0

On text
6.47:1 AA

On white
3.25:1 AA large

Background · .Button_blue__c8pdL:after, .bg-\[\#5289FE\]

Gradients

linear-gradient(initial)
linear-gradient(180deg,#ffffff,#9e9e9e)
linear-gradient(180deg,#4f8bff,#003095)

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.

Apple Color Emoji

Aa 400

Apple Color Emoji

System font, or not loaded on this page · body · shown in a stand-in if you don’t have it

Aa 400 Aa 500

IBM Plex Mono

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

Aa 300 Aa 500

Oswald

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

Aa 200 Aa 800

NeueMontreal

Self-hosted · weights 200, 800 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 32px / 1.2 weight 500

Eight Sleep

Heading 2 4rem · 64 px / 1.1 weight 500

Eight Sleep | Now in Australia

Heading 3 48px / 3.3rem weight 500

Eight Sleep | Now in Australia

Heading 4 20px / 1.4 weight 500

Eight Sleep | Now in Australia

Heading 6 .75rem · 12 px / 150% weight 500

Eight Sleep | Now in Australia

Body 17px

Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod 6 reduces snoring and works w…

Paragraph .875rem · 14 px / 1.29 weight 500

Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod 6 reduces snoring and works w…

Small 80%

Fall asleep faster and stay asleep longer with personalized cooling and heating for each side of the bed. Pod 6 reduces snoring and works w…

Button 14px / 16px weight 500

Get started

Link 16px / normal weight 500 · uppercase

Sizes in use

Most common across the site

24pxline 1.4 · 12 rules
20pxline 1.4 · 12 rules
18pxline 1.4 · 16 rules
16pxline normal · 42 rules
14pxline 140% · 53 rules
12pxline 1.4 · 30 rules
11pxline 150% · 10 rules
10pxline clamp(1.2rem,1.1875rem + 0vw,1.2rem) · 11 rules

Elements

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

Elements

Button

Get started

.ErrorBoundary_container__hdu2p button · #0249A0 · radius 3px

Corner radius

.5rem · 48×
8px · 22×
50% · 18×
6px · 12×
16px · 10×
4px · 10×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
0 1px 1px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.02),0 0 0 3px rgba(0,0,0,.25),0 1px 1px 0 rgba(0,0,0,.08)
0 8px 32px rgba(0,0,0,.16)

Layout

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

Grid

Breakpoints

599

600

640

1023

1024

1200

1439

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

1200 px

640 px

550 px

400 px

380 px

Notes

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

Notes

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

Questions

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

Questions

What font does Eight Sleep use?: Eight Sleep’s website uses four typefaces: Apple Color Emoji (headings and body text), a system font; IBM Plex Mono, self-hosted; Oswald, self-hosted; NeueMontreal, self-hosted.
What are Eight Sleep’s brand colours?: The main colours on eightsleep.com are Deep Royal Blue (#4158EE), Light Royal Blue (#1862FF), Cornflower Blue (#6E9AF8), Slate Grey (#797C8E), Dark Slate Blue (#0249A0) and Light Cornflower Blue (#8AAFFF).
What colour is Eight Sleep’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Eight Sleep’s logo from?: The logo shown in this guide was found on eightsleep.com’s homepage. For official logo files and usage rules, check Eight Sleep’s own brand or press page.
Is this Eight Sleep’s official style guide?: No. SiteStyleGuide made it from eightsleep.com’s public web pages on 26 October 2026, and isn’t affiliated with Eight Sleep. Members can refresh a guide after 90 days to pick up changes.

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

eightsleep-com-tokens.css

Download

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

/* eightsleep.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/eightsleep.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-dark-grey: #636363;
  --colour-off-white: #EDEAE8;
  --colour-deep-royal-blue: #4158EE;
  --colour-light-royal-blue: #1862FF;
  --colour-cornflower-blue: #6E9AF8;
  --colour-slate-grey: #797C8E;
  --colour-dark-slate-blue: #0249A0;
  --colour-light-cornflower-blue: #8AAFFF;
  --colour-deep-cornflower-blue: #4F7FFF;
  --colour-tan: #B6A489;
  --colour-brown: #B91332;
  --colour-light-midnight-blue: #003095;
  --colour-deep-midnight-blue: #002173;
  --colour-cornflower-blue-2: #4F8BFF;
  --gradient-1: linear-gradient(initial);
  --gradient-2: linear-gradient(180deg,#ffffff,#9e9e9e);
  --gradient-3: linear-gradient(180deg,#4f8bff,#003095);

  /* Typefaces */
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-other: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;

  /* Type scale */
  --text-h1: 32px;
  --leading-h1: 1.2;
  --text-h2: 4rem;
  --leading-h2: 1.1;
  --text-h3: 48px;
  --leading-h3: 3.3rem;
  --text-h4: 20px;
  --leading-h4: 1.4;
  --text-h6: .75rem;
  --leading-h6: 150%;
  --text-body: 17px;
  --text-p: .875rem;
  --leading-p: 1.29;
  --text-small: 80%;
  --text-button: 14px;
  --leading-button: 16px;
  --text-a: 16px;
  --leading-a: normal;

  /* Shape */
  --radius-1: .5rem;
  --radius-2: 8px;
  --radius-3: 50%;
  --radius-4: 6px;
  --radius-5: 16px;
  --radius-6: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 599px;
  --breakpoint-2: 600px;
  --breakpoint-3: 640px;
  --breakpoint-4: 1023px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1200px;
  --breakpoint-7: 1439px;
  --breakpoint-8: 1440px;
  --max-width-1: 1440px;
  --max-width-2: 1200px;
  --max-width-3: 640px;
  --max-width-4: 550px;
  --max-width-5: 400px;
  --max-width-6: 380px;
}

{
    "site": "eightsleep.com",
    "source": "https://sitestyleguide.com/eightsleep.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#636363",
            "rgb": [
                99,
                99,
                99
            ]
        },
        {
            "name": "Off White",
            "hex": "#EDEAE8",
            "rgb": [
                237,
                234,
                232
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#4158EE",
            "rgb": [
                65,
                88,
                238
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#1862FF",
            "rgb": [
                24,
                98,
                255
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#6E9AF8",
            "rgb": [
                110,
                154,
                248
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#797C8E",
            "rgb": [
                121,
                124,
                142
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#0249A0",
            "rgb": [
                2,
                73,
                160
            ]
        },
        {
            "name": "Light Cornflower Blue",
            "hex": "#8AAFFF",
            "rgb": [
                138,
                175,
                255
            ]
        },
        {
            "name": "Deep Cornflower Blue",
            "hex": "#4F7FFF",
            "rgb": [
                79,
                127,
                255
            ]
        },
        {
            "name": "Tan",
            "hex": "#B6A489",
            "rgb": [
                182,
                164,
                137
            ]
        },
        {
            "name": "Brown",
            "hex": "#B91332",
            "rgb": [
                185,
                19,
                50
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#003095",
            "rgb": [
                0,
                48,
                149
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#002173",
            "rgb": [
                0,
                33,
                115
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#4F8BFF",
            "rgb": [
                79,
                139,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Apple Color Emoji",
            "stack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "IBM Plex Mono",
            "stack": "\"IBM Plex Mono\", \"IBM Plex Mono Fallback\", monospace",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Oswald",
            "stack": "Oswald, Oswald Fallback",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "NeueMontreal",
            "stack": "\"NeueMontreal\", \"NeueMontreal Fallback\", sans-serif",
            "weights": [
                200,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "EurostileExtended",
            "stack": "\"EurostileExtended\", \"EurostileExtended Fallback\", sans-serif",
            "weights": [
                200,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Bethany Elingston",
            "stack": "Bethany Elingston, serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Apple Color Emoji as their main typeface

SeatSheet

seatsheet.com · set in Apple Color Emoji
Save1
エキサイトブログ

exblog.jp · set in Apple Color Emoji
Save
Node.js

nodejs.org · set in Apple Color Emoji
Save
Ubie

ubiehealth.com · set in Apple Color Emoji
Save

Websites whose lead colour is closest to Eight Sleep’s

WordPress.com

wp.me · 19 hours ago
Save
WordPress.org

wordpress.org · 1 day ago
Save
Interia

interia.pl · 20 hours ago
Save
CTV News

ctvnews.ca · 5 days ago
Save

Captured from eightsleep.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Eight Sleep; this guide describes the public website for reference.

Eight Sleepstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Dark Grey

Off White

Colours

Deep Royal Blue

Light Royal Blue

Cornflower Blue

Slate Grey

Dark Slate Blue

Light Cornflower Blue

Deep Cornflower Blue

Tan

Brown

Light Midnight Blue

Deep Midnight Blue

Cornflower Blue

Gradients

Apple Color Emoji

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run eightsleep.com?

Also set in Apple Color Emoji

SeatSheet

エキサイトブログ

Node.js

Ubie

Similar colours

WordPress.com

WordPress.org

Interia

CTV News

Title &
description