What font does Oura Ring use?

Oura Ring’s website uses two typefaces: AkkuratLL (headings and body text), self-hosted; Editorial New, self-hosted.

What are Oura Ring’s brand colours?

The main colours on ouraring.com are Light Royal Blue (#2A72DE), Deep Royal Blue (#2056A6), Midnight Blue (#3E2242), Red (#D22C15), Dark Slate Grey (#224228) and Light Dim Grey (#715956).

What colour is Oura Ring’s text and background?

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

Where is Oura Ring’s logo from?

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

Is this Oura Ring’s official style guide?

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

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

Unofficial style guide

Oura Ringstyle guide

Oura Ring’s website (ouraring.com) uses AkkuratLL for its headings and body text. Its palette is led by Light Royal Blue (#2A72DE), Deep Royal Blue (#2056A6) and Midnight Blue (#3E2242), with #4A4741 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: ouraring.com
Typefaces: AkkuratLL, Editorial New
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the ouraring.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: PayPal; ● 6 / 60 characters
Meta description: Enhance your health journey with Oura. The Oura Ring provides round-the-clock insights into sleep, fitness, and stress for wellness. Now HSA/FSA eligible.; ● 154 / 160 characters
Site name: Oura Ring
og:title: Oura Ring. Smart Ring for Fitness, Stress, Sleep & Health.
og:description: Enhance your health journey with Oura. The Oura Ring provides round-the-clock insights into sleep, fitness, and stress for wellness. Now HSA/FSA eligible.
Language: en

In search results

Oura Ringhttps://ouraring.com/

PayPal

Enhance your health journey with Oura. The Oura Ring provides round-the-clock insights into sleep, fitness, and stress for wellness. Now HSA/FSA eligible.

When shared

ouraring.com

Oura Ring. Smart Ring for Fitness, Stress, Sleep & Health.

Enhance your health journey with Oura. The Oura Ring provides round-the-clock insights into sleep, fitness, a…

Logo & favicons

Found as: schema.org logo. JPG, 1182 × 665.

Logo

On white

On black

On Light Royal Blue

Favicons

4 found

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

PayPal

Light browser tab

PayPal

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

Colour

Balance

How much each colour is used

Warm Off White 30.3%
White 19.1%
Warm Dark Grey 13.6%
Near Black 10.8%
Light Royal Blue 3.9%
Deep Royal Blue 3.5%
Midnight Blue 2.6%
Red 2.4%
Dark Slate Grey 2%
Light Dim Grey 2%
Brown 2%
Saddle Brown 2%
Misty Rose 1.4%
Peru 1.4%
Beige 1.4%
Deep Dim Grey 1.4%

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

Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 2 6 3

On text
8.24:1 AAA

On white
1.12:1 Fail

Background, text, border · .bg-cream-50, .bg-sandstone-200
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
9.26:1 AAA

On white
—

Background, text, border · .bg-white, .bg-white\/10
Warm Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 4 12 71

On text
—

On white
9.26:1 AAA

Text, background, border · .bg-sandstone-500, .bg-sandstone-500\/10
Near Black

HEX

RGB

HSL

OKLCH

CMYK
16 12 0 90

On text
1.95:1 Fail

On white
18.09:1 AAA

Background, text, border · .bg-backdrop-600\/10, .bg-backdrop-600\/40

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
81 49 0 13

On text
2.01:1 Fail

On white
4.61:1 AA

Background, border, text · .bg-blue-100, .bg-\[\#1F72CD\]\!
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
81 48 0 35

On text
1.30:1 Fail

On white
7.14:1 AAA

Background, text, border · .bg-blue-200, .checked\:bg-blue-200:checked
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
6 48 0 74

On text
1.50:1 Fail

On white
13.89:1 AAA

Text, background · .bg-purple-700, .text-\[\#3E2242\]
Red

HEX

RGB

HSL

OKLCH

CMYK
0 79 90 18

On text
1.81:1 Fail

On white
5.11:1 AA

Background, text, border · .before\:bg-red-600:before, .text-red-600
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
48 0 39 74

On text
1.21:1 Fail

On white
11.18:1 AAA

Background, text · .bg-olive-800, .text-olive-800
Light Dim Grey

HEX

RGB

HSL

OKLCH

CMYK
0 21 24 56

On text
1.44:1 Fail

On white
6.43:1 AA

Background, text · .bg-brown-500, .text-brown-500
Brown

HEX

RGB

HSL

OKLCH

CMYK
0 36 43 58

On text
1.11:1 Fail

On white
8.34:1 AAA

Background, text · .bg-brown-600, .text-brown-600
Saddle Brown

HEX

RGB

HSL

OKLCH

CMYK
0 26 93 59

On text
1.17:1 Fail

On white
7.91:1 AAA

Background, text · .bg-mustard-700, .text-mustard-700
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 14 16 5

On text
6.46:1 AA

On white
1.43:1 Fail

Background · .bg-red-100, --color-red-100
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 30 52 25

On text
3.00:1 AA large

On white
3.08:1 AA large

Background · .bg-orange-300, --color-orange-300
Beige

HEX

RGB

HSL

OKLCH

CMYK
5 0 10 7

On text
7.63:1 AAA

On white
1.21:1 Fail

Background · .bg-green-100, --color-green-100
Deep Dim Grey

HEX

RGB

HSL

OKLCH

CMYK
15 20 0 66

On text
1.02:1 Fail

On white
9.11:1 AAA

Background · .bg-purple-600, --color-purple-600

Gradients

linear-gradient(initial)
linear-gradient(to top left,#0000 49.5%,#000 50%,#0000 50.5%)
radial-gradient(219.38% 304.47% at 45.1% -44.97%,#3f4045 10%,#3b3c42 20%,#38393e 30%,#35363a 40%,#323237 50%,#2e2f33 60%,#2b2c2f 70%,#28282c 80%,#242528 90%)

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.

AkkuratLL

Aa 300 Aa 400

AkkuratLL

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

Aa 200 Aa 300

Editorial New

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

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

Type scale

From the site’s CSS

Small 80%

Enhance your health journey with Oura. The Oura Ring provides round-the-clock insights into sleep, fitness, and stress for wellness. Now HS…

Sizes in use

Most common across the site

48pxline initial · 5 rules
36pxline initial · 5 rules
30pxline initial · 3 rules
24pxline initial · 3 rules
18pxline initial · 2 rules
16pxline initial · 3 rules
14pxline initial · 3 rules
12pxline initial · 6 rules

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

3.40282e+38px · 5×
.5rem · 4×
.25rem · 2×
1rem · 2×
1.5rem · 2×
2rem · 2×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000

Layout

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

Grid

Breakpoints

320

419

420

768

1024

1280

1440

1568

On a scale of 0 to 1568 px.

Content widths (max-width)

1440 px

1024 px

768 px

540 px

500 px

480 px

Notes

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

Notes

● FineThe title is 6 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 Oura Ring use?: Oura Ring’s website uses two typefaces: AkkuratLL (headings and body text), self-hosted; Editorial New, self-hosted.
What are Oura Ring’s brand colours?: The main colours on ouraring.com are Light Royal Blue (#2A72DE), Deep Royal Blue (#2056A6), Midnight Blue (#3E2242), Red (#D22C15), Dark Slate Grey (#224228) and Light Dim Grey (#715956).
What colour is Oura Ring’s text and background?: Body text is #4A4741 on a #FFFFFF background.
Where is Oura Ring’s logo from?: The logo shown in this guide was found on ouraring.com’s homepage. For official logo files and usage rules, check Oura Ring’s own brand or press page.
Is this Oura Ring’s official style guide?: No. SiteStyleGuide made it from ouraring.com’s public web pages on 26 October 2026, and isn’t affiliated with Oura Ring. 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

ouraring-com-tokens.css

Download

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

/* ouraring.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/ouraring.com) */
:root {
  /* Colours */
  --text: #4A4741;
  --background: #FFFFFF;
  --colour-warm-off-white: #F7F1E8;
  --colour-white: #FFFFFF;
  --colour-warm-dark-grey: #4A4741;
  --colour-near-black: #151619;
  --colour-light-royal-blue: #2A72DE;
  --colour-deep-royal-blue: #2056A6;
  --colour-midnight-blue: #3E2242;
  --colour-red: #D22C15;
  --colour-dark-slate-grey: #224228;
  --colour-light-dim-grey: #715956;
  --colour-brown: #6B443D;
  --colour-saddle-brown: #684D07;
  --colour-misty-rose: #F2D0CB;
  --colour-peru: #C0865D;
  --colour-beige: #E2EDD5;
  --colour-deep-dim-grey: #4A4657;
  --gradient-1: linear-gradient(initial);
  --gradient-2: linear-gradient(to top left,#0000 49.5%,#000 50%,#0000 50.5%);
  --gradient-3: radial-gradient(219.38% 304.47% at 45.1% -44.97%,#3f4045 10%,#3b3c42 20%,#38393e 30%,#35363a 40%,#323237 50%,#2e2f33 60%,#2b2c2f 70%,#28282c 80%,#242528 90%);

  /* Typefaces */
  --font-body: 'AkkuratLL', sans-serif;
  --font-other: 'Editorial New', serif;

  /* Type scale */
  --text-small: 80%;

  /* Shape */
  --radius-1: 3.40282e+38px;
  --radius-2: .5rem;
  --radius-3: .25rem;
  --radius-4: 1rem;
  --radius-5: 1.5rem;
  --radius-6: 2rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 419px;
  --breakpoint-3: 420px;
  --breakpoint-4: 768px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1280px;
  --breakpoint-7: 1440px;
  --breakpoint-8: 1568px;
  --max-width-1: 1440px;
  --max-width-2: 1024px;
  --max-width-3: 768px;
  --max-width-4: 540px;
  --max-width-5: 500px;
  --max-width-6: 480px;
}

{
    "site": "ouraring.com",
    "source": "https://sitestyleguide.com/ouraring.com",
    "text": "#4A4741",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Warm Off White",
            "hex": "#F7F1E8",
            "rgb": [
                247,
                241,
                232
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Warm Dark Grey",
            "hex": "#4A4741",
            "rgb": [
                74,
                71,
                65
            ]
        },
        {
            "name": "Near Black",
            "hex": "#151619",
            "rgb": [
                21,
                22,
                25
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#2A72DE",
            "rgb": [
                42,
                114,
                222
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#2056A6",
            "rgb": [
                32,
                86,
                166
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#3E2242",
            "rgb": [
                62,
                34,
                66
            ]
        },
        {
            "name": "Red",
            "hex": "#D22C15",
            "rgb": [
                210,
                44,
                21
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#224228",
            "rgb": [
                34,
                66,
                40
            ]
        },
        {
            "name": "Light Dim Grey",
            "hex": "#715956",
            "rgb": [
                113,
                89,
                86
            ]
        },
        {
            "name": "Brown",
            "hex": "#6B443D",
            "rgb": [
                107,
                68,
                61
            ]
        },
        {
            "name": "Saddle Brown",
            "hex": "#684D07",
            "rgb": [
                104,
                77,
                7
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#F2D0CB",
            "rgb": [
                242,
                208,
                203
            ]
        },
        {
            "name": "Peru",
            "hex": "#C0865D",
            "rgb": [
                192,
                134,
                93
            ]
        },
        {
            "name": "Beige",
            "hex": "#E2EDD5",
            "rgb": [
                226,
                237,
                213
            ]
        },
        {
            "name": "Deep Dim Grey",
            "hex": "#4A4657",
            "rgb": [
                74,
                70,
                87
            ]
        }
    ],
    "fonts": [
        {
            "name": "AkkuratLL",
            "stack": "AkkuratLL, sans-serif",
            "weights": [
                300,
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Editorial New",
            "stack": "Editorial New, serif",
            "weights": [
                200,
                300
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to Oura Ring’s

Waze

waze.com · 4 hours ago
Save
Google

thinkwithgoogle.com · 14 hours ago
Save
blog.google

blog.google · 1 day ago
Save
Google Design

design.google · 1 day ago
Save

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

Oura Ringstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Warm Off White

White

Warm Dark Grey

Near Black

Colours

Light Royal Blue

Deep Royal Blue

Midnight Blue

Red

Dark Slate Grey

Light Dim Grey

Brown

Saddle Brown

Misty Rose

Peru

Beige

Deep Dim Grey

Gradients

AkkuratLL

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run ouraring.com?

Similar colours

Waze

Google

blog.google

Google Design

Title &
description