W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Nintendo
Nintendo Co., Ltd. is the Kyoto-headquartered Japanese consumer electronics and video-game company behind the Switch / Switch 2 consoles, the Mario, Zelda, Pokémon, Animal Crossing, and Splatoon franchises, and the Nintendo eShop digital storefront. The brand voice is family-friendly, playful, and quietly proprietary — long-running IP custody combined with restrained visual identity. Visually, Nintendo is light-first by construction: a white page canvas with the iconic Nintendo Red (#E60012) as the primary action color, a deep navy (#3946A0) as the secondary, and a charcoal-on-paper neutral type ramp. The documented description-tag accents (violet, green, blue, red, charcoal) provide category badging without overwhelming the restrained chrome. Typography is the Geologica Variable family (open-source via Google Fonts), declared on the live site as --theme-font-family.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/nintendo/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/nintendo/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Nintendo
Nintendo Co., Ltd. is the Kyoto-headquartered Japanese consumer electronics and video-game company behind the Switch / Switch 2 consoles, the Mario, Zelda, Pokémon, Animal Crossing, and Splatoon franchises, and the Nintendo eShop digital storefront. The brand voice is family-friendly, playful, and quietly proprietary — long-running IP custody combined with restrained visual identity. Visually, Nintendo is light-first by construction: a white page canvas with the iconic Nintendo Red (#E60012) as the primary action color, a deep navy (#3946A0) as the secondary, and a charcoal-on-paper neutral type ramp. The documented description-tag accents (violet, green, blue, red, charcoal) provide category badging without overwhelming the restrained chrome. Typography is the Geologica Variable family (open-source via Google Fonts), declared on the live site as --theme-font-family.
Tags: nintendo, gaming, red, light-first, japanese, family-friendly
Atoms
Palette
Nintendo · [email protected] · Proprietary — All Rights Reserved
Nintendo's brand palette as captured from the live nintendo.com design-system tokens (--theme-color-primary, --theme-color- secondary, --theme-colors-text-, --theme-color-darkGray, --theme-color-lightGray*, --theme-colors-descriptionTag-*). The brand is light-first by construction: a white page canvas with the iconic Nintendo Red (#E60012) as the primary accent and a deep navy (#3946A0) as the secondary action. A calibrated neutral ramp from #242424 darkest through #F8F8F8 lightest carries body text, surfaces, and quiet UI chrome. The four "description tag" accents (violet #9531B9, green #2D8513, blue #4B5CCE, red #E60012, charcoal #484848) are the brand's documented secondary palette for product category badging.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
nintendo-red |
Nintendo Red | #E60012 |
nintendo-red-hover |
Nintendo Red Hover | #AC000D |
nintendo-red-light |
Nintendo Red Light | #FDE6E7 |
nintendo-navy |
Nintendo Navy | #3946A0 |
nintendo-navy-hover |
Nintendo Navy Hover | #2A3477 |
nintendo-navy-light |
Nintendo Navy Light | #BDC3E8 |
charcoal |
Charcoal | #484848 |
charcoal-dark |
Charcoal Dark | #242424 |
charcoal-mid |
Charcoal Mid | #727272 |
charcoal-light |
Charcoal Light | #969696 |
cloud-dark |
Cloud Dark | #C8C8C8 |
cloud |
Cloud | #DADADA |
cloud-light |
Cloud Light | #EFEFEF |
cloud-lightest |
Cloud Lightest | #F8F8F8 |
paper |
Paper | #FFFFFF |
tag-green |
Tag Green | #2D8513 |
tag-violet |
Tag Violet | #9531B9 |
tag-blue |
Tag Blue | #4B5CCE |
tag-yellow |
Tag Yellow | #BEA000 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
paper |
#FFFFFF |
surface |
cloud-lightest |
#F8F8F8 |
surface-elevated |
paper |
#FFFFFF |
text-primary |
charcoal |
#484848 |
text-secondary |
charcoal-mid |
#727272 |
text-tertiary |
charcoal-light |
#969696 |
primary |
nintendo-red |
#E60012 |
primary-hover |
nintendo-red-hover |
#AC000D |
accent |
nintendo-navy |
#3946A0 |
accent-hover |
nintendo-navy-hover |
#2A3477 |
warning |
tag-yellow |
#BEA000 |
warning-hover |
tag-yellow |
#BEA000 |
error |
nintendo-red |
#E60012 |
success |
tag-green |
#2D8513 |
border |
cloud |
#DADADA |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
charcoal-dark |
#242424 |
surface |
charcoal |
#484848 |
surface-elevated |
charcoal-mid |
#727272 |
text-primary |
paper |
#FFFFFF |
text-secondary |
cloud |
#DADADA |
text-tertiary |
cloud-dark |
#C8C8C8 |
primary |
nintendo-red |
#E60012 |
primary-hover |
nintendo-red-light |
#FDE6E7 |
accent |
nintendo-navy-light |
#BDC3E8 |
accent-hover |
nintendo-navy |
#3946A0 |
warning |
tag-yellow |
#BEA000 |
warning-hover |
tag-yellow |
#BEA000 |
error |
nintendo-red |
#E60012 |
success |
tag-green |
#2D8513 |
border |
charcoal-mid |
#727272 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
paper |
#FFFFFF |
on-identity |
nintendo-red |
#E60012 |
primary |
nintendo-red |
#E60012 |
primary-hover |
nintendo-red-hover |
#AC000D |
accent |
nintendo-navy |
#3946A0 |
accent-hover |
nintendo-navy-hover |
#2A3477 |
mark |
nintendo-red |
#E60012 |
success |
tag-green |
#2D8513 |
warning |
tag-yellow |
#BEA000 |
error |
nintendo-red |
#E60012 |
text-primary-light |
charcoal |
#484848 |
text-primary-dark |
paper |
#FFFFFF |
background-light |
paper |
#FFFFFF |
background-dark |
charcoal-dark |
#242424 |
surface-light |
cloud-lightest |
#F8F8F8 |
surface-dark |
charcoal |
#484848 |
text-secondary-light |
charcoal-mid |
#727272 |
text-tertiary-light |
charcoal-light |
#969696 |
border-light |
cloud |
#DADADA |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → roles.colors.mark
- allowed: nintendo-red, paper, charcoal-dark
- forbidden: nintendo-navy, tag-violet, tag-green, tag-blue, tag-yellow
The Nintendo wordmark renders in Nintendo Red (#E60012) on light surfaces, white on dark surfaces, and pure black for monochrome contexts. The description-tag accents (violet, green, blue, yellow) are category badging affordances, not identity colors; substituting them for the mark fill misrepresents the brand.
colorChoice → roles.colors.primary
- allowed: nintendo-red, nintendo-red-hover
- forbidden: nintendo-navy, tag-green, tag-blue, tag-violet, tag-yellow
Nintendo Red (#E60012) is the documented primary action color — --theme-color-primary and --theme-colors-button- background-primary on the live site. Nintendo Navy is the secondary (--theme-color-secondary) — substituting navy or any of the description-tag accents for the primary action inverts the brand's documented action hierarchy.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted
Nintendo's wordmark is a fixed-proportion identity that appears on the live site in solid Nintendo Red on white and solid white on dark — with no shadow, gradient, or texture treatments. Skewing, rotating, gradient-filling, drop-shadowing, or placing the mark on a busy photo conflicts with the brand's quietly proprietary identity and Nintendo's partner-portal usage restrictions.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Charcoal (#484848) on Paper (#FFFFFF) measures ~8.4:1 — clears WCAG AA comfortably for body text and sits inside the AAA band for normal-weight text. Nintendo's family- friendly consumer audience justifies a comfortable contrast floor.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Nintendo's consumer audience (which includes children) and the dense product-listing surfaces (game titles, pricing, age ratings) make AA the baseline contrast requirement; the charcoal-on-paper pairing clears it comfortably.
⚠️ warning (2)
contextRestriction → roles.colors.primary
- forbiddenContexts: background, large-surface, prose
- allowedContexts: primary-cta, mark, inline-link, error-state
Nintendo Red is a focal accent — it appears as the mark fill, primary CTA, inline link, and (notably) the error / alert icon. The brand deliberately avoids large red surfaces in product chrome; that role is held by the paper / charcoal neutrals. A red page background or red body-prose treatment reads as a sale-page promotional surface, not as the parent Nintendo identity.
enumMembership → typography.heading.fontWeight
- allowed: 300, 400, 600
Nintendo's live design system declares Light (300), Regular (400), and Bold (600) — --theme-font-weight-light and --theme-font-weight-bold are explicit, with regular as the implicit default. Heavier display weights are not in the deployed variable-font cut.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: paper, cloud-lightest, charcoal-dark, nintendo-red-light
- doesNotPairWith: tag-violet, tag-blue, tag-yellow
Nintendo Red reads cleanest against the paper canvas, the cloud-lightest surface, or the charcoal-dark inverse. The description-tag accents (violet, blue, yellow) introduce chromatic conflict when placed directly adjacent to the red primary; the live site separates them with neutral surfaces.
Provenance
- Source: https://www.nintendo.com/
- License:
Proprietary — All Rights Reserved - Attribution: Nintendo Co., Ltd. / Nintendo of America Inc. — visual identity captured from the deployed stylesheet on nintendo.com (--theme-color-, --theme-colors-button-, --theme-font-* design-token families declared under the "Nintendo Light Theme"). Nintendo, the Nintendo logo, Switch, Mario, Zelda, Pokémon, Animal Crossing, Splatoon, and associated marks are trademarks of Nintendo Co., Ltd.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.nintendo.com/ on 2026-05-19; Nintendo's published brand-guidelines documents are partner-portal-only and not publicly accessible. The captured tokens come from a deployed design-system theme declared as "Nintendo Light Theme" (--theme-name, --theme- status: approved). The display typeface is Geologica Variable (open-source via Google Fonts) declared as --theme-font-family — this atom references inter@1 as the open-source rendering substitute because no
geologicaatom exists in this catalog yet. assets: [] per the encyclopedia's trademark-redistribution policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Nintendo
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Nintendo
A clear hierarchy in Nintendo's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ nintendo-navy #3946A0 accent-hover
→ nintendo-navy-hover #2A3477 background-dark
→ charcoal-dark #242424 background-light
→ paper #FFFFFF border-light
→ cloud #DADADA error
→ nintendo-red #E60012 identity
→ paper #FFFFFF mark
→ nintendo-red #E60012 on-identity
→ nintendo-red #E60012 primary
→ nintendo-red #E60012 primary-hover
→ nintendo-red-hover #AC000D success
→ tag-green #2D8513 surface-dark
→ charcoal #484848 surface-light
→ cloud-lightest #F8F8F8 text-primary-dark
→ paper #FFFFFF text-primary-light
→ charcoal #484848 text-secondary-light
→ charcoal-mid #727272 text-tertiary-light
→ charcoal-light #969696 warning
→ tag-yellow #BEA000 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from nintendo)
Light mode (15 roles)
accent
→ nintendo-navy accent-hover
→ nintendo-navy-hover background
→ paper border
→ cloud error
→ nintendo-red primary
→ nintendo-red primary-hover
→ nintendo-red-hover success
→ tag-green surface
→ cloud-lightest surface-elevated
→ paper text-primary
→ charcoal text-secondary
→ charcoal-mid text-tertiary
→ charcoal-light warning
→ tag-yellow warning-hover
→ tag-yellow Dark mode (15 roles)
accent
→ nintendo-navy-light accent-hover
→ nintendo-navy background
→ charcoal-dark border
→ charcoal-mid error
→ nintendo-red primary
→ nintendo-red primary-hover
→ nintendo-red-light success
→ tag-green surface
→ charcoal surface-elevated
→ charcoal-mid text-primary
→ paper text-secondary
→ cloud text-tertiary
→ cloud-dark warning
→ tag-yellow warning-hover
→ tag-yellow Rules (8 typed constraints)
error · 5 rules
colorChoice roles.colors.mark allowed nintendo-red, paper, charcoal-dark forbidden nintendo-navy, tag-violet, tag-green, tag-blue, tag-yellow The Nintendo wordmark renders in Nintendo Red (#E60012) on light surfaces, white on dark surfaces, and pure black for monochrome contexts. The description-tag accents (violet, green, blue, yellow) are category badging affordances, not identity colors; substituting them for the mark fill misrepresents the brand.
colorChoice roles.colors.primary allowed nintendo-red, nintendo-red-hover forbidden nintendo-navy, tag-green, tag-blue, tag-violet, tag-yellow Nintendo Red (#E60012) is the documented primary action color — --theme-color-primary and --theme-colors-button- background-primary on the live site. Nintendo Navy is the *secondary* (--theme-color-secondary) — substituting navy or any of the description-tag accents for the primary action inverts the brand's documented action hierarchy.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted Nintendo's wordmark is a fixed-proportion identity that appears on the live site in solid Nintendo Red on white and solid white on dark — with no shadow, gradient, or texture treatments. Skewing, rotating, gradient-filling, drop-shadowing, or placing the mark on a busy photo conflicts with the brand's quietly proprietary identity and Nintendo's partner-portal usage restrictions.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Charcoal (#484848) on Paper (#FFFFFF) measures ~8.4:1 — clears WCAG AA comfortably for body text and sits inside the AAA band for normal-weight text. Nintendo's family- friendly consumer audience justifies a comfortable contrast floor.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Nintendo's consumer audience (which includes children) and the dense product-listing surfaces (game titles, pricing, age ratings) make AA the baseline contrast requirement; the charcoal-on-paper pairing clears it comfortably.
warning · 2 rules
contextRestriction roles.colors.primary forbiddenContexts background, large-surface, prose allowedContexts primary-cta, mark, inline-link, error-state Nintendo Red is a focal accent — it appears as the mark fill, primary CTA, inline link, and (notably) the error / alert icon. The brand deliberately avoids large red surfaces in product chrome; that role is held by the paper / charcoal neutrals. A red page background or red body-prose treatment reads as a sale-page promotional surface, not as the parent Nintendo identity.
enumMembership typography.heading.fontWeight allowed 300, 400, 600 Nintendo's live design system declares Light (300), Regular (400), and Bold (600) — --theme-font-weight-light and --theme-font-weight-bold are explicit, with regular as the implicit default. Heavier display weights are not in the deployed variable-font cut.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith paper, cloud-lightest, charcoal-dark, nintendo-red-light doesNotPairWith tag-violet, tag-blue, tag-yellow Nintendo Red reads cleanest against the paper canvas, the cloud-lightest surface, or the charcoal-dark inverse. The description-tag accents (violet, blue, yellow) introduce chromatic conflict when placed directly adjacent to the red primary; the live site separates them with neutral surfaces.
Provenance
- Source
- https://www.nintendo.com/
- License
Proprietary — All Rights Reserved- Attribution
- Nintendo Co., Ltd. / Nintendo of America Inc. — visual identity captured from the deployed stylesheet on nintendo.com (--theme-color-*, --theme-colors-button-*, --theme-font-* design-token families declared under the "Nintendo Light Theme"). Nintendo, the Nintendo logo, Switch, Mario, Zelda, Pokémon, Animal Crossing, Splatoon, and associated marks are trademarks of Nintendo Co., Ltd.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.nintendo.com/ on 2026-05-19; Nintendo's published brand-guidelines documents are partner-portal-only and not publicly accessible. The captured tokens come from a deployed design-system theme declared as "Nintendo Light Theme" (--theme-name, --theme- status: approved). The display typeface is Geologica Variable (open-source via Google Fonts) declared as --theme-font-family — this atom references inter@1 as the open-source rendering substitute because no `geologica` atom exists in this catalog yet. assets: [] per the encyclopedia's trademark-redistribution policy.