rivian.com
rivian.com · set in VideoJS
SaveUnofficial A style guide made by SiteStyleGuide from fortune.com’s public web pages. Not affiliated with or endorsed by Fortune. The real site is fortune.com ↗
Unofficial style guide
Fortunestyle guide
Fortune’s website (fortune.com) uses VideoJS for its headings and body text. Its palette is led by Light Steel Blue (#007B9D), Light Fire Brick (#CF1417) and Sky Blue (#61BED0), with #111111 text on #FFFFFF. Captured from the live site on 2 November 2026.
- Website
- fortune.com
- Typefaces
- VideoJS, Saol Text
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 2 Nov 2026 · added by @sitestyleguide
https://fortune.com/
Screenshot
fortune.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
- Fortune - Fortune 500 Daily & Breaking Business News
- ● 52 / 60 characters
- Meta description
- Unrivaled access, premier storytelling, and the best of business since 1930.
- ● 76 / 160 characters
- Site name
- Fortune
- og:title
- FORTUNE | Fortune
- og:description
- Unrivaled access, premier storytelling, and the best of business since 1930.
- Language
- en
- Theme colour
- #ffffff
In search results
Fortunehttps://fortune.com/
Fortune - Fortune 500 Daily & Breaking Business News
Unrivaled access, premier storytelling, and the best of business since 1930.
When shared
fortune.com
FORTUNE | Fortune
Unrivaled access, premier storytelling, and the best of business since 1930.
Logo & favicons
Found as: SVG in the header. SVG, 382 × 97.
Logo
On white
On black
On Light Steel Blue
Favicons
2 found-
235 px · ICO icon
-
193 px · PNG
apple-touch-icon
Fortune - Fortune 500 Daily & Breaking Business News
Light browser tab
Fortune - Fortune 500 Daily & Breaking Business News
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 (#111111) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 31.9%
- Light Steel Blue 14.7%
- Near Black 11.3%
- Dark Grey 9.4%
- Off White 7.9%
- Light Fire Brick 5.3%
- Sky Blue 3.5%
- Blue 2.7%
- Dark Slate Grey 2.4%
- Light Blue 2.3%
- Deep Fire Brick 1.7%
- Medium Blue 1.5%
- Deep Steel Blue 1.5%
- Light Pink 1.5%
- Medium Slate Blue 1.4%
- Sea Green 1.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
- 18.88:1 AAA
- On white
- —
Text, background, border · .vjs-track-settings-controls button, .button-secondary-disabled
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 93
- On text
- —
- On white
- 18.88:1 AAA
Text, background, border · .\[\&_\*_h6\]\:text-primary * h6, .article-content .product-card-inline-wrapper .card-area-1 .card-title a
-
Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 62
- On text
- 3.10:1 AA large
- On white
- 6.10:1 AA
Text, background, border · .button-text-secondary-disabled, .optimized-table-widget .header-row th:last-child
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 7
- On text
- 16.13:1 AAA
- On white
- 1.17:1 Fail
Background, border, text · .button-secondary, .button-secondary-hover
Colours
Brand colours and accents, most used first-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 22 0 38
- On text
- 3.88:1 AA large
- On white
- 4.86:1 AA
Text, background, border · :is(.article-content .pro-tip-box-widget h3,.article-content .pro-tip-box-widget, .article-content .comparison-table-group-widget h2
-
Light Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 90 89 19
- On text
- 3.39:1 AA large
- On white
- 5.58:1 AA
Background, text, border · .article-content .pros_cons div:nth-child(2) h2:before, #related-articles-modules .heading h2:after
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 53 9 0 18
- On text
- 8.80:1 AAA
- On white
- 2.15:1 Fail
Background, text, border · :is(.article-content .pro-tip-box-widget h3,.article-content .pro-tip-box-widget, .article-content .key-takeaways-widget h3:before:where()
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 76 0 0
- On text
- 2.90:1 Fail
- On white
- 6.51:1 AA
Background, text, border · .button-electric, .bg-blue-1
-
Dark Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 24 0 65
- On text
- 1.77:1 Fail
- On white
- 10.65:1 AAA
Background, text · .button-primary-hover, .button-primary-hover\!
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 30 5 0 12
- On text
- 11.62:1 AAA
- On white
- 1.62:1 Fail
Background, border, text · .button-primary-disabled, .bg-blue-200
-
Deep Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 90 88 30
- On text
- 2.69:1 Fail
- On white
- 7.02:1 AAA
Background, text · .button-accent-hover, .button-accent-hover\!
-
Medium Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 76 0 36
- On text
- 1.68:1 Fail
- On white
- 11.22:1 AAA
Text, background, border · .bg-indigo-700, .bg-dark-blue-700
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 22 0 48
- On text
- 2.98:1 Fail
- On white
- 6.33:1 AA
Background, text, border · .button-primary, .bg-accent-hover
-
Light Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 35 35 0
- On text
- 10.19:1 AAA
- On white
- 1.85:1 Fail
Background · .button-accent-disabled, .bg-\[var\(--company-list-prior-year\,var\(--color-red-200\)\)\]
-
Medium Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 66 62 0 0
- On text
- 4.12:1 AA large
- On white
- 4.58:1 AA
Background · .button-electric:where([data-theme=dark],[data-theme=dark] *), .bg-indigo-400
-
Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 26 48
- On text
- 4.03:1 AA large
- On white
- 4.69:1 AA
Background, text, border · .article-content .pros_cons div:first-child h3:before, .bg-green-500
Gradients
-
linear-gradient(initial)
-
linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.7) 60%,rgba(0,0,0,0))
-
linear-gradient(bottom,rgba(7,20,30,.7) 0,rgba(7,20,30,0) 100%)
Dark mode
Switched on by the site-
Sky Blue
#61BED0
-
Charcoal
#333333
-
Off White
#F8F8F8
-
Dark Grey
#626262
-
Crimson
#ED3C42
-
Steel Blue
#1990AE
-
Near Black
#242424
-
Cornflower Blue
#7D87FF
-
Grey
#9C9C9C
-
Black
#001F2A
-
Near Black
#111111
-
Light Cyan
#D2EFF4
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.
VideoJS
Aa
400
VideoJS
Self-hosted · weights 400 · buttons, headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Saol Text
Self-hosted · weights 400, 600, 700 · 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 / 120%
weight 600
Fortune
Heading 2
1.25rem · 20 px / 130%
weight 600
Fortune - Fortune 500 Daily & Breaking Business…
Heading 3
1.25rem · 20 px / 130%
weight 600
Fortune - Fortune 500 Daily & Breaking Business…
Heading 4
1.125rem · 18 px / 130%
weight 600
Fortune - Fortune 500 Daily & Breaking Business…
Heading 5
1.125rem · 18 px / 140%
weight 600 · uppercase
Fortune - Fortune 500 Daily & Breaking Business…
Heading 6
1rem · 16 px / 140%
weight 600
Fortune - Fortune 500 Daily & Breaking Business…
Paragraph
1.125rem · 18 px / 140%
weight 400 · none
Unrivaled access, premier storytelling, and the best of business since 1930.
Small
80%
Unrivaled access, premier storytelling, and the best of business since 1930.
Link
1.125rem · 18 px / 140%
weight 500
Read more about Fortune
Sizes in use
Most common across the site- 32pxline 120% · 4 rules
- 28pxline 120% · 4 rules
- 24pxline 120% · 16 rules
- 20pxline 130% · 19 rules
- 18pxline 140% · 24 rules
- 16pxline 140% · 44 rules
- 14pxline 140% · 35 rules
- 12pxline 140% · 15 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
.button-primary · #006885
Corner radius
- 3.40282e+38px · 7×
- 4px · 5×
- 8px · 4×
- inherit · 3×
- 50% · 3×
- .3em · 3×
Shadows
- 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
- 0 0 0 1px ,0 3px 0
- 0 0 0 1px #00000040
- 0 0 1em #fff
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
360
767
768
769
1025
1280
1440
1900
On a scale of 0 to 1900 px.
Content widths (max-width)
1440 px
1280 px
768 px
745 px
420 px
360 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 52 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 Fortune use?
- Fortune’s website uses two typefaces: VideoJS (headings and body text), self-hosted; Saol Text, self-hosted.
- What are Fortune’s brand colours?
- The main colours on fortune.com are Light Steel Blue (#007B9D), Light Fire Brick (#CF1417), Sky Blue (#61BED0), Blue (#2E3DFF), Dark Slate Grey (#004459) and Light Blue (#9DD4E0).
- What colour is Fortune’s text and background?
- Body text is #111111 on a #FFFFFF background.
- Where is Fortune’s logo from?
- The logo shown in this guide was found on fortune.com’s homepage. For official logo files and usage rules, check Fortune’s own brand or press page.
- Is this Fortune’s official style guide?
- No. SiteStyleGuide made it from fortune.com’s public web pages on 2 November 2026, and isn’t affiliated with Fortune. 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
fortune-com-tokens.css
/* fortune.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/fortune.com) */
:root {
/* Colours */
--text: #111111;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-near-black: #111111;
--colour-dark-grey: #626262;
--colour-off-white: #EDEDED;
--colour-light-steel-blue: #007B9D;
--colour-light-fire-brick: #CF1417;
--colour-sky-blue: #61BED0;
--colour-blue: #2E3DFF;
--colour-dark-slate-grey: #004459;
--colour-light-blue: #9DD4E0;
--colour-deep-fire-brick: #B21215;
--colour-medium-blue: #1D27A3;
--colour-deep-steel-blue: #006885;
--colour-light-pink: #FFA7A7;
--colour-medium-slate-blue: #5662FF;
--colour-sea-green: #008462;
--gradient-1: linear-gradient(initial);
--gradient-2: linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.7) 60%,rgba(0,0,0,0));
--gradient-3: linear-gradient(bottom,rgba(7,20,30,.7) 0,rgba(7,20,30,0) 100%);
/* Typefaces */
--font-buttons: 'VideoJS';
--font-headings: 'VideoJS';
--font-other: 'Saol Text';
/* Type scale */
--text-h1: 1.5rem;
--leading-h1: 120%;
--text-h2: 1.25rem;
--leading-h2: 130%;
--text-h3: 1.25rem;
--leading-h3: 130%;
--text-h4: 1.125rem;
--leading-h4: 130%;
--text-h5: 1.125rem;
--leading-h5: 140%;
--text-h6: 1rem;
--leading-h6: 140%;
--text-p: 1.125rem;
--leading-p: 140%;
--text-small: 80%;
--text-a: 1.125rem;
--leading-a: 140%;
/* Shape */
--radius-1: 3.40282e+38px;
--radius-2: 4px;
--radius-3: 8px;
--radius-4: inherit;
--radius-5: 50%;
--radius-6: .3em;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 360px;
--breakpoint-2: 767px;
--breakpoint-3: 768px;
--breakpoint-4: 769px;
--breakpoint-5: 1025px;
--breakpoint-6: 1280px;
--breakpoint-7: 1440px;
--breakpoint-8: 1900px;
--max-width-1: 1440px;
--max-width-2: 1280px;
--max-width-3: 768px;
--max-width-4: 745px;
--max-width-5: 420px;
--max-width-6: 360px;
}
{
"site": "fortune.com",
"source": "https://sitestyleguide.com/fortune.com",
"text": "#111111",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#111111",
"rgb": [
17,
17,
17
]
},
{
"name": "Dark Grey",
"hex": "#626262",
"rgb": [
98,
98,
98
]
},
{
"name": "Off White",
"hex": "#EDEDED",
"rgb": [
237,
237,
237
]
},
{
"name": "Light Steel Blue",
"hex": "#007B9D",
"rgb": [
0,
123,
157
]
},
{
"name": "Light Fire Brick",
"hex": "#CF1417",
"rgb": [
207,
20,
23
]
},
{
"name": "Sky Blue",
"hex": "#61BED0",
"rgb": [
97,
190,
208
]
},
{
"name": "Blue",
"hex": "#2E3DFF",
"rgb": [
46,
61,
255
]
},
{
"name": "Dark Slate Grey",
"hex": "#004459",
"rgb": [
0,
68,
89
]
},
{
"name": "Light Blue",
"hex": "#9DD4E0",
"rgb": [
157,
212,
224
]
},
{
"name": "Deep Fire Brick",
"hex": "#B21215",
"rgb": [
178,
18,
21
]
},
{
"name": "Medium Blue",
"hex": "#1D27A3",
"rgb": [
29,
39,
163
]
},
{
"name": "Deep Steel Blue",
"hex": "#006885",
"rgb": [
0,
104,
133
]
},
{
"name": "Light Pink",
"hex": "#FFA7A7",
"rgb": [
255,
167,
167
]
},
{
"name": "Medium Slate Blue",
"hex": "#5662FF",
"rgb": [
86,
98,
255
]
},
{
"name": "Sea Green",
"hex": "#008462",
"rgb": [
0,
132,
98
]
}
],
"fonts": [
{
"name": "VideoJS",
"stack": "VideoJS",
"weights": [
400
],
"source": "Self-hosted"
},
{
"name": "Saol Text",
"stack": "'Saol Text'",
"weights": [
400,
600,
700
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run fortune.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/fortune.com" title="Fortune 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 VideoJS
Other websites using VideoJS as their main typeface
Similar colours
Websites whose lead colour is closest to Fortune’s
orbitz
orbitz.com · 4 days ago
Save
The Library of Congress
loc.gov · 2 days ago
Save
Discovery
discovery.com · 1 day ago
Save
The Denver Post
denverpost.com · 4 days ago
Save
Captured from fortune.com on 2 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Fortune; this guide describes the public website for reference.