Nintendo Design System

Overview

Nintendo.com's chrome is a brightly-lit toy aisle rendered in code — a vertical stack of horizontally-scrolling product rails on a flat white canvas, with one saturated red voltage owning every primary action. The page sequence is editorial-storefront rather than cinematic-launch: a hero pre-order tile, a Featured rail, a Nintendo Today rail (with the red Collectible Cards CTA strip), a Switch 2 console band, an Online Store rail, a Switch Online + Expansion Pack band, then a News rail closed off by the saturated red footer. Each rail is built from 12px-radius white tiles {components.product-card} separated by 24px gutters, eyebrow-labelled with a small descriptionTag badge in red, blue, violet, or green, and titled in Geologica Variable at 18px weight 600.

Single-voltage discipline: Nintendo Red {colors.primary} ("#e60012") is the only saturated color on chrome — links, primary CTA fill, icon-primary slot, error icon, the red descriptionTag badge, and the footer. Five roles, one hex, 405 uses. Where most gaming brands carry players into a dark cinematic world with a multi-color accent palette, Nintendo refuses the convention entirely — the page sits on white, the secondary indigo {colors.secondary} ("#3946a0") is reserved for the focus ring and quaternary button background only, and the red works alone.

Light canvas as brand position: This is what happens when a gaming company decides the catalog matters more than the trailer. The captured theme is literally named "Nintendo Light Theme" (--theme-slug: nintendo-light-theme). The white-plus-"#f8f8f8" two-tone surface, the "#dadada" hairline grid, and the "#484848" workhorse ink are not aesthetic defaults — they are the brand position. Unlike PlayStation's three-canvas chapter rhythm and Xbox's dark editorial bands, Nintendo's homepage stays inside one light surface mode top to bottom; the warmth comes from product photography on white tiles, not from atmospheric backgrounds.

Key Characteristics:

• Single saturated voltage: Nintendo Red {colors.primary} ("#e60012") carries 405 uses across links, primary CTA fill, icon-primary, error icon, and the red descriptionTag — no secondary brand accent on chrome
• Light Theme commitment: the captured --theme-name is literally "Nintendo Light Theme", with white {colors.canvas} ("#ffffff") page canvas and "#f8f8f8" accent surface
• 12px radius rhythm: 296 of 379 captured radii sit at {rounded.lg} ("12px", --theme-borderRadius: 0.75rem) — cards, panels, and the search field share one corner
• Binary weight ladder: Geologica Variable runs weight 300 (legal, body-light, nav, captions) and weight 600 (titles, h2, h3, body-bold, buttons). Weight 400 and 500 are absent from the captured page
• Four-color descriptionTag badge system: red {colors.primary}, blue {colors.tag-blue} ("#4b5cce"), violet {colors.tag-violet} ("#9531b9"), green {colors.tag-green} ("#2d8513") — content categorization, never used for primary actions
• 172 exposed --theme-* CSS variables on :root — the system is fully tokenized for product, alert, button-slot, animation, and spacing roles

Colors

Nintendo's palette is structurally two-tier: one saturated brand voltage carrying every action and link, then a six-step grayscale ink ladder doing all the structural work. A handful of badge accents and alert backgrounds sit outside the main flow.

• Nintendo Red ("#e60012") — frequency 405. Used as text (161), bg (75), border (169). The load-bearing brand voltage; owns --theme-color-primary, --theme-colors-text-link, --theme-colors-button-background-primary, --theme-colors-icon-primary, --theme-colors-alert-errorIcon. The pressed state drops to "#ac000d".
• Workhorse Ink ("#484848") — frequency 5058. Used as text (2654), border (2392), shadow (12). The dominant page color by far; owns --theme-colors-text-standard, --theme-colors-icon-standard, --theme-colors-alert-text. Carries 99% of body and heading copy across the marketing surface.
• Canvas ("#ffffff") — frequency 478. Used as bg (271), text (128), border (79). The page canvas (--theme-colors-ui-bgMain) and the on-color for every red, indigo, and tag-color button.
• Ash ("#c8c8c8") — frequency 417. Used as text (167), border (167), bg (83). The mid-gray for placeholder text, disabled labels, and secondary hairlines (--theme-color-lightGray1).
• Hairline ("#dadada") — frequency 248. Used as border (230), text (13), bg (5). The card border, divider, and disabled-button fill (--theme-colors-ui-line, --theme-colors-button-background-disabled).
• Ink Muted ("#727272") — frequency 144. Used as text (72), border (72). The secondary ink for captions and metadata (--theme-color-darkGray3).
• Indigo Focus ("#3946a0") — frequency 16. Used as bg (16). Reserved for the focus ring, the quaternary button background, and --theme-colors-alert-attentionIcon. Never used as a marketing color — it is structural chrome.
• Tag Blue ("#4b5cce") — frequency 16. Used as bg (16). The blue descriptionTag badge (--theme-colors-descriptionTag-blue) for content categorization.
• Black Scrim ("#000000") — frequency 10. Used as bg (5), shadow (5). The modal backdrop at rgba(0,0,0,0.6) (--theme-scrim-dark) and the ghost-button background.

