---
version: alpha
name: "Nintendo"
description: "Clean white canvas anchored by Nintendo Red, Geologica Variable type, and card-forward 12px radius throughout."

colors:
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-elevated: "#ececec"
  ink: "#484848"
  ink-muted: "#727272"
  on-background: "#484848"
  on-surface: "#484848"
  primary: "#e60012"
  on-primary: "#ffffff"
  primary-hover: "#ac000d"
  secondary: "#4b5cce"
  on-secondary: "#ffffff"
  secondary-hover: "#2a3477"
  text-hover: "#ad1a25"
  focus-ring: "#e60012"
  border: "#dadada"
  border-subtle: "#c8c8c8"
  shadow-soft: "#484848"
  warning-bg: "#fffbb1"
  warning-icon: "#bea000"
  success-bg: "#e1f7d6"

typography:
  display-hero:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  display:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0px
  heading-section:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.16px
  button-ui:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  label:
    fontFamily: "Geologica Variable, Geologica, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  card: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 0px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 0px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 0px 24px
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 0px 24px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.card}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.card}"
    padding: 16px
    shadow: "0px 4px 16px 0px rgba(72,72,72,0.15)"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    padding: 16px 16px
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 16px
  nav-link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 8px 16px
---

# Nintendo Design System

## Overview

Nintendo's web presence is an exercise in disciplined restraint underneath full-bleed game spectacle. The canvas is pure white (`{colors.background}`) — not the warm cream of a lifestyle brand or the cool platinum of a tech company, but a neutral white that vanishes entirely, making the product photography and game art read as objects placed on air. Into this clean field, Nintendo injects its one chromatic signature: Nintendo Red (`{colors.primary}`, `#e60012`), a pure fire-engine red that functions as both the company's logo background and its exclusive interactive accent color. Every clickable element, every active state, every brand moment converges on this single hue. Nothing competes with it.

The typographic system is built entirely on Geologica Variable, a self-hosted geometric variable font with a gentle playful character — rounded terminals without being cartoonish, modern without the chilly precision of a pure geometric grotesque. At weight 600 it provides the confident heading voice for product titles and section labels; at weight 300 it becomes an unusually light body text, creating a contrast hierarchy that makes scan-reading effortless. The font's variable axis allows the site to feel cohesive across display sizes without loading multiple separate weights, contributing to the site's notably fast performance profile. Spacing around text follows an 8px base grid with the 24px value as the primary content-internal unit, producing an airy, uncluttered layout rhythm.

