Savvy Savers
savvysavers.com.au · set in Open Sans
Save1Unofficial A style guide made by SiteStyleGuide from nintendo.com’s public web pages. Not affiliated with or endorsed by Nintendo. The real site is nintendo.com ↗
Unofficial style guide
Nintendostyle guide
Nintendo’s website (nintendo.com) uses Open Sans for its headings and body text. Its palette is led by Red (#E60012), Fire Brick (#B8000E) and Light Sea Green (#3EB6A0), with #3C3C3C text on #FFFFFF. Captured from the live site on 26 October 2026.
- Website
- nintendo.com
- Typefaces
- Open Sans, Geologica
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 26 Oct 2026 · added by @sitestyleguide
https://www.nintendo.com/au/
Screenshot
nintendo.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
- Nintendo - Official Site - Video Game Consoles, Games
- ● 53 / 60 characters
- Meta description
- Discover Nintendo Switch, the video game system you can play at home or on the go. Plus, get the latest games and news on the official Nintendo site.
- ● 149 / 160 characters
- og:title
- Nintendo - Official Site - Video Game Consoles, Games
- og:description
- Discover Nintendo Switch, the video game system you can play at home or on the go. Plus, get the latest games and news on the official Nintendo site.
- Language
- en-AU
In search results
Nintendohttps://www.nintendo.com/au/
Nintendo - Official Site - Video Game Consoles, Games
Discover Nintendo Switch, the video game system you can play at home or on the go. Plus, get the latest games and news on the official Nintendo site.
When shared
nintendo.com
Nintendo - Official Site - Video Game Consoles, Games
Discover Nintendo Switch, the video game system you can play at home or on the go. Plus, get the latest games…
Logo & favicons
Found as: image in the header. SVG, 114 × 28.
Logo
On white
On black
On Red
Favicons
2 found-
180 px · PNG
apple-touch-icon
-
Nintendo - Official Site - Video Game Consoles, Games
Light browser tab
Nintendo - Official Site - Video Game Consoles, Games
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 (#3C3C3C) 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.1%
- Red 16.3%
- Deep Off White 9.9%
- Black 8.8%
- Fire Brick 7.4%
- Light Off White 3.8%
- Light Sea Green 1.7%
- Lime 1.1%
- Steel Blue 1.1%
- Chocolate 1%
- Yellow 0.8%
- Sky Blue 0.6%
- Pink 0.6%
- Dodger Blue 0.6%
- Light Golden Rod Yellow 0.6%
- Yellow Green 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
- 11.03:1 AAA
- On white
- —
Text, background, border · .features-module-scss-module__i0zNZq__featuresPage .features-module-scss-module_, .ns2-edition-module-scss-module__YICZJa__ns2EditionsPage .ns2-edition-module-scs
-
Deep Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 15
- On text
- 7.89:1 AAA
- On white
- 1.40:1 Fail
Border, text, background · .btn-skin-primary.disabled, .btn-skin-primary-grey.disabled
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.90:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · .custom-module-scss-module__iMAfpG__key-info--location, .custom-module-scss-module__fCjORq__key-info--location
-
Light Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 6
- On text
- 9.59:1 AAA
- On white
- 1.15:1 Fail
Background, border, text · .btn-skin-primary-grey, .header .header-mobile-menu-btn
Colours
Brand colours and accents, most used first-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 92 10
- On text
- 2.30:1 Fail
- On white
- 4.80:1 AA
Text, background, border · --base-colour-red, .btn-skin-primary
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 92 28
- On text
- 1.60:1 Fail
- On white
- 6.90:1 AA
Text, background, border · --base-colour-dark-red, .features-module-scss-module__i0zNZq__featuresPage .features-module-scss-module_
-
Light Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 66 0 12 29
- On text
- 4.41:1 AA large
- On white
- 2.50:1 Fail
Text · .article-card .article-card-title mark, .game-card .game-card-title mark
-
Lime
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 100 0
- On text
- 8.04:1 AAA
- On white
- 1.37:1 Fail
Used · --background
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 52 0 0
- On text
- 2.75:1 Fail
- On white
- 4.02:1 AA large
Background, text, border · .swiper-pagination-bullet-active, .swiper-pagination-progressbar .swiper-pagination-progressbar-fill
-
Chocolate
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 50 100 10
- On text
- 3.54:1 AA large
- On white
- 3.12:1 AA large
Background · --base-colours-orange, .custom-module-scss-module__iMAfpG__whats-on--tournaments>div:before
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 1 0 89 3
- On text
- 9.63:1 AAA
- On white
- 1.15:1 Fail
Used · --component-foreground-accent-yellow, --menu-text
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 11 0 0
- On text
- 7.20:1 AAA
- On white
- 1.53:1 Fail
Text, background, border · .movie-module-scss-module__eNI2Wq__modal .movie-module-scss-module__eNI2Wq__cast, .movie-module-scss-module__eNI2Wq__modal .movie-module-scss-module__eNI2Wq__grid
-
Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 17 17 2
- On text
- 7.83:1 AAA
- On white
- 1.41:1 Fail
Background · --base-colours-red-light, .custom-module-scss-module__iMAfpG__intro--box
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 68 29 0 13
- On text
- 3.83:1 AA large
- On white
- 2.88:1 Fail
Background · --base-colours-blue, .custom-module-scss-module__iMAfpG__whats-on--games>div:before
-
Light Golden Rod Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 6 0 13 5
- On text
- 9.42:1 AAA
- On white
- 1.17:1 Fail
Background · --base-colours-green-light, .custom-module-scss-module__iMAfpG__whats-on--live-stage>div
-
Yellow Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 37 0 83 25
- On text
- 4.82:1 AA
- On white
- 2.29:1 Fail
Background · --base-colours-green, .custom-module-scss-module__iMAfpG__whats-on--live-stage>div:before
Gradients
-
linear-gradient(90deg,#0000,#000000b3,#0000)
-
linear-gradient(270deg,#00000080,#0000)
-
linear-gradient(90deg,#00000080,#0000)
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.
Open Sans
Aa
300
Aa
800
Open Sans
Self-hosted · weights 300, 600, 800 · shown in a stand-in if you don’t have it
Aa
900
Geologica
Google Fonts · weights 900
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
21px / 29.4px
weight 600
Nintendo
Heading 2
38px / 53.2px
weight 600
Nintendo - Official Site - Video Game Consoles,…
Heading 3
1rem · 16 px / 29.4px
weight 700 · uppercase
Nintendo - Official Site - Video Game Consoles,…
Heading 4
18px / 25.2px
weight 600
Nintendo - Official Site - Video Game Consoles,…
Heading 5
12px / 16.8px
weight 300
Nintendo - Official Site - Video Game Consoles,…
Heading 6
1rem · 16 px / 1.25
weight 600
Nintendo - Official Site - Video Game Consoles,…
Paragraph
14px / 19.6px
weight 600
Discover Nintendo Switch, the video game system you can play at home or on the go. Plus, get the latest games and news on the official Nint…
Small
80%
Discover Nintendo Switch, the video game system you can play at home or on the go. Plus, get the latest games and news on the official Nint…
Button
100%
none
Get started
Link
14px / 19.6px
weight 600
Read more about Nintendo
Sizes in use
Most common across the site- 30pxline 1.15 · 21 rules
- 26pxline 1.15 · 38 rules
- 20pxline 1.15 · 57 rules
- 18pxline 1.25 · 70 rules
- 16pxline 1.6 · 187 rules
- 14pxline 1.25 · 238 rules
- 12pxline 1.25 · 96 rules
- 10pxline 1.25 · 24 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
.btn-skin-primary · #E60012 · radius 9999px
Corner radius
- 50% · 37×
- 12px · 21×
- .25rem · 18×
- 9999px · 18×
- 8px · 15×
Shadows
- 0 0 #0000, 0 0 #0000, 0 0 #0000
- 0 4px 16px #0000001a
- 0 1px 4px #00000014,0 6px 16px #0000001f
- 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
576
767
768
1023
1024
1280
1440
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1280 px
1080 px
1024 px
768 px
700 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 53 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 Nintendo use?
- Nintendo’s website uses two typefaces: Open Sans (headings and body text), self-hosted; Geologica, google Fonts.
- What are Nintendo’s brand colours?
- The main colours on nintendo.com are Red (#E60012), Fire Brick (#B8000E), Light Sea Green (#3EB6A0), Lime (#00FF00), Steel Blue (#007AFF) and Chocolate (#E57200).
- What colour is Nintendo’s text and background?
- Body text is #3C3C3C on a #FFFFFF background.
- Where is Nintendo’s logo from?
- The logo shown in this guide was found on nintendo.com’s homepage. For official logo files and usage rules, check Nintendo’s own brand or press page.
- Is this Nintendo’s official style guide?
- No. SiteStyleGuide made it from nintendo.com’s public web pages on 26 October 2026, and isn’t affiliated with Nintendo. 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
nintendo-com-tokens.css
/* nintendo.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/nintendo.com) */
:root {
/* Colours */
--text: #3C3C3C;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-deep-off-white: #DADADA;
--colour-black: #000000;
--colour-light-off-white: #EFEFEF;
--colour-red: #E60012;
--colour-fire-brick: #B8000E;
--colour-light-sea-green: #3EB6A0;
--colour-lime: #00FF00;
--colour-steel-blue: #007AFF;
--colour-chocolate: #E57200;
--colour-yellow: #F5F81C;
--colour-sky-blue: #47E3FF;
--colour-pink: #FACFD0;
--colour-dodger-blue: #489FDF;
--colour-light-golden-rod-yellow: #E4F2D2;
--colour-yellow-green: #78BE20;
--gradient-1: linear-gradient(90deg,#0000,#000000b3,#0000);
--gradient-2: linear-gradient(270deg,#00000080,#0000);
--gradient-3: linear-gradient(90deg,#00000080,#0000);
/* Typefaces */
--font-other: 'Open Sans', sans-serif;
/* Type scale */
--text-h1: 21px;
--leading-h1: 29.4px;
--text-h2: 38px;
--leading-h2: 53.2px;
--text-h3: 1rem;
--leading-h3: 29.4px;
--text-h4: 18px;
--leading-h4: 25.2px;
--text-h5: 12px;
--leading-h5: 16.8px;
--text-h6: 1rem;
--leading-h6: 1.25;
--text-p: 14px;
--leading-p: 19.6px;
--text-small: 80%;
--text-button: 100%;
--text-a: 14px;
--leading-a: 19.6px;
/* Shape */
--radius-1: 50%;
--radius-2: 12px;
--radius-3: .25rem;
--radius-4: 9999px;
--radius-5: 8px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 320px;
--breakpoint-2: 576px;
--breakpoint-3: 767px;
--breakpoint-4: 768px;
--breakpoint-5: 1023px;
--breakpoint-6: 1024px;
--breakpoint-7: 1280px;
--breakpoint-8: 1440px;
--max-width-1: 1440px;
--max-width-2: 1280px;
--max-width-3: 1080px;
--max-width-4: 1024px;
--max-width-5: 768px;
--max-width-6: 700px;
}
{
"site": "nintendo.com",
"source": "https://sitestyleguide.com/nintendo.com",
"text": "#3C3C3C",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Deep Off White",
"hex": "#DADADA",
"rgb": [
218,
218,
218
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Light Off White",
"hex": "#EFEFEF",
"rgb": [
239,
239,
239
]
},
{
"name": "Red",
"hex": "#E60012",
"rgb": [
230,
0,
18
]
},
{
"name": "Fire Brick",
"hex": "#B8000E",
"rgb": [
184,
0,
14
]
},
{
"name": "Light Sea Green",
"hex": "#3EB6A0",
"rgb": [
62,
182,
160
]
},
{
"name": "Lime",
"hex": "#00FF00",
"rgb": [
0,
255,
0
]
},
{
"name": "Steel Blue",
"hex": "#007AFF",
"rgb": [
0,
122,
255
]
},
{
"name": "Chocolate",
"hex": "#E57200",
"rgb": [
229,
114,
0
]
},
{
"name": "Yellow",
"hex": "#F5F81C",
"rgb": [
245,
248,
28
]
},
{
"name": "Sky Blue",
"hex": "#47E3FF",
"rgb": [
71,
227,
255
]
},
{
"name": "Pink",
"hex": "#FACFD0",
"rgb": [
250,
207,
208
]
},
{
"name": "Dodger Blue",
"hex": "#489FDF",
"rgb": [
72,
159,
223
]
},
{
"name": "Light Golden Rod Yellow",
"hex": "#E4F2D2",
"rgb": [
228,
242,
210
]
},
{
"name": "Yellow Green",
"hex": "#78BE20",
"rgb": [
120,
190,
32
]
}
],
"fonts": [
{
"name": "Open Sans",
"stack": "Open Sans, sans-serif",
"weights": [
300,
600,
800
],
"source": "Self-hosted"
},
{
"name": "Geologica",
"stack": "Geologica, Open Sans, sans-serif",
"weights": [
900
],
"source": "Google Fonts"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run nintendo.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/nintendo.com" title="Nintendo 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 Open Sans
Other websites using Open Sans as their main typeface
Similar colours
Websites whose lead colour is closest to Nintendo’s
BuildYourBzns
buildyourbzns.com · 5 days ago
Save
Univision
univision.com · 3 days ago
Save
Vanity Fair
vanityfair.com · 4 days ago
Save
NME
nme.com · 5 days ago
Save
Captured from nintendo.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Nintendo; this guide describes the public website for reference.