Five named alert tints round out the palette: warning bg "#fffbb1" / icon "#bea000", success bg "#e1f7d6" / icon "#2d8513", attention bg "#e8ebfc" / icon "#3946a0". The violet descriptionTag ("#9531b9") carries 2 uses on the homepage but is a named token under --theme-colors-descriptionTag-violet. None of these accent colors leak into chrome — they are scoped strictly to their named slot.

Typography

The system runs entirely on Geologica Variable — a variable-axis brand sans-serif — declared once as --theme-font-family with -apple-system and system-ui fallbacks. The weight ladder is binary: 300 for body, legal, nav, and captions; 600 for titles, h2, h3, body-bold, and CTA labels. Weight 400 and 500 are absent from the captured page; the system jumps straight from light to semibold with no medium. The line-height base is locked at 1.4 via --theme-font-lineHeight.

The display tier sits at 28px / weight 600 on h2 (count 21 across the page), with h3 at 18-21px / weight 600. Body comes in two flavors — body-bold at 16px / weight 600 (count 198, the most-used signature on the page, carrying tile titles and section headings) and body-light at 16px / weight 300 (count 8) for prose paragraphs. The nav link sits at 16px / weight 300, the search field uses the same. Captions live at 12-14px split across weight 300 (159 uses for legal and metadata) and weight 600 (33 uses for tag-badge labels). The legal tier at 12px / weight 300 / lineHeight 1.33 handles fine print and footnotes.

Variable-axis brand voice: Geologica's CRSV axis is set to 1 via --theme-font-variation-settings, which subtly differentiates the brand voice from generic Inter or system-ui without committing to an obviously branded display face. Where Minecraft picks a literal pixel font and PlayStation picks proprietary SST at weight 300, Nintendo picks one variable face and uses its axis controls to whisper the brand identity rather than shout it.

Layout

The page is a one-column vertical stack of full-width rails capped at --theme-page-maxWidth: 90rem (1440px). Within each rail, horizontal scrolling carries 4-6 product tiles separated by 16px gutters. The spacing scale is a tight rem ladder under --theme-spacing-*: 0.125rem (2px), 0.25rem (4px), 0.5rem (8px), 0.75rem (12px), 1rem (16px), 1.25rem (20px), 1.5rem (24px), 1.75rem (28px), 2rem (32px), 2.25rem (36px), 2.5rem (40px), 2.75rem (44px), 3rem (48px), 4rem (64px), 5rem (80px), 6rem (96px), 7rem (112px), 8rem (128px). The 16px and 8px steps dominate (552 and 193 captured uses respectively) — Nintendo's catalog rhythm is built on a strict 8px subgrid.

The nav sits at exactly --theme-nav-desktop-height: 59px with a --theme-nav-desktop-logo-width: 132px. The slim content max-width drops to --theme-page-slimMaxWidth: 71.5rem (1144px) for prose-heavy contexts like the Nintendo Account or support pages.

Elevation & Depth

Nintendo's depth model is hairline-as-divider — the page has almost no shadows. Cards lift from canvas with a 1px solid "#dadada" hairline (--theme-colors-ui-line), not a drop shadow. The 12 captured shadow uses on the workhorse ink color are scoped to subtle elevation on the nav and dropdown menus only; cards, news tiles, and rails are flat-on-canvas. The only true overlay is the modal scrim at rgba(0,0,0,0.6) (--theme-scrim-dark) and the light variant at hsla(0,0%,100%,0.6) (--theme-scrim-light). Unlike PlayStation's section-as-divider model or Apple's signature product drop-shadow, Nintendo treats elevation as a hairline grid — the catalog reads as a flat shelf with goods laid out on it, not a stack of floating cards.

Shapes

The radius system anchors on 12px — --theme-borderRadius: 0.75rem — which carries 296 of the 379 captured radii. Smaller chips and inputs drop to 8px (--theme-borderRadiusSmall: 0.5rem, 17 uses). The 4px tier (43 uses) handles the descriptionTag badge. Pill buttons render at 20px on the inline-row primary CTA and at 36-48px on standalone circular icon buttons. The --theme-borderRadiusRound token sits at 1rem (16px) for rounded image frames. There is no 0px-corner surface on the marketing chrome — even the hero band inherits 12px — which gives the storefront its consistently soft, family-safe catalog-shelf feel.

Components

The component recipes mirror the keys in the frontmatter components: block. Every recipe references declared tokens via {colors.x}, {typography.x}, {rounded.x}.