What makes nintendo.com distinctive among gaming properties is its **retail clarity**. Where competitors (PlayStation, Xbox, Steam) lean into dark themes and cinematic atmosphere, Nintendo maintains a bright white retail surface that keeps game covers and product photos reading at full vibrancy. The 12px card radius (`{rounded.card}`) is the system's signature shape — rounded enough to feel friendly and approachable, sharp enough to keep it clean and systematic. Cards stack predictably in grids, product images sit on flat backgrounds, pricing is clearly labeled, and the hierarchy from hero feature to secondary game cards to tertiary "more results" grids is immediately legible. This is a design system built for breadth: 700+ active Nintendo Switch titles, hardware bundles, accessories, and digital downloads, all surfaced without visual confusion.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) as the universal background — retail clarity over atmospheric immersion
- Nintendo Red (`{colors.primary}`, `#e60012`) as the sole accent — nav bar, primary CTAs, active states, and focus rings all speak one hue
- Geologica Variable at weight 600 for all headings, weight 300 for body — unusually light body text creates a clean scan-reading contrast
- `12px` card radius (`{rounded.card}`) as the dominant shape language — every product card, game thumbnail, and container shares this radius
- 8px spacing base, 24px as the primary component-internal unit (`{spacing.lg}`)
- `{colors.border}` (#dadada) 1px borders on cards — visible but not intrusive, preserving the white-dominant feel
- Link hover state shifts to `{colors.secondary}` (#4b5cce), not to red — a thoughtful distinction between CTAs and navigation links
- Subtle shadows only on hover (`rgba(72,72,72,0.15) 0px 4px 16px`) — brand-tinted dark gray, not pure black
- Motion: 0.2s ease-in-out on nearly all interactive elements — fast, consistent, unobtrusive
- Top nav on Nintendo Red — the one place the accent color becomes a full-bleed surface, anchoring the brand identity on every page

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): Page surface, card backgrounds, input fields. The dominant material of the entire system — chosen to maximize product image vibrancy and retail legibility.
- **Light Gray** (`{colors.surface}`): Alternate section backgrounds, hover states for nav items, secondary fill areas. A minimal 4% darkening of white.
- **Muted Gray** (`{colors.surface-elevated}`): Borders-adjacent fills, skeleton states, badge backgrounds on light surfaces.

### Text / Ink
- **Nintendo Ink** (`{colors.ink}`, `#484848`): All body text, navigation labels, card titles. A 72% black that reads crisply without the optical harshness of pure black on white.
- **Muted Ink** (`{colors.ink-muted}`, `#727272`): Secondary captions, metadata labels, price secondary text, copyright footers.

### Brand Accent
- **Nintendo Red** (`{colors.primary}`, `#e60012`): The full brand signal — nav background, primary CTA fills, focus rings, active nav underlines, sale badges. Only one accent exists in the system.
- **Red Hover** (`{colors.primary-hover}`, `#ac000d`): The darkened hover state for red buttons and red interactive surfaces, a CSS variable exposed as `--theme-color-primaryHover`.

### Secondary Interactive
- **Nintendo Blue** (`{colors.secondary}`, `#4b5cce`): Link hover state on body text — a secondary interactive signal that keeps link hover visually distinct from red CTAs. Not used as a fill; only as hover text color.
- **Blue Deep** (`{colors.secondary-hover}`, `#2a3477`): Active/pressed state for blue-hover links, exposed as `--theme-color-secondaryHover`.

### Semantic
- **Warning Background** (`{colors.warning-bg}`, `#fffbb1`): Alert banners for age-gating and parental controls notices.
- **Warning Icon** (`{colors.warning-icon}`, `#bea000`): Icon fill within warning alerts.
- **Success Background** (`{colors.success-bg}`, `#e1f7d6`): Confirmation states, "added to cart" feedback.

### Borders & Shadows
- **Border** (`{colors.border}`, `#dadada`): Default 1px card and container borders. Consistent across game cards, category filters, and dividers.
- **Border Subtle** (`{colors.border-subtle}`, `#c8c8c8`): Secondary separator lines, input underlines.
- **Shadow Soft** (`{colors.shadow-soft}`, `#484848`): The shadow tint base — at `rgba(72,72,72,0.15)` it produces a warm gray shadow that matches the ink color family rather than cold pure-black.

## Typography

### Font Family
- **Primary**: `Geologica Variable` (self-hosted as `geologica-latin-crsv-normal.woff2`), fallback: `-apple-system, system-ui, sans-serif`
- **Variable axes**: The site uses the font's variable weight axis — no separate font files per weight, just CSS `font-weight` values against the single variable face
- **No monospace or secondary typeface**: The entire system is Geologica Variable at different weights. The consistency is intentional — the font's range from 300 (light, readable) to 700 (bold, confident) covers every hierarchy need without switching faces.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Page-level section titles, hero game names, top-of-section labels at 32px/600 |
| `display` | Secondary section heads, feature panel titles at 28px/600 |
| `heading-section` | Card section titles, category headings, game card titles at 21px/600 |
| `heading-sub` | Subheadings, card subtitles, price labels at 18px/600 |
| `body-large` | Intro paragraphs, featured descriptions at 16px/400 |
| `body` | Standard body copy, product descriptions at 16px/300 |
| `nav-link` | Navigation labels, tab labels, filter chips at 16px/600, 0.16px tracking |
| `button-ui` | Button labels, CTA text at 18px/600 |
| `label` | Product metadata, secondary card labels at 14px/600 |
| `caption` | Fine print, legal footnotes, age ratings at 12px/300 |

### Principles
- **Weight as the hierarchy signal**: The system spans weight 300 (body) to 700 (headings) within a single variable font. There are no display-only typefaces — the same Geologica handles everything.
- **No tracking on headings**: Display and heading text run at 0px letter-spacing. Only nav links carry a subtle 0.16px — enough for uppercase-adjacent UI contexts without formally going uppercase.
- **Line-height 1.40 as the default**: Nearly all text styles, including headings, run at 1.4. Tighter line-heights (1.0 for buttons, 1.35 for large display) are the exception, not the rule.
- **Light body weight is intentional**: At 300, body text sits visually lighter than most web systems. Combined with the bright white background and dark ink color, the effect is unusually comfortable for long browsing sessions across large game catalogs.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The site uses 16px (`{spacing.md}`) for component-internal padding and 24px (`{spacing.lg}`) for card-to-card gaps. Vertical section rhythm runs at 48px (`{spacing.2xl}`) between major content zones. The 8px base is Nintendo-standard — every padding, margin, and gap value is a clean multiple.

### Grid & Container
- Max content width: approximately 1440px, with a common comfortable container around 1100–1280px
- Product grid: 4–5 columns on desktop, 3 on tablet, 2 on mobile — never 1 column (adjacency matters for comparison shopping)
- Hero: full-bleed feature banner, often split-composition (dark game art left, bright environment right)
- Category filters: horizontal scrollable chip row, 8px gap between chips

### Whitespace Philosophy
- **White does the work**: The page never uses a dark or tinted background for the main content area. White is not the absence of design — it IS the design. Spacious white margins between game card grids communicate premium retail without requiring any decorative filler.
- **Consistent vertical cadence**: 24px (`{spacing.lg}`) inside components, 48px (`{spacing.2xl}`) between sections, 64px (`{spacing.3xl}`) for major page-level breaks. The rhythm is predictable enough that the eye falls into it without conscious awareness.
- **Red as punctuation**: Nintendo Red (`{colors.primary}`) appears in deliberate bursts — the nav, the primary CTA per section, the category active state. White space between these bursts lets each red element land with maximum impact.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default card state, page canvas, inline content |
| Subtle Lift (Level 1) | `rgba(0,0,0,0.07) 0px 2px 8px 0px` | Light hover lift on small interactive elements |
| Card Hover (Level 2) | `rgba(72,72,72,0.15) 0px 4px 16px 0px` | Product card hover state — the dominant elevation expression |
| Dropdown (Level 3) | `rgba(0,0,0,0.2) 0px 4px 8px 0px` | Navigation dropdowns, tooltip overlays |
| Focus Ring | `2px solid {colors.primary}` | Keyboard focus on inputs and interactive elements |

**Shadow Philosophy**: Nintendo's shadow system is intentionally light. Cards at rest carry no shadow — the 1px `{colors.border}` border provides structural separation against the white background without any depth illusion. Shadow appears only on hover, as a gentle brand-tinted lift using `rgba(72,72,72,0.15)` — the same gray family as the ink color — rather than pure black. The effect reads as warmth rather than darkness, keeping the overall page character bright and airy.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Skip-to-content utility, some legacy nav chrome |
| `sm` | 4px | Small badges, tag chips, tight UI details |
| `md` | 8px | Primary buttons, utility buttons, small interactive elements |
| `card` | 12px | All product cards, game thumbnails, feature panels — the dominant radius |
| `pill` | 9999px | Search inputs, some navigation elements, circular icon buttons |

The 12px card radius (`{rounded.card}`) is Nintendo's shape signature. Applied consistently to game cards, feature hero tiles, hardware product cards, accessory listings, and category panels, it creates a cohesive "soft rectangle" visual language that reads as friendly without being childish. The system is not binary (none/pill) — the four tiers give enough range to distinguish button-sized controls from card-sized containers.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Nintendo Red fill, white text, 8px radius, 0px 24px padding. The exclusive high-priority CTA: "Buy now", "Learn more", "Pre-order". Used at most once per page section to preserve its urgency signal.
- **`button-primary-hover`** — Darkens to `{colors.primary-hover}` (#ac000d) on hover, matching the CSS variable `--theme-color-primaryHover`. 0.2s ease-in-out.
- **`button-secondary`** — White fill, ink text, no radius (sharp corners), 16px padding. The navigation-style button — skip-to-main, utility actions.
- **`button-ghost`** — White fill with red border, ink text at rest; fills to red with white text on hover. Used for secondary page actions and "explore" prompts.
- **`button-secondary-hover`** — Light gray fill with red text. Communicates hover without the full CTA commitment of a red fill.

### Cards

**Product / Game Card**
- Background: `{colors.background}`, border `1px solid {colors.border}`, radius `{rounded.card}`
- Shadow: none at rest; `rgba(72,72,72,0.15) 0px 4px 16px` on hover
- Image: game cover art in a top panel with `12px 12px 0px 0px` radius (top-only), maintaining card continuity
- Typography: game title at `{typography.heading-sub}` weight 600, price at `{typography.body-large}` weight 400
- Bottom section: flat white with `0px 0px 12px 12px` radius

### Inputs
- **Search bar**: pill radius (`{rounded.pill}`), 12px 16px padding, `{colors.border}` border, ink text
- Focus state: border shifts to `{colors.focus-ring}` (Nintendo Red), maintaining the single-accent discipline

### Navigation
- Top nav bar: full Nintendo Red (`{colors.primary}`) background, white wordmark and links
- Nav links: 16px/600 Geologica, white default; hover triggers `{colors.text-hover}` (muted red — `#ad1a25`)
- Active nav state: 2px `{colors.primary}` bottom underline (the underline appears on white subheadings, confirming section context)
- Mobile: collapses to hamburger; nav drawer maintains red header

### Badges
- **New / Sale badge** (`{components.badge-primary}`): Nintendo Red fill, white caption text, 4px radius, 4px 8px padding. Used for "New", "Sale", pre-order notices.
- **Category tag** (`{components.badge}`): Surface gray fill, ink text, 4px radius. Genre or format labels.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (#e60012) as the exclusive CTA color — one red per page section maximum
- Apply `{rounded.card}` (12px) to all product cards, game tiles, and container panels consistently
- Set all body and descriptive text at weight 300 — the light weight is intentional and central to the reading experience
- Keep the page background pure white (`{colors.background}`) — don't introduce tinted panels or dark sections in main content areas
- Use `{colors.border}` (#dadada) 1px for card separators, not shadow, at rest state
- Apply the 8px spacing base rigorously — every padding, margin, and gap should resolve to a multiple of 8px
- Use `{colors.secondary}` (#4b5cce) only for link hover states on body text — keep it out of CTAs and fills
- Respect the link hover color distinction: navigation links hover to `{colors.secondary}` (blue), CTA buttons hover to `{colors.primary-hover}` (dark red)
- Maintain the top-nav as full Nintendo Red — it is the brand anchor on every page and must never be altered or removed

### Don't
- Don't introduce a second accent color for CTAs — there is no purple, green, or orange CTA in this system
- Don't use pill radius (`{rounded.pill}`) on product cards — the 12px card radius is the signature, not pills
- Don't use pure black (`#000000`) for text — the system uses `{colors.ink}` (#484848), a warm 72% black
- Don't use shadows at rest state — the 1px `{colors.border}` border provides structural separation; shadow is reserved for hover lift
- Don't use heavy weight (700+) for body text — the light 300 weight is load-bearing to the system's feel; heavy body text would collapse the contrast hierarchy
- Don't apply full-bleed dark sections to the main content area — Nintendo's retail clarity depends on the white canvas remaining dominant
- Don't use the red-hover link state (`{colors.text-hover}`) on CTAs — that color is for text-only hover, not button fills
- Don't break card radius asymmetry without purpose — the 12px 12px 0px 0px / 0px 0px 12px 12px split on image vs. content within a card is load-bearing structural detail
- Don't introduce additional typeface weights outside the 300/400/600/700 range — the variable font supports everything needed within these four stops

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile S | <426px | Single column, hero type drops to 24px, stacked CTAs |
| Mobile | 426–768px | 2-column game grid, condensed nav, hero text 24–28px |
| Tablet | 768–1025px | 3-column game grid, hamburger nav, hero text 28–32px |
| Desktop | 1025–1280px | Full horizontal nav, 4-column grid, hero at 32px |
| Large Desktop | >1280px | 5-column product grid, max container ~1440px |

### Touch Targets
- Primary CTAs: 48px minimum height (achieved via 0px 24px padding + 18px font + line-height)
- Nav icon buttons: 44px × 44px touch area (cart, search, account icons at 20px radius)
- Game cards: full-card tap target, minimum 280px × 160px on mobile
- Category filter chips: 36px minimum height, 8px gap between chips

### Collapsing Strategy
- **Navigation**: Full red nav bar with text links collapses to red bar with hamburger icon; drawer expands over content with white links on red header
- **Hero banner**: Full-bleed split composition becomes stacked — game art fills width, text below at reduced size
- **Product grid**: 5 → 4 → 3 → 2 columns; never 1 (adjacency and comparison browsing preserved)
- **Category filters**: Horizontal scroll chip row becomes swipeable on mobile with visible overflow fade
- **Section spacing**: 64px section gaps compress to 32px on mobile, but never to zero — breathing room is preserved

### Image Behavior
- Game cover art: fixed aspect ratios (typically 2:3 or square) within card top panels; `object-fit: cover` centers the key artwork
- Hero banners: full-bleed with `object-position` centered or right-biased (character faces stay visible on mobile crops)
- Hardware product photos: white seamless background, product centered — consistent with retail catalog conventions

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary text: `{colors.ink}` (#484848)
- Secondary text: `{colors.ink-muted}` (#727272)
- Brand accent (CTA, nav): `{colors.primary}` (#e60012)
- Button hover: `{colors.primary-hover}` (#ac000d)
- Link hover: `{colors.secondary}` (#4b5cce)
- Card border: `{colors.border}` (#dadada)
- Card radius: `{rounded.card}` (12px)
- Card shadow (hover): `rgba(72,72,72,0.15) 0px 4px 16px 0px`
- Focus ring: `2px solid {colors.primary}`

### Example Component Prompts

- "Create a Nintendo-style product card for a Switch game: white background (`{colors.background}`), `1px solid {colors.border}` border, `{rounded.card}` radius. Top image panel with `12px 12px 0px 0px` radius for the game cover art. Bottom panel: game title in Geologica Variable 16px weight 600 `{colors.ink}`, ESRB rating in Geologica 12px weight 300 `{colors.ink-muted}`, price in 18px weight 600 `{colors.ink}`. No shadow at rest; on hover apply `rgba(72,72,72,0.15) 0px 4px 16px`."

- "Design a primary CTA button using `{components.button-primary}`: Nintendo Red (`{colors.primary}`) fill, white text, Geologica Variable 18px weight 600, `{rounded.md}` radius, `0px 24px` padding. On hover darken fill to `{colors.primary-hover}` (#ac000d) with `0.2s ease-in-out` transition. Label: 'Buy now'."

- "Build the Nintendo top navigation bar: full-width `{colors.primary}` (#e60012) background, white Nintendo wordmark left-aligned. Nav links: Geologica 16px weight 600 in white, hover state shifts to `{colors.text-hover}` (#ad1a25). Right-aligned icon group: Search, Wishlist, Cart — each 44px × 44px with white icon fill. Sticky at top with no shadow (the solid red is enough visual anchoring)."

- "Create a game category filter row: horizontally scrollable chip row with 8px gaps. Each chip: `{colors.surface-elevated}` background, `{colors.ink}` text, Geologica 14px weight 600, `{rounded.sm}` radius, `4px 12px` padding, `1px solid {colors.border}` border. Active chip: `{colors.primary}` fill, `{colors.on-primary}` text, no border. Transition `0.2s ease-in-out`."

- "Design a Nintendo-style hero banner section: full-bleed image background with game art (split dark left / bright right). Overlay text left-aligned: game title in Geologica 32px weight 600 white, release date in Geologica 16px weight 300 white at 80% opacity, primary CTA button using `{components.button-primary}` below. Include a small Nintendo eShop logo badge — white background, `{rounded.sm}` radius, `4px 8px` padding."

### Iteration Guide

1. Start with a pure white canvas (`{colors.background}`) — don't introduce tinted backgrounds in the main content area. White is the Nintendo surface.
2. Nintendo Red (`{colors.primary}`) appears once per section as the primary CTA. Reserve it — two red elements fighting for attention in the same section breaks the system.
3. Use Geologica Variable weight 600 for everything that reads as a heading or label; weight 300 for descriptive body text. This two-stop weight contrast is the primary hierarchy tool.
4. All cards share `{rounded.card}` (12px). Buttons use `{rounded.md}` (8px). Inputs use `{rounded.pill}`. Don't mix these across element types.
5. Cards are flat (no shadow) at rest; they lift with `rgba(72,72,72,0.15) 0px 4px 16px` on hover. Never add resting shadow to cards.
6. The 8px spacing base is strict — every padding, margin, and gap resolves to 4px, 8px, 16px, 24px, 32px, or 48px. No 13px, no 20px, no 36px.
7. Link hover uses `{colors.secondary}` (blue); button hover uses `{colors.primary-hover}` (dark red). This distinction is intentional — preserve it.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Nintendo. Brand names and trademarks belong to their respective owners.