What is Nintendo's primary brand color?

Nintendo Red '#e60012' is the load-bearing voltage — 405 uses across the homepage, with 161 as text, 169 as border, and 75 as background fill. It owns five named tokens: '--theme-color-primary', '--theme-colors-button-background-primary', '--theme-colors-text-link', '--theme-colors-icon-primary', and '--theme-colors-alert-errorIcon'. The pressed state drops to '#ac000d' ('--theme-color-primaryHover') and the soft tint sits at '#fde6e7' ('--theme-color-primaryLight'). There is no secondary brand accent on chrome — the deep indigo '#3946a0' exists, but it is reserved for the focus ring and the quaternary button background, not as a marketing color.

What typography does Nintendo use, and what should I substitute?

Geologica Variable is the proprietary brand sans-serif covering every text role, declared once as '--theme-font-family'. The weight ladder is binary — 300 for body, legal, and nav links; 600 for titles, h2, h3, and CTA labels. Display sets at 28px / lineHeight 37.8px on h2, h3 lands at 18-21px / weight 600, body at 16px / weight 600, body-light at 16px / weight 300, captions at 12-14px / weight 300, and the legal tier drops to 12px / weight 300 / lineHeight 16px. Line-height is locked at '1.4' via '--theme-font-lineHeight'. If Geologica is unavailable, Inter at weights 300 and 600 substitutes cleanly; -apple-system and system-ui are the declared fallbacks.

What does Nintendo's shape vocabulary look like?

The radius scale is anchored on 12px — '--theme-borderRadius: 0.75rem' — which carries 296 of the captured 379 radii across cards, news tiles, and the search field. Smaller chips and inputs drop to 8px ('--theme-borderRadiusSmall: 0.5rem'). Pill buttons render at 20px and at fully-rounded 36px-48px for the smaller search button. The 'descriptionTag' badge sits at 4px (43 uses). There is no 0px-corner surface on the marketing chrome — even hero bands inherit the 12px family rhythm, which gives the storefront its consistently soft, catalog-shelf feel.

Does Nintendo use dark mode?

The captured theme is named 'Nintendo Light Theme' ('--theme-slug: nintendo-light-theme', '--theme-status: approved'). White '#ffffff' is the page canvas, '#f8f8f8' is the accent surface for elevated tiles ('--theme-colors-ui-bgAccent'), and '#dadada' is the hairline ('--theme-colors-ui-line'). The page exposes a 'scrim-dark' overlay at 'rgba(0,0,0,0.6)' and a 'scrim-light' at 'hsla(0,0%,100%,0.6)' for modal backdrops, but there is no dark-mode counterpart in the captured theme. Nintendo's commitment to the light canvas IS the brand position — the toy-aisle warmth depends on it.

Can I use this DESIGN.md to build a Nintendo-style React project?

Yes — the file is structured for AI tools that read design tokens. Feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Nintendo's actual chrome — 12px white tiles on a white canvas, Geologica Variable at weight 600 on titles, Nintendo Red '#e60012' on the primary CTA only, and the four-color 'descriptionTag' badge system for content categorization. Every hex, font name, radius, and spacing step is a quoted token you can paste into Tailwind config, CSS custom properties, or a shadcn theme.

What's missing from this DESIGN.md spec?

Several surfaces fall outside the captured homepage. The full Nintendo Store flow (PDP, cart, checkout, Nintendo Account sign-in) is not captured — those use a denser data layout. The MyNintendo rewards chrome, the per-game theming for first-party launches (which often borrow per-title brand colors outside the documented system), the parental-controls dashboard, and the Nintendo Account profile pages are out of scope. Motion (the horizontal-rail snap-scroll, the '--theme-animation-button-hover' spring at stiffness 600, the 200ms '--theme-movement-duration') is captured as tokens but not narrated. Mobile responsive screenshots were not directly captured — the responsive behavior synthesizes from the 'theme-font-size-*Mobile' tokens.

Nintendo Design System

Nintendo's design system as a DESIGN.md file.

About Nintendo DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source nintendo.com

Gaming & Entertainment
E-commerce & Retail

Nintendo's web chrome is what happens when a gaming brand decides the catalog matters more than the trailer. The page is a vertical stack of horizontally-scrolling product rails — Featured, Nintendo Today, Switch 2, Online store, Switch Online + Expansion Pack, News — each one rendered as 12px-radius white tiles on a flat white canvas, eyebrow-tagged with a small red "descriptionTag" pill, and titled in Geologica Variable at 18px weight 600. There is no atmospheric mesh, no full-bleed cinematic hero band, no parallax. The only saturated color is Nintendo Red "#e60012", and it appears on links, the primary CTA fill, the icon-primary slot, the error icon, and the red "descriptionTag" badge — five roles, one hex, 405 uses. Where most gaming brands carry players into a dark cinematic world, Nintendo carries them into a brightly-lit toy aisle.

This file captures the system as a Google Labs DESIGN.md spec. Inside: 20 color tokens covering the load-bearing red, a deep indigo focus ring ("#3946a0"), four "descriptionTag" badge accents (red, blue "#4b5cce", violet "#9531b9", green "#2d8513"), the structural ink ladder ("#242424" → "#484848" → "#727272" → "#969696" → "#c8c8c8" → "#dadada"), and the white-plus-"#f8f8f8" two-tone canvas; 12 typography roles all set in Geologica Variable across weights 300 and 600 only (the system has no medium); a 5-step radius scale where 12px ("--theme-borderRadius") carries 296 of the captured radii; a 9-step spacing rhythm anchored on the "--theme-spacing-*" rem ladder (0.125rem through 8rem); and 20 component recipes covering primary/secondary/ghost/tertiary buttons, the storefront product card, the news card, the "descriptionTag" badge in its four colors, search input, top nav, and the red footer.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent will produce React components that match Nintendo's actual restraint — flat 12px white tiles on white canvas, Geologica Variable at weight 600 on titles and weight 300 on legal copy, Nintendo Red reserved for the primary slot only, and the indigo focus ring quietly handling keyboard navigation. Or reference the tokens directly when building any storefront where the product catalog is the hero. The system's value as a study is that it proves a gaming brand can sit on a light canvas, refuse a secondary brand accent, and still read instantly as Nintendo — the red is enough.

What makes it distinct

Single red voltageNintendo Red '#e60012' carries 405 uses across links, primary CTA fill, icon-primary, error icons, and the descriptionTag-red badge with no secondary brand accent on chrome
Light canvas refusal of cinemawhite '#ffffff' and accent '#f8f8f8' surfaces under '#484848' ink reject the dark gaming convention entirely
12px radius rhythm'296' of 379 captured radii sit at 12px ('--theme-borderRadius: 0.75rem'), cards and panels share one corner across the storefront
172 exposed theme tokensevery surface, button slot, alert role, and spacing step is a named '--theme-*' CSS variable; the system is fully tokenized, not Tailwind-improvised
Geologica Variable across every roledisplay through legal copy on one face, weights 300/600 only, lineHeight locked at '1.4' via '--theme-font-lineHeight'

Live at nintendo.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

nintendo.com

Explore Nintendo

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Nintendo design system FAQ

Common questions about Nintendo's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Nintendo — official site

The live source of this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Nintendo in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→