Nintendo

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.

19 swatches 15 light roles 15 dark roles nintendogamingredlight-firstfamily-friendlyjapanese

Swatches

nintendo-red
#E60012
The iconic Nintendo Red — --theme-color-primary. Used for the wordmark, primary CTA fills, inline links (--theme- colors-text-link), and the red description-tag accent.
nintendo-red-hover
#AC000D
Pressed / active variant of Nintendo Red — --theme-color- primaryHover. Used on hover and active states of the primary action.
nintendo-red-light
#FDE6E7
Pale red surface — --theme-color-primaryLight. Subtle branded background tint behind alerts and selected states.
nintendo-navy
#3946A0
Secondary brand color — --theme-color-secondary. Used for secondary CTAs (button-background-secondary), focus rings (--theme-color-focus), and the blue description-tag accent.
nintendo-navy-hover
#2A3477
Pressed / active variant of Nintendo Navy — --theme-color- secondaryHover.
nintendo-navy-light
#BDC3E8
Pale navy surface — --theme-color-secondaryLight. Quiet branded background tint.
charcoal
#484848
Primary body text — --theme-color-darkGray2 and --theme- colors-text-standard. Nintendo's body-text ink across the light-first design system.
charcoal-dark
#242424
Deepest neutral — --theme-color-darkGray1. Headlines and high-emphasis text.
charcoal-mid
#727272
Secondary text — --theme-color-darkGray3.
charcoal-light
#969696
Tertiary text and quiet icon fills — --theme-color- darkGray4.
cloud-dark
#C8C8C8
Border / divider — --theme-color-lightGray1.
cloud
#DADADA
Default UI line — --theme-color-lightGray2 and --theme- colors-ui-line. Disabled-button background.
cloud-light
#EFEFEF
Quaternary surface — --theme-color-lightGray3. Hover state for quaternary buttons.
cloud-lightest
#F8F8F8
Lightest neutral surface — --theme-color-lightGray4 and --theme-colors-ui-bgAccent. Alternate row backgrounds and search-input fill.
paper
#FFFFFF
Primary canvas — --theme-color-white and --theme-colors- ui-bgMain.
tag-green
#2D8513
Documented green description-tag accent and success-state icon color — --theme-colors-descriptionTag-green and --theme-colors-alert-successIcon.
tag-violet
#9531B9
Documented violet description-tag accent — --theme-colors- descriptionTag-violet.
tag-blue
#4B5CCE
Documented blue description-tag accent — --theme-colors- descriptionTag-blue.
tag-yellow
#BEA000
Warning icon color — --theme-colors-alert-warningIcon. Used on caution banners and maintenance notices.

Mode role mappings

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

Provenance

Source
https://www.nintendo.com/
License
Proprietary — All Rights Reserved
Attribution
Nintendo Co., Ltd. / Nintendo of America Inc. — palette values captured from the deployed stylesheet on nintendo.com (--theme-color-* CSS custom-property family, "Nintendo Light Theme" design tokens). Nintendo, the Nintendo logo, Nintendo Switch, 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 font on the live site is Geologica Variable (open-source via Google Fonts) declared as --theme-font-family — this palette is paired with inter@1 in the brand atom as the open-source substitute because no `geologica` atom exists in this catalog yet.