• {components.top-nav} — white canvas, "#484848" ink, body-light type, 59px height (--theme-nav-desktop-height), 0px corners. The brand logo width is locked at 132px.
• {components.nav-link} — transparent background, body-light 16px / weight 300, no underline.
• {components.button-primary} — Nintendo Red "#e60012" fill, white text, button-md 14px / weight 600, 20px pill radius, 32px height, 8px×16px padding. The single chrome carrier of the brand voltage.
• {components.button-primary-hover} — drops to "#ac000d" (--theme-color-primaryHover); pill radius preserved.
• {components.button-secondary} — Indigo "#3946a0" fill, white text. Reserved for the small set of structural actions that need to feel different from Buy.
• {components.button-tertiary} — White fill, red text, 1px red border. The "Learn more" / outline pattern used inside white tiles where a solid red would compete with product imagery.
• {components.button-ghost} — rgba(0,0,0,0.25) background with white text and 1px white border, for overlay placement on photography.
• {components.button-disabled} — "#dadada" fill (--theme-colors-button-background-disabled), muted gray text.
• {components.search-input} — "#efefef" (--theme-color-lightGray3) fill, ink text, pill radius, 32px height. Sits in the top nav.
• {components.product-card} — White canvas, 12px radius, 1px "#dadada" hairline, 16px inner padding. Title in body-bold 16px / weight 600. The workhorse rail unit.
• {components.news-card} — White canvas, 12px radius, 1px hairline, body in body-light 16px / weight 300. Visually identical to product-card but with prose-led content.
• {components.hero-band} — White canvas, ink text, display-lg 28px / weight 600 on h2. 12px radius, 48px×24px padding — the only "hero" surface on the page inherits the same tile family, not a full-bleed cinematic band.
• {components.rail-section} — Container for horizontal-scroll product rails. display-md 21px / weight 600 title, no radius (full-width strip), 32px×24px padding.
• {components.tag-red} / {components.tag-blue} / {components.tag-violet} / {components.tag-green} — The descriptionTag badge family. 12px caption-bold white text on the saturated tag color, 4px radius, 2px×8px padding. Content categorization only — never used for primary actions.
• {components.divider} — 1px "#dadada" hairline, full width.
• {components.alert-warning} — "#fffbb1" yellow tint background, ink text. Paired with the "#bea000" warning icon outside the component (--theme-colors-alert-warningIcon).
• {components.alert-success} — "#e1f7d6" green tint background, ink text. Paired with the "#2d8513" success icon.
• {components.footer-band} — Saturated Nintendo Red "#e60012" background, white text, no radius, 48px×24px padding. The only full-bleed saturated surface on the page — it earns its scale by being last.

Do's and Don'ts

• Do reserve {colors.primary} ("#e60012") for the primary CTA fill, link text, icon-primary, error icon, and the red descriptionTag — five named roles. If you find yourself using red as a secondary accent on a chart, a tag, or a divider, you are breaking the system.
• Do put every card at {rounded.lg} ("12px") and every input or chip at {rounded.md} ("8px"). The two-radius rhythm is the system; novel radii like 16px or 6px break the catalog-shelf feel.
• Do treat weight 600 as the title weight and weight 300 as the body weight. The binary ladder is the brand voice — adding weight 500 medium fills will read as off-brand.
• Don't use "#3946a0" indigo as a marketing accent or secondary brand color — it lives only on the focus ring (--theme-color-focus), the quaternary button background, and the attentionIcon. Painting a CTA or hero in indigo will read as a Microsoft brand, not Nintendo.
• Don't lift product cards with drop shadows — Nintendo's depth model is hairline-as-divider with 1px solid "#dadada". Adding box-shadow on tiles will break the flat-shelf composition that defines the storefront.
• Don't drop the canvas to dark — the captured theme is literally --theme-name: "Nintendo Light Theme". There is no dark-mode counterpart in the captured system. A dark canvas with red CTAs will read as Netflix or YouTube, not Nintendo.
• Don't use the four-color descriptionTag badge for primary actions. The red tag ("#e60012"), blue ("#4b5cce"), violet ("#9531b9"), and green ("#2d8513") are content-category labels at 12px caption-bold inside a 4px-radius chip — they share the brand voltage hex but they are NOT buttons.
• Don't apply Geologica Variable at weight 400 or 500 — the captured page never does. Those weights exist in the variable axis but are not part of the documented voice; using them will produce text that reads "almost-Nintendo" rather than Nintendo.

Known Gaps

• Store flow not captured — PDP, cart, checkout, and Nintendo Account sign-in surfaces use a denser data layout that this homepage extraction does not cover.
• MyNintendo rewards chrome and the per-game theming for first-party launches (which often borrow per-title brand colors outside the documented system) are out of scope.
• Mobile responsive screenshots not captured directly — responsive behavior synthesizes from the --theme-font-size-*Mobile tokens (h1LMobile 1.75rem, h2Mobile 1.125rem, bodyMobile 0.875rem, captionMobile 0.75rem, legalMobile 0.625rem) rather than from a separate mobile capture.
• Motion captured as tokens, not narrated — the --theme-animation-button-hover spring at stiffness 600, the --theme-animation-vertical-gentleBounce-damping: 18.3, and the 200ms --theme-movement-duration define the system's motion vocabulary but the actual hover, tap, and rail-snap interactions are not described here.
• Dark mode counterpart — the captured theme is --theme-slug: nintendo-light-theme. If a dark-mode Nintendo Account or game-detail page exists, it is not in scope.
• Per-title brand theming — first-party game pages (Mario Kart, Star Fox, Donkey Kong) often pull in their own per-title color treatments that vary outside this documented system.