What font does rhode use?

rhode’s website uses two typefaces: Swiss (headings and body text), self-hosted; Rektorat Heavy, self-hosted.

What are rhode’s brand colours?

The main colours on rhodeskin.com are Saddle Brown (#643A2A), Fire Brick (#C63931), Red (#E81818), Steel Blue (#007AFF), Midnight Blue (#272D45) and Dark Olive Green (#4F6A46).

What colour is rhode’s text and background?

Body text is #67645E on a #FFFFFF background.

Where is rhode’s logo from?

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

Is this rhode’s official style guide?

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

rhode 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: rhode skin by hailey rhode bieber; ● 33 / 60 characters
Meta description: Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the look of skin over time.; ● 159 / 160 characters
Site name: rhode
og:title: rhode skin by hailey rhode bieber
og:description: Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the look of skin over time.
Language: en
Theme colour: #fff

In search results

rhodehttps://www.rhodeskin.com/

rhode skin by hailey rhode bieber

Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the look of skin over time.

When shared

rhodeskin.com

rhode skin by hailey rhode bieber

Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant d…

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 100 × 26.

Logo

On white

On black

On Saddle Brown

Favicons

3 found

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

rhode skin by hailey rhode bieber

Light browser tab

rhode skin by hailey rhode bieber

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

Colour

Balance

How much each colour is used

Warm Dark Grey 39.8%
White 31.1%
Off White 18.4%
Grey 6.5%
Saddle Brown 1.3%
Fire Brick 0.7%
Red 0.6%
Steel Blue 0.6%
Midnight Blue 0.4%
Dark Olive Green 0.4%
Slate Grey 0.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

Warm Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 3 9 60

On text
—

On white
5.90:1 AA

Text, background, border · inline style on <span>, inline style on <div>
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
5.90:1 AA

On white
—

Text, background, graphic · inline style on <span>, body
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 2 5

On text
5.17:1 AA

On white
1.14:1 Fail

Background, border, text · .Header:not(.index) nav, .Header__sticky nav
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 2 5 48

On text
1.54:1 Fail

On white
3.84:1 AA large

Background, border, text · .Slider-with-video-image-container .product-description-text p.description-title, .Button__gray-backgroung .Button-hover-content

Colours

Brand colours and accents, most used first

Saddle Brown

HEX

RGB

HSL

OKLCH

CMYK
0 42 58 61

On text
1.63:1 Fail

On white
9.63:1 AAA

Text, background, graphic · .Cart-selectableGWP-product__title, .Cart-selectableGWP-selector .Product-swatches-container-title
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 71 75 22

On text
1.13:1 Fail

On white
5.21:1 AA

Text · .o-formErrors ul, .Image-content>*+*
Red

HEX

RGB

HSL

OKLCH

CMYK
0 90 90 9

On text
1.28:1 Fail

On white
4.59:1 AA

Background, border, text · .o-button, .o-button--hollow
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 0

On text
1.47:1 Fail

On white
4.02:1 AA large

Background, text, border · .swiper-pagination-bullet-active, .swiper-pagination-progressbar .swiper-pagination-progressbar-fill
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
43 35 0 73

On text
2.30:1 Fail

On white
13.57:1 AAA

Text · .okeReviews[data-oke-container] .oke-modal, .oke-modal .okeReviews[data-oke-container].oke-w
Dark Olive Green

HEX

RGB

HSL

OKLCH

CMYK
25 0 34 58

On text
1.02:1 Fail

On white
6.03:1 AA

Background, text, border · .Bundle-contents-product-toggle, .AccountSection-navigation-item-active:after
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
23 22 0 47

On text
1.11:1 Fail

On white
5.33:1 AA

Text · .okeReviews[data-oke-container] .oke-modal .oke-helpful, --oke-mediaGrid-chevronColor

Gradients

linear-gradient(to bottom,#000,#000000bc 19%,#0000008a 34%,#00000061 47%,#00000047 56.5%,#00000031 65%,#00000020 73%,#00000013 80.2%,#0000000b 86.1%,#00000005 91%,#00000002 95.2%,#00000001 98.2%,#0000)
linear-gradient(to top,#000,#000000bc 19%,#0000008a 34%,#00000061 47%,#00000047 56.5%,#00000031 65%,#00000020 73%,#00000013 80.2%,#0000000b 86.1%,#00000005 91%,#00000002 95.2%,#00000001 98.2%,#0000)
radial-gradient(116.69% 129.41% at 5.22% -15.34%,#84827e,#f1f0ed)

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.

Swiss

Aa 400 Aa 700

Swiss

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

Aa 400 Aa 700

Rektorat Heavy

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

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

Type scale

From the site’s CSS

Heading 1 1.5rem · 24 px / 1.4 weight 700 · Swiss

rhode

Heading 2 1.375rem · 22 px / 1.4 weight 700 · Swiss

rhode skin by hailey rhode bieber

Heading 3 1.25rem · 20 px / 1.4 weight 700 · Swiss

rhode skin by hailey rhode bieber

Heading 4 1.125rem · 18 px / 1.4 weight 700 · Swiss

rhode skin by hailey rhode bieber

Heading 5 1.0625rem · 17 px / 1.4 weight 700 · Swiss

rhode skin by hailey rhode bieber

Heading 6 1rem · 16 px / 1.4 weight 700 · Swiss

rhode skin by hailey rhode bieber

Body — / 1.5 weight 400 · Swiss

Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the loo…

Paragraph max(.825rem + .2vw,.925vw) / 150%

Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the loo…

Small .8125em · 13 px

Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the loo…

Button 100% / 1 none

Get started

Link max(.825rem + .2vw,.925vw) / 150%

Sizes in use

Most common across the site

24pxline 1.4 · 11 rules
22pxline 1.4 · 13 rules
20pxline 1.4 · 10 rules
16pxline 120% · 73 rules
14pxline 120% · 60 rules
13pxline 120% · 28 rules
12pxline 120% · 41 rules
10pxline 1 · 11 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

Button

Get started

.Button-hover-content · #FFFFFF · radius 40px

Corner radius

12px · 118×
50% · 52×
40px · 16×
.75rem · 15×
.25em · 10×
10px · 7×

Shadows

0 0 100px #00000040
0 0 6.25rem #00000040
0 0 1.875rem #00000040
0 2px 5px #00000040

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

640

690

760

820

821

1024

1040

1240

On a scale of 0 to 1440 px.

Content widths (max-width)

1200 px

800 px

640 px

480 px

320 px

300 px

Back to top ↑

Notes

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

Notes

● FineThe title is 33 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 rhode use?: rhode’s website uses two typefaces: Swiss (headings and body text), self-hosted; Rektorat Heavy, self-hosted.
What are rhode’s brand colours?: The main colours on rhodeskin.com are Saddle Brown (#643A2A), Fire Brick (#C63931), Red (#E81818), Steel Blue (#007AFF), Midnight Blue (#272D45) and Dark Olive Green (#4F6A46).
What colour is rhode’s text and background?: Body text is #67645E on a #FFFFFF background.
Where is rhode’s logo from?: The logo shown in this guide was found on rhodeskin.com’s homepage. For official logo files and usage rules, check rhode’s own brand or press page.
Is this rhode’s official style guide?: No. SiteStyleGuide made it from rhodeskin.com’s public web pages on 27 October 2026, and isn’t affiliated with rhode. 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

rhodeskin-com-tokens.css

Download

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

/* rhodeskin.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/rhodeskin.com) */
:root {
  /* Colours */
  --text: #67645E;
  --background: #FFFFFF;
  --colour-warm-dark-grey: #67645E;
  --colour-white: #FFFFFF;
  --colour-off-white: #F1F0ED;
  --colour-grey: #84827E;
  --colour-saddle-brown: #643A2A;
  --colour-fire-brick: #C63931;
  --colour-red: #E81818;
  --colour-steel-blue: #007AFF;
  --colour-midnight-blue: #272D45;
  --colour-dark-olive-green: #4F6A46;
  --colour-slate-grey: #676986;
  --gradient-1: linear-gradient(to bottom,#000,#000000bc 19%,#0000008a 34%,#00000061 47%,#00000047 56.5%,#00000031 65%,#00000020 73%,#00000013 80.2%,#0000000b 86.1%,#00000005 91%,#00000002 95.2%,#00000001 98.2%,#0000);
  --gradient-2: linear-gradient(to top,#000,#000000bc 19%,#0000008a 34%,#00000061 47%,#00000047 56.5%,#00000031 65%,#00000020 73%,#00000013 80.2%,#0000000b 86.1%,#00000005 91%,#00000002 95.2%,#00000001 98.2%,#0000);
  --gradient-3: radial-gradient(116.69% 129.41% at 5.22% -15.34%,#84827e,#f1f0ed);

  /* Typefaces */
  --font-headings: 'Swiss', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen-Sans';
  --font-body: 'Swiss', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen-Sans';
  --font-buttons: 'Swiss', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen-Sans';

  /* Type scale */
  --text-h1: 1.5rem;
  --leading-h1: 1.4;
  --text-h2: 1.375rem;
  --leading-h2: 1.4;
  --text-h3: 1.25rem;
  --leading-h3: 1.4;
  --text-h4: 1.125rem;
  --leading-h4: 1.4;
  --text-h5: 1.0625rem;
  --leading-h5: 1.4;
  --text-h6: 1rem;
  --leading-h6: 1.4;
  --text-p: max(.825rem + .2vw,.925vw);
  --leading-p: 150%;
  --text-small: .8125em;
  --text-button: 100%;
  --leading-button: 1;
  --text-a: max(.825rem + .2vw,.925vw);
  --leading-a: 150%;

  /* Shape */
  --radius-1: 12px;
  --radius-2: 50%;
  --radius-3: 40px;
  --radius-4: .75rem;
  --radius-5: .25em;
  --radius-6: 10px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 690px;
  --breakpoint-3: 760px;
  --breakpoint-4: 820px;
  --breakpoint-5: 821px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1040px;
  --breakpoint-8: 1240px;
  --max-width-1: 1200px;
  --max-width-2: 800px;
  --max-width-3: 640px;
  --max-width-4: 480px;
  --max-width-5: 320px;
  --max-width-6: 300px;
}

{
    "site": "rhodeskin.com",
    "source": "https://sitestyleguide.com/rhodeskin.com",
    "text": "#67645E",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Warm Dark Grey",
            "hex": "#67645E",
            "rgb": [
                103,
                100,
                94
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#F1F0ED",
            "rgb": [
                241,
                240,
                237
            ]
        },
        {
            "name": "Grey",
            "hex": "#84827E",
            "rgb": [
                132,
                130,
                126
            ]
        },
        {
            "name": "Saddle Brown",
            "hex": "#643A2A",
            "rgb": [
                100,
                58,
                42
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C63931",
            "rgb": [
                198,
                57,
                49
            ]
        },
        {
            "name": "Red",
            "hex": "#E81818",
            "rgb": [
                232,
                24,
                24
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#007AFF",
            "rgb": [
                0,
                122,
                255
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#272D45",
            "rgb": [
                39,
                45,
                69
            ]
        },
        {
            "name": "Dark Olive Green",
            "hex": "#4F6A46",
            "rgb": [
                79,
                106,
                70
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#676986",
            "rgb": [
                103,
                105,
                134
            ]
        }
    ],
    "fonts": [
        {
            "name": "Swiss",
            "stack": "Swiss, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Rektorat Heavy",
            "stack": "Rektorat Heavy, Swiss, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif",
            "weights": [
                400,
                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 rhodeskin.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/rhodeskin.com" title="rhode 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 ↑

rhodestyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Warm Dark Grey

White

Off White

Grey

Colours

Saddle Brown

Fire Brick

Red

Steel Blue

Midnight Blue

Dark Olive Green

Slate Grey

Gradients

Swiss

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Fume

Maison Les Grands Chênes

New Genre

Lutărie

rhodestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Warm Dark Grey

White

Off White

Grey

Colours

Saddle Brown

Fire Brick

Red

Steel Blue

Midnight Blue

Dark Olive Green

Slate Grey

Gradients

Swiss

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run rhodeskin.com?

Similar colours

Fume

Maison Les Grands Chênes

New Genre

Lutărie

Title &
description