---
version: alpha
name: Nintendo
website: "https://www.nintendo.com"
description: >-
  Nintendo.com's marketing-and-storefront chrome runs a saturated red-on-white system anchored on Nintendo Red ("#e60012", 405 uses across text, border, and CTA fill) with the proprietary Geologica Variable face carrying every text role from 12px legal copy at weight 300 through 28px h2 at weight 600. The page reads as a family-safe games-catalog magazine rather than a console launch trailer — a 12px border-radius rhythm on every card, a single saturated red voltage owning links, primary CTAs, error icons, and the descriptionTag-red badge, and a secondary deep indigo ("#3946a0") reserved for the focus ring and quaternary buttons. The whole surface is light: white canvas, "#f8f8f8" accent surface, "#dadada" hairlines, "#484848" workhorse ink. Where most gaming brands lean dark and cinematic, Nintendo refuses the convention entirely.

seo:
  title: "Nintendo Design System for React — Red #e60012, Geologica Variable, 20 components"
  metaDescription: "Nintendo's design system as a DESIGN.md file. Red #e60012, Geologica Variable, 20 colors, 20 components. For React, Next.js, and AI tools."
  highlights:
    - "Single red voltage — Nintendo 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 cinema — white '#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 tokens — every 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 role — display through legal copy on one face, weights 300/600 only, lineHeight locked at '1.4' via '--theme-font-lineHeight'"
  tags:
    - "Gaming & Entertainment"
    - "E-commerce & Retail"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.nintendo.com"
      title: "Nintendo — official site"
      description: "The live source of this design system."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Nintendo's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typography does Nintendo use, and what should I substitute?"
      answer: "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."
    - id: "shape-language"
      title: "What does Nintendo's shape vocabulary look like?"
      answer: "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."
    - id: "dark-mode"
      title: "Does Nintendo use dark mode?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a Nintendo-style React project?"
      answer: "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."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  primary: "#e60012"
  primary-hover: "#ac000d"
  primary-light: "#fde6e7"
  secondary: "#3946a0"
  secondary-hover: "#2a3477"
  secondary-light: "#bdc3e8"
  tag-blue: "#4b5cce"
  tag-violet: "#9531b9"
  tag-green: "#2d8513"
  ink: "#484848"
  ink-deep: "#242424"
  ink-muted: "#727272"
  ink-soft: "#969696"
  hairline: "#dadada"
  ash: "#c8c8c8"
  canvas: "#ffffff"
  surface-accent: "#efefef"
  surface-warning: "#fffbb1"
  surface-success: "#e1f7d6"
  surface-attention: "#e8ebfc"
  warning-icon: "#bea000"
  black: "#000000"

typography:
  display-lg:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0px
  display-md:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  heading-md:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  body-bold:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  body-light:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  body-sm:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  caption-bold:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  caption-light:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  button-md:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  legal:
    fontFamily: "Geologica Variable, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0px

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  pill: "20px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-light}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "59px"
    border: "0"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-light}"
    rounded: "{rounded.none}"
    padding: "0px 12px"
    height: "59px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.pill}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
    border: "0"
  button-tertiary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
    border: "1px solid {colors.primary}"
  button-ghost:
    backgroundColor: "rgba(0,0,0,0.25)"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
    border: "1px solid {colors.canvas}"
  button-disabled:
    backgroundColor: "{colors.hairline}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  search-input:
    backgroundColor: "{colors.surface-accent}"
    textColor: "{colors.ink}"
    typography: "{typography.body-light}"
    rounded: "{rounded.pill}"
    padding: "8px 12px"
    height: "32px"
    border: "0"
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.lg}"
    padding: "16px"
    border: "1px solid {colors.hairline}"
  news-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-light}"
    rounded: "{rounded.lg}"
    padding: "16px"
    border: "1px solid {colors.hairline}"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.lg}"
    padding: "48px 24px"
  rail-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: "32px 24px"
  tag-red:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption-bold}"
    rounded: "{rounded.sm}"
    padding: "2px 8px"
  tag-blue:
    backgroundColor: "{colors.tag-blue}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption-bold}"
    rounded: "{rounded.sm}"
    padding: "2px 8px"
  tag-violet:
    backgroundColor: "{colors.tag-violet}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption-bold}"
    rounded: "{rounded.sm}"
    padding: "2px 8px"
  tag-green:
    backgroundColor: "{colors.tag-green}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption-bold}"
    rounded: "{rounded.sm}"
    padding: "2px 8px"
  divider:
    backgroundColor: "{colors.hairline}"
    height: "1px"
    width: "100%"
  alert-warning:
    backgroundColor: "{colors.surface-warning}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "12px 16px"
  alert-success:
    backgroundColor: "{colors.surface-success}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "12px 16px"
  footer-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-light}"
    rounded: "{rounded.none}"
    padding: "48px 24px"
---

## 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.