Superside
superside.com · set in Raleway
SaveUnofficial A style guide made by SiteStyleGuide from theordinary.com’s public web pages. Not affiliated with or endorsed by The Ordinary. The real site is theordinary.com ↗
Unofficial style guide
The Ordinarystyle guide
The Ordinary’s website (theordinary.com) uses Raleway for its headings and body text. Its palette is led by Indian Red (#E83F42), Forest Green (#1D8734) and Gold (#FFC107), with #212529 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- theordinary.com
- Typefaces
- Raleway, Geologica, AppleGothic
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://theordinary.com/en-au
Screenshot
theordinary.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- The Ordinary | Clinical Formulations with Integrity
- ● 51 / 60 characters
- Meta description
- The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulations with integrity.
- ● 127 / 160 characters
- og:title
- The Ordinary | Clinical Formulations with Integrity
- og:description
- The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulations with integrity.
- Language
- en
In search results
The Ordinaryhttps://theordinary.com/en-au
The Ordinary | Clinical Formulations with Integrity
The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulations with integrity.
When shared
theordinary.com
The Ordinary | Clinical Formulations with Integrity
The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulatio…
Logo & favicons
Found as: image in the header. SVG, 84 × 31.
Logo
On white
On black
On Indian Red
Favicons
7 found-
256 px · ICO favicon.ico
-
180 px · PNG
apple-touch-icon
-
128 px · SVG
mask-icon
-
96 px · PNG
icon
-
64 px · ICO icon
-
32 px · PNG
icon
-
16 px · PNG
icon
The Ordinary | Clinical Formulations with Integrity
Light browser tab
The Ordinary | Clinical Formulations with Integrity
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 (#212529) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- Black 40.7%
- White 31.4%
- Charcoal 11.1%
- Grey 6.8%
- Indian Red 2.4%
- Forest Green 1.6%
- Gold 1.1%
- Cadet Blue 1.1%
- Fire Brick 0.8%
- Medium Violet Red 0.7%
- Black 0.6%
- Royal Blue 0.6%
- Crimson 0.2%
- Dark Green 0.2%
- Teal 0.2%
- Golden Rod 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-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.36:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · #createAccountModalIncentive .modal-content .modal-body #create-account-form-con, [data-brand=theordinary] .main-menu.menu-toggleable-left .nav-item .dropdown-ite
-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 15.43:1 AAA
- On white
- —
Background, text, border · .teaser-popup-container.teaser-2023 .teaser-popup-body .global-popup-body .slowv, .niod-popup-container .niod-popup-container-content .global-popup-body .niod-pop
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.22:1 Fail
- On white
- 12.63:1 AAA
Text, background, border · .teaser-popup-container.teaser-2023 .teaser-popup-body .teaser-coming-soon .btn-, .recommendations-block .title
-
Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 54
- On text
- 3.35:1 AA large
- On white
- 4.61:1 AA
Text, background, border · .sign-in-modal__form .btn-primary.js-signin-modal-submit:disabled, [data-brand=theordinary] .btn.disabled
Colours
Brand colours and accents, most used first-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 73 72 9
- On text
- 3.84:1 AA large
- On white
- 4.02:1 AA large
Text, border, background · .btn-danger, .btn-danger.disabled
-
Forest Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 79 0 61 47
- On text
- 3.36:1 AA large
- On white
- 4.60:1 AA
Text, background, border · .btn-success, .btn-success.disabled
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 24 97 0
- On text
- 9.46:1 AAA
- On white
- 1.63:1 Fail
Background, text, border · .btn-warning, .btn-warning.disabled
-
Cadet Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 88 12 0 28
- On text
- 5.07:1 AA
- On white
- 3.04:1 AA large
Background, text, border · .btn-info, .btn-info.disabled
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 79 83 30
- On text
- 2.36:1 Fail
- On white
- 6.54:1 AA
Text, border · .cart-recommendations .product .mini-tile .inner .product-prices .price .sales-p, .sign-in-modal .sign-in-modal-error
-
Medium Violet Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 98 30 14
- On text
- 3.33:1 AA large
- On white
- 4.63:1 AA
Text, background, graphic · .japan-selector .edit-link, .promo-trigger:hover .promo-trigger-title
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 47 9 87
- On text
- 1.16:1 Fail
- On white
- 17.88:1 AAA
Text · .cart_empty_wrap-title, .btn-link
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 90 51 0 5
- On text
- 3.64:1 AA large
- On white
- 4.23:1 AA large
Background, text, border · .login-oauth .oauth-facebook.btn:hover, .sign-in-modal .login-oauth .oauth-facebook
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 88 86 15
- On text
- 3.05:1 AA large
- On white
- 5.06:1 AA
Background, border · .btn-danger.focus, .btn-danger:not(:disabled):not(.disabled).active
-
Dark Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 78 0 61 64
- On text
- 1.93:1 Fail
- On white
- 8.01:1 AAA
Background, border · a.bg-success:focus, .btn-success:not(:disabled):not(.disabled).active
-
Teal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 88 12 0 45
- On text
- 3.07:1 AA large
- On white
- 5.02:1 AA
Background, border · a.bg-info:focus, .btn-info:not(:disabled):not(.disabled).active
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 25 100 17
- On text
- 6.36:1 AA
- On white
- 2.42:1 Fail
Background, border · a.bg-warning:focus, .btn-warning:not(:disabled):not(.disabled).active
Gradients
-
linear-gradient(#e1ded9,#e1ded9)
-
linear-gradient(270deg,rgba(0,0,0,.5),transparent)
-
linear-gradient(90deg,rgba(0,0,0,.5),transparent)
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.
Raleway
Aa
100
Aa
800
Raleway
Self-hosted · weights 100, 200, 300, 400, 500, 600, 700, 800 · headings, buttons, body · shown in a stand-in if you don’t have it
Aa
100
Aa
900
Geologica
Self-hosted · weights 100, 150, 300, 350, 400, 500, 600, 700, 800, 900 · headings, buttons · shown in a stand-in if you don’t have it
Aa
100
Aa
700
AppleGothic
System font, or not loaded on this page · weights 100, 300, 400, 500, 600, 700 · headings, 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.5rem · 40 px / 1.2
weight 700 · Raleway
The Ordinary
Heading 2
2rem · 32 px / 1.2
weight 700 · Raleway
The Ordinary | Clinical Formulations with Integ…
Heading 3
1.75rem · 28 px / 1.2
weight 700 · Raleway
The Ordinary | Clinical Formulations with Integ…
Heading 4
1.5rem · 24 px / 1.2
weight 700 · Raleway
The Ordinary | Clinical Formulations with Integ…
Heading 5
1.25rem · 20 px / 1.2
weight 700 · Raleway
The Ordinary | Clinical Formulations with Integ…
Heading 6
1rem · 16 px / 1.2
weight 700 · Raleway
The Ordinary | Clinical Formulations with Integ…
Body
1rem · 16 px / 1.5
weight 400 · Raleway
The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulations with integrity.
Paragraph
1rem · 16 px / 1.485rem
weight 400 · none · Geologica
The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulations with integrity.
Small
.875em · 14 px
weight 400
The Ordinary is your destination for Skincare, Makeup, Hair, and Body solutions. Discover clinical formulations with integrity.
Button
.9375rem · 15 px / 150%
weight 500 · none · Raleway
Get started
Link
16px / 150%
weight 600 · none · Geologica
Read more about The Ordinary
Sizes in use
Most common across the site- 28pxline 120% · 29 rules
- 22pxline 120% · 47 rules
- 20pxline 120% · 40 rules
- 18pxline 22px · 65 rules
- 16pxline 1.5 · 151 rules
- 14pxline 150% · 193 rules
- 13pxline 19.5px · 41 rules
- 12pxline 150% · 165 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
.sign-in-modal__form .btn-primary.js-signin-modal-submit · #333333 · radius 32px
Link
Read our latest news today.
a · #22121F
Corner radius
- 50% · 33×
- .1875rem · 20×
- 110px · 7×
- 1rem · 6×
- 50px · 4×
- 360px · 4×
Shadows
- 0 0 0 0 rgba(29,135,52,.25)
- 0 0 0 0 rgba(232,63,66,.25)
- 0 4px 28px rgba(0,0,0,.12)
- 0 0 0 1px #fff,none
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
375
544
768
1024
1280
1366
1440
1920
On a scale of 0 to 1920 px.
Content widths (max-width)
1920 px
1550 px
1280 px
480 px
400 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 51 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 The Ordinary use?
- The Ordinary’s website uses two typefaces: Raleway (headings and body text), self-hosted; Geologica, self-hosted.
- What are The Ordinary’s brand colours?
- The main colours on theordinary.com are Indian Red (#E83F42), Forest Green (#1D8734), Gold (#FFC107), Cadet Blue (#17A2B8), Fire Brick (#B3261E) and Medium Violet Red (#DC049B).
- What colour is The Ordinary’s text and background?
- Body text is #212529 on a #FFFFFF background.
- Where is The Ordinary’s logo from?
- The logo shown in this guide was found on theordinary.com’s homepage. For official logo files and usage rules, check The Ordinary’s own brand or press page.
- Is this The Ordinary’s official style guide?
- No. SiteStyleGuide made it from theordinary.com’s public web pages on 27 October 2026, and isn’t affiliated with The Ordinary. 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
theordinary-com-tokens.css
/* theordinary.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/theordinary.com) */
:root {
/* Colours */
--text: #212529;
--background: #FFFFFF;
--colour-black: #000000;
--colour-white: #FFFFFF;
--colour-charcoal: #333333;
--colour-grey: #757575;
--colour-indian-red: #E83F42;
--colour-forest-green: #1D8734;
--colour-gold: #FFC107;
--colour-cadet-blue: #17A2B8;
--colour-fire-brick: #B3261E;
--colour-medium-violet-red: #DC049B;
--colour-black-2: #22121F;
--colour-royal-blue: #1877F2;
--colour-crimson: #DA1A1E;
--colour-dark-green: #145D24;
--colour-teal: #117A8B;
--colour-golden-rod: #D39E00;
--gradient-1: linear-gradient(#e1ded9,#e1ded9);
--gradient-2: linear-gradient(270deg,rgba(0,0,0,.5),transparent);
--gradient-3: linear-gradient(90deg,rgba(0,0,0,.5),transparent);
/* Typefaces */
--font-headings: 'Raleway';
--font-buttons: 'Raleway';
--font-body: 'Raleway';
/* Type scale */
--text-h1: 2.5rem;
--leading-h1: 1.2;
--text-h2: 2rem;
--leading-h2: 1.2;
--text-h3: 1.75rem;
--leading-h3: 1.2;
--text-h4: 1.5rem;
--leading-h4: 1.2;
--text-h5: 1.25rem;
--leading-h5: 1.2;
--text-h6: 1rem;
--leading-h6: 1.2;
--text-body: 1rem;
--leading-body: 1.5;
--text-p: 1rem;
--leading-p: 1.485rem;
--text-small: .875em;
--text-button: .9375rem;
--leading-button: 150%;
--text-a: 16px;
--leading-a: 150%;
/* Shape */
--radius-1: 50%;
--radius-2: .1875rem;
--radius-3: 110px;
--radius-4: 1rem;
--radius-5: 50px;
--radius-6: 360px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 375px;
--breakpoint-2: 544px;
--breakpoint-3: 768px;
--breakpoint-4: 1024px;
--breakpoint-5: 1280px;
--breakpoint-6: 1366px;
--breakpoint-7: 1440px;
--breakpoint-8: 1920px;
--max-width-1: 1920px;
--max-width-2: 1550px;
--max-width-3: 1280px;
--max-width-4: 480px;
--max-width-5: 400px;
--max-width-6: 300px;
}
{
"site": "theordinary.com",
"source": "https://sitestyleguide.com/theordinary.com",
"text": "#212529",
"background": "#FFFFFF",
"colours": [
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Grey",
"hex": "#757575",
"rgb": [
117,
117,
117
]
},
{
"name": "Indian Red",
"hex": "#E83F42",
"rgb": [
232,
63,
66
]
},
{
"name": "Forest Green",
"hex": "#1D8734",
"rgb": [
29,
135,
52
]
},
{
"name": "Gold",
"hex": "#FFC107",
"rgb": [
255,
193,
7
]
},
{
"name": "Cadet Blue",
"hex": "#17A2B8",
"rgb": [
23,
162,
184
]
},
{
"name": "Fire Brick",
"hex": "#B3261E",
"rgb": [
179,
38,
30
]
},
{
"name": "Medium Violet Red",
"hex": "#DC049B",
"rgb": [
220,
4,
155
]
},
{
"name": "Black",
"hex": "#22121F",
"rgb": [
34,
18,
31
]
},
{
"name": "Royal Blue",
"hex": "#1877F2",
"rgb": [
24,
119,
242
]
},
{
"name": "Crimson",
"hex": "#DA1A1E",
"rgb": [
218,
26,
30
]
},
{
"name": "Dark Green",
"hex": "#145D24",
"rgb": [
20,
93,
36
]
},
{
"name": "Teal",
"hex": "#117A8B",
"rgb": [
17,
122,
139
]
},
{
"name": "Golden Rod",
"hex": "#D39E00",
"rgb": [
211,
158,
0
]
}
],
"fonts": [
{
"name": "Raleway",
"stack": "Raleway",
"weights": [
100,
200,
300,
400,
500,
600,
700,
800
],
"source": "Self-hosted"
},
{
"name": "Geologica",
"stack": "\"Geologica\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
"weights": [
100,
150,
300,
350,
400,
500,
600,
700,
800,
900
],
"source": "Self-hosted"
},
{
"name": "AppleGothic",
"stack": "serif, AppleGothic, Arial, sans-serif",
"weights": [
100,
300,
400,
500,
600,
700
],
"source": "System font, or not loaded on this page"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run theordinary.com?
Add the badge to your siteLink 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/theordinary.com" title="The Ordinary style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Raleway
Other websites using Raleway as their main typeface
Maps of World
mapsofworld.com · set in Raleway
Save
RecipeTin Eats
recipetineats.com · set in Raleway
Save
Similar colours
Websites whose lead colour is closest to The Ordinary’s
Bustle
bustle.com · 4 days ago
Save
香港專業花式跳繩學校 Hong Kong Rope Skipping Academy
hkrsa.asia · 3 days ago
Save
Refinery29
refinery29.com · 4 days ago
Save
NBC Sports
nbcsports.com · 5 days ago
Save
Captured from theordinary.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by The Ordinary; this guide describes the public website for reference.