oh-my-design-cli 1.8.1 → 1.8.2

package/web/references/nintendo/DESIGN.md

@@ -0,0 +1,445 @@
+---
+id: nintendo
+name: Nintendo
+country: JP
+category: consumer-tech
+homepage: "https://www.nintendo.com/us/"
+primary_color: "#e60012"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=nintendo.com&sz=128"
+verified: "2026-06-17"
+added: "2026-06-17"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-06-17"
+  note: "primary = Nintendo red (#e60012), the brand's near-immutable signature, used identically on US (nintendo.com/us) and JP (nintendo.com/jp) surfaces — links, primary CTAs, logo. US text ink is #484848 with Geologica Variable; JP text ink is #3c3c3c with the YakuHan/Hiragino CJK stack. Translucent overlay/shadow values appear in prose/components only."
+  colors:
+    primary: "#e60012"
+    ink: "#484848"
+    ink-jp: "#3c3c3c"
+    muted: "#727272"
+    muted-jp: "#8c8c8c"
+    disabled: "#c8c8c8"
+    on-primary: "#ffffff"
+    canvas: "#ffffff"
+    surface: "#f8f8f8"
+    surface-alt: "#efefef"
+    surface-jp: "#f2f2f2"
+    hairline: "#e0e0e0"
+    eshop-green: "#468254"
+    accent-blue: "#4b5cce"
+    accent-navy: "#27455c"
+  typography:
+    family: { sans: "Geologica Variable", cjk: "YakuHanJPs, Roboto, Hiragino Kaku Gothic ProN", mono: "system-ui" }
+    display:      { size: 28, weight: 600, lineHeight: 1.35, use: "Section/feature headline (H2), Geologica" }
+    subheading:   { size: 21, weight: 600, lineHeight: 1.40, use: "Card / panel head (H2)" }
+    label:        { size: 16, weight: 600, lineHeight: 1.40, use: "Section label, nav, eyebrow" }
+    body:         { size: 16, weight: 400, lineHeight: 1.40, use: "Standard reading text, US" }
+    body-jp:      { size: 16, weight: 400, lineHeight: 2.00, use: "Standard reading text, JP (32px line-height)" }
+    button:       { size: 18, weight: 600, lineHeight: 1.00, use: "Primary CTA label" }
+    nav:          { size: 14, weight: 600, lineHeight: 1.00, use: "Top nav menu item" }
+    caption:      { size: 14, weight: 400, lineHeight: 1.40, use: "Search input, small labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
+  rounded: { xs: 2, sm: 4, md: 8, lg: 12, pill: 48, full: 9999 }
+  shadow:
+    soft: "rgba(0,0,0,0.07) 0px 2px 8px 0px"
+    card: "rgba(72,72,72,0.15) 0px 4px 16px 0px"
+  components:
+    button-primary: { type: button, bg: "#e60012", fg: "#ffffff", radius: "8px", height: "48px", padding: "0 24px", font: "18px / 600 Geologica", use: "Primary CTA — Log in, Learn more, Start shopping" }
+    button-play: { type: button, bg: "#e60012", fg: "#ffffff", radius: "48px", height: "32px", padding: "0 16px", font: "16px / 600 Geologica", use: "Inline Play pill on media cards" }
+    button-utility: { type: button, bg: "#f8f8f8", fg: "#484848", radius: "20px", height: "32px", padding: "8px 12px", font: "14px / 600 Geologica", use: "Header utility pills — Search, Wish List, Cart" }
+    link-red: { type: button, fg: "#e60012", font: "16px / 600 Geologica", use: "Trending-topic / inline navigational link, red text on transparent" }
+    nav-item: { type: tab, fg: "#484848", font: "14px / 600 Geologica", use: "Top nav menu trigger (Explore, Shop, Support)", active: "text #e60012" }
+    card-media: { type: card, bg: "#ffffff", radius: "12px", shadow: "rgba(0,0,0,0.07) 0px 2px 8px", use: "Game/topic media tile" }
+    input-search: { type: input, bg: "#ffffff", fg: "#484848", radius: "0px", font: "14px / 400 Geologica", use: "Header search field, bottom-border affordance" }
+    carousel-arrow: { type: button, fg: "#dadada", radius: "8px", padding: "16px", use: "Hero carousel prev/next, rgba(0,0,0,0.3) scrim bg" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Nintendo
+
+## 1. Visual Theme & Atmosphere
+
+Nintendo's web presence is a masterclass in disciplined brand craft: a near-shadowless, light-canvas system where a single saturated red does almost all the emotional work. The page opens on pure white (`#ffffff`) with soft cool-grey surfaces (`#f8f8f8`, `#efefef`) segmenting content, and text rendered in a warm dark grey (`#484848` on the US site, `#3c3c3c` on the Japanese site) — never pure black for body copy. Against that quiet neutral ground, the signature **Nintendo red (`#e60012`)** is reserved with surgical restraint: it is the color of every primary call-to-action, every inline navigational link, and the wordmark itself. The brand has kept this red essentially unchanged for decades, and the web treats it as sacred — the eye is trained that "red means action, red means Nintendo."
+
+The typographic personality differs by region but shares the same calm confidence. The US store runs **Geologica Variable** — a humanist sans with subtle warmth — at a friendly 16px body and 28px feature headlines, both at weight 600 for headings and 400 for prose. The Japanese site runs the authentic CJK stack **`YakuHanJPs, Roboto, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, nc3Jp, sans-serif`**, with YakuHan handling tightened half-width kana punctuation and Hiragino carrying the kanji — a deliberately legible, generously line-spaced (32px on 16px) reading rhythm that respects dense Japanese text. The split is regional, not philosophical: both surfaces feel orderly, optimistic, and family-friendly rather than hard-sell.
+
+What distinguishes Nintendo from louder consumer-tech peers is its restraint with depth and geometry. Shadows are barely-there — a whisper of `rgba(0,0,0,0.07) 0px 2px 8px` lifts media cards, and a slightly firmer `rgba(72,72,72,0.15) 0px 4px 16px` floats featured tiles; separation otherwise comes from flat tint and a thin `#e0e0e0` hairline. Geometry is gently rounded: 12px media cards, 8px primary buttons, fully-pill (48px) inline Play affordances, and 20px utility pills in the header. On the Japanese site the radii tighten to 2-3px with circular (50%) icon chips, a subtly more compact, information-dense register. The result is an interface that feels engineered, trustworthy, and welcoming all at once — playful where it persuades, precise everywhere else.
+
+**Key Characteristics:**
+- Single signature **Nintendo red (`#e60012`)** reserved for primary CTAs, inline links, and the wordmark — the system's one "action" color, identical across US and JP
+- Warm dark-grey ink instead of black — `#484848` (US, Geologica) and `#3c3c3c` (JP, CJK stack)
+- **Geologica Variable** on the US store; authentic **YakuHan + Hiragino Kaku Gothic ProN** CJK stack on the Japanese site
+- Light canvas with cool-grey tint surfaces (`#f8f8f8`, `#efefef`, `#f2f2f2` JP) and a single `#e0e0e0` hairline
+- Near-shadowless depth — `rgba(0,0,0,0.07) 0px 2px 8px` soft lift, `rgba(72,72,72,0.15) 0px 4px 16px` for featured cards
+- Gently rounded geometry: 12px cards, 8px primary buttons, 48px Play pills, 20px header pills (US); 2-3px + 50% circles (JP)
+- Restrained secondary accents — eShop green (`#468254`), occasional blue (`#4b5cce`) and navy (`#27455c`) for service/section theming, never competing with red
+- Muted-grey neutral ladder (`#727272` → `#c8c8c8`) for secondary and disabled text
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Nintendo Red** (`#e60012`): The brand's near-immutable signature. Primary CTA background (Log in, Learn more, Start shopping), the Play pill, all inline navigational/trending links, and the wordmark. The single saturated "action" hue, confirmed identical on both `nintendo.com/us` (rgb 230,0,18) and `nintendo.com/jp`.
+
+### Text / Ink
+- **Ink Grey (US)** (`#484848`): Primary body, heading, nav, and label color on the US store — a warm dark grey, never pure black.
+- **Ink Grey (JP)** (`#3c3c3c`): Primary text color on the Japanese site — a slightly deeper warm grey paired with the CJK stack.
+- **Muted Grey** (`#727272`): Secondary text, captions, metadata on the US site.
+- **Muted Grey (JP)** (`#8c8c8c`): Secondary/tertiary text on the Japanese site.
+- **Disabled Grey** (`#c8c8c8`): Disabled controls, placeholder, lowest-emphasis labels and carousel chrome.
+
+### Neutral & Surface
+- **Pure White** (`#ffffff`): Page background, card surfaces, and text on red/dark.
+- **Surface Grey** (`#f8f8f8`): Cool-grey tint for header utility pills and segmented blocks (US).
+- **Surface Alt** (`#efefef`): Slightly firmer grey for inset fields and alternating bands (US).
+- **Surface Grey (JP)** (`#f2f2f2`): The Japanese site's primary tinted surface for chips and panels.
+- **Hairline** (`#e0e0e0`): Thin borders, dividers, and card outlines — the primary separation device in the near-shadowless system.
+
+### Secondary Accents (service / section theming)
+- **eShop Green** (`#468254`): Commerce/store accent used sparingly on shop surfaces and availability states.
+- **Accent Blue** (`#4b5cce`): Occasional section/service theming (online services), kept subordinate to red.
+- **Accent Navy** (`#27455c`): Deep navy band/section background for immersive editorial moments.
+- **On-Primary White** (`#ffffff`): Text/iconography on the red CTA and dark backgrounds.
+
+## 3. Typography Rules
+
+### Font Family
+- **US (sans)**: `Geologica Variable`, with fallback `-apple-system, "system-ui", sans-serif` — used for all US-store headings, nav, body, and button labels.
+- **JP (CJK)**: `YakuHanJPs, Roboto, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, nc3Jp, sans-serif` — YakuHan tightens half-width kana punctuation, Roboto covers Latin, Hiragino Kaku Gothic ProN renders kanji/kana; `nc3Jp` is Nintendo's bundled web font fallback.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Feature Headline (H2) | Geologica | 28px (1.75rem) | 600 | 1.35 (37.8px) | Section/feature titles, US |
+| Panel Heading (H2) | Geologica | 21px (1.31rem) | 600 | 1.40 (29.4px) | Card / login panel heads |
+| Section Label | Geologica | 16px (1.00rem) | 600 | 1.40 (22.4px) | Eyebrow labels ("Trending topics"), nav groups |
+| Body | Geologica | 16px (1.00rem) | 400 | 1.40 (22.4px) | Standard reading text, US |
+| Body (JP) | CJK stack | 16px (1.00rem) | 400 | 2.00 (32px) | Standard reading text, Japanese site |
+| Primary Button | Geologica | 18px (1.13rem) | 600 | 1.00 | Primary CTA label |
+| Nav Item | Geologica | 14px (0.88rem) | 600 | 1.00 | Top nav menu triggers |
+| Nav Item (JP) | CJK stack | 14px (0.88rem) | 700 | 1.00 | Japanese top nav (heavier weight) |
+| Caption / Input | Geologica | 14px (0.88rem) | 400 | 1.40 | Search field, small labels |
+
+### Principles
+- **Weight 600 carries headings; 400 carries prose.** Across US headings (28px, 21px, 16px labels) the heading weight is a consistent 600 semibold — confident but never heavy. Body sits at 400.
+- **Regional font discipline.** Geologica owns the US store; the YakuHan + Hiragino CJK stack owns the Japanese site. The two never swap — each is tuned for its script's legibility.
+- **Generous Japanese line-height.** JP body runs at 32px line-height on 16px text (2.0) versus 1.4 on the US site — denser scripts get more vertical air for readability.
+- **No display heroics.** Headlines top out at 28px on the home surface; Nintendo leans on imagery and the red accent for impact rather than oversized type.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA**
+- Background: `#e60012`
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 0px 24px
+- Height: 48px
+- Font: 18px Geologica weight 600
+- Use: Primary call-to-action — "Log in", "Learn more", "Start shopping", "See all news articles"
+
+**Play Pill**
+- Background: `#e60012`
+- Text: `#ffffff`
+- Radius: 48px
+- Padding: 0px 16px
+- Height: 32px
+- Font: 16px Geologica weight 600
+- Use: Inline "Play" affordance on media cards — fully pill-shaped
+
+**Utility Pill**
+- Background: `#f8f8f8`
+- Text: `#484848`
+- Radius: 20px
+- Padding: 8px 12px
+- Height: 32px
+- Font: 14px Geologica weight 600
+- Use: Header utility actions — "Search", "Wish List", "Cart"
+
+**Red Inline Link**
+- Text: `#e60012`
+- Font: 16px Geologica weight 600
+- Use: Trending-topic and inline navigational links ("Nintendo Direct", "Games on sale") — red text on transparent, no background
+
+**Carousel Arrow**
+- Background: `rgba(0,0,0,0.3)`
+- Text: `#dadada`
+- Radius: 8px
+- Padding: 16px
+- Use: Hero/product carousel previous & next controls — dark scrim chip over imagery
+
+### Inputs & Forms
+
+**Header Search**
+- Background: `#ffffff`
+- Text: `#484848`
+- Radius: 0px
+- Font: 14px Geologica weight 400
+- Use: Header search field ("Search games, hardware, news, etc") — bottom-border affordance, no fill
+
+### Cards & Containers
+
+**Media Tile**
+- Background: `#ffffff`
+- Radius: 12px
+- Shadow: `rgba(0,0,0,0.07) 0px 2px 8px`
+- Use: Game / topic / news media tile — the workhorse content card
+
+**Featured Card**
+- Background: `#ffffff`
+- Radius: 12px
+- Shadow: `rgba(72,72,72,0.15) 0px 4px 16px`
+- Use: Elevated featured/promoted tile — firmer lift than the standard media tile
+
+### Badges
+
+**Red Status Pill**
+- Background: `#e60012`
+- Text: `#ffffff`
+- Radius: 48px
+- Font: 14px Geologica weight 600
+- Use: Emphasis / status pill (e.g. "New", availability) — the red action color in compact form
+
+### Navigation
+- Background: `#ffffff`
+- Text: `#484848`
+- Font: 14px Geologica weight 600
+- Height: 48px nav row (US) / 72px header (JP)
+- Active: red `#e60012` text/indicator on active item
+- Use: Top horizontal nav ("Explore", "Shop", "Support" on US; "本体・グッズ", "ゲームソフト", "トピックス", "サポート" on JP)
+
+---
+
+**Verified:** 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces US + JP)
+**Tier 1 sources:** https://www.nintendo.com/us/ (US store — nav, hero CTAs, media cards, utility pills, live DOM), https://www.nintendo.com/jp/ (Japanese site — CJK font stack, nav, red accent confirmation, live DOM)
+**Tier 2 sources:** getdesign.md/nintendo — 0 DESIGN.md files (no match); styles.refero.design/?q=nintendo — no Nintendo-specific style page (generic catalog returned)
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px
+- Notable: Primary CTAs use 24px horizontal padding with zero vertical padding (height-driven at 48px); utility pills use a compact 8px/12px
+
+### Grid & Container
+- Centered, generous-margin content column with full-width hero/carousel banners at the top
+- Trending-topics and feature sections arranged as horizontal media-tile rows / carousels
+- Feature bands alternate white (`#ffffff`) with subtle grey tint, separated by `#e0e0e0` hairlines
+- Media tiles use 12px radius and group games, news, and topics
+
+### Whitespace Philosophy
+- **Calm, breathable rhythm**: despite being a content- and commerce-dense product, the home surface is airy with generous vertical spacing between sections.
+- **Flat segmentation**: sections separate by background tint and hairline, rarely by heavy elevation.
+- **Imagery does the heavy lifting**: large key-art banners carry visual energy so the chrome can stay quiet and orderly.
+
+### Border Radius Scale
+- Extra-small (2px): JP chips, fine inset elements
+- Small (4px): small containers, inline chips
+- Medium (8px): primary buttons, carousel-arrow chips
+- Large (12px): media/feature cards — the workhorse
+- Pill (20px): header utility pills
+- Full (48px / 9999px): Play affordance and status pills; 50% circular icon chips on JP
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, inline text, most surfaces |
+| Tint (Level 1) | `#f8f8f8` / `#f2f2f2` background shift | Card/section separation without elevation |
+| Hairline (Level 2) | `1px solid #e0e0e0` border | Card outlines, dividers |
+| Soft (Level 3) | `rgba(0,0,0,0.07) 0px 2px 8px` | Standard media tiles, subtle lift |
+| Card (Level 4) | `rgba(72,72,72,0.15) 0px 4px 16px` | Featured / promoted tiles |
+
+**Shadow Philosophy**: Nintendo runs a near-shadowless, light system. Live inspection found the strongest standard elevation to be a whisper-soft `rgba(0,0,0,0.07) 0px 2px 8px` on media cards, with featured tiles reaching only `rgba(72,72,72,0.15) 0px 4px 16px` — itself a brand-warm grey shadow rather than pure black. Most separation is done flat, through `#f8f8f8` tint and `#e0e0e0` hairlines. The Japanese site is flatter still (tighter 2-3px radii, minimal shadow). This restraint keeps the interface feeling clean, fast, and approachable — emphasis is reached for with the red accent (`#e60012`), never with heavy drop shadows.
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve Nintendo red (`#e60012`) for primary CTAs, inline links, and the wordmark — keep it the single "action" color
+- Use warm dark grey for text (`#484848` US, `#3c3c3c` JP) instead of pure black
+- Use Geologica Variable on Western/US surfaces and the YakuHan + Hiragino CJK stack on Japanese surfaces
+- Separate sections with flat `#f8f8f8`/`#f2f2f2` tint and `#e0e0e0` hairlines rather than heavy shadows
+- Keep elevation whisper-soft — `rgba(0,0,0,0.07) 0px 2px 8px` for standard cards
+- Use 12px radius for media cards, 8px for primary buttons, 48px pills for inline Play affordances
+- Let large key-art imagery carry visual energy so the UI chrome stays calm
+- Use weight 600 for headings and 400 for body
+
+### Don't
+- Spread red across many elements — it dilutes the single-action signal
+- Use pure black (`#000000`) for body text — reserve warm grey
+- Swap the regional fonts — Geologica stays Western, the CJK stack stays Japanese
+- Reach for heavy drop shadows or hard elevation — the system is flat and light
+- Introduce a competing saturated accent — eShop green, blue, and navy stay subordinate to red
+- Set oversized display headlines — the home surface tops out around 28px and leans on imagery
+- Use sharp square corners on cards or pills — geometry is gently rounded
+- Tighten Japanese body line-height below its generous 2.0 rhythm
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, condensed nav (hamburger), carousels become swipe rows |
+| Tablet | 640-1024px | 2-up media tiles, moderate padding |
+| Desktop | 1024-1440px | Full layout, multi-column feature rows, centered content with margins |
+
+### Touch Targets
+- Primary CTAs at 48px height for a comfortable, unmistakable tap target
+- Header utility pills at 32px height with 8px/12px padding
+- Nav items spaced within the 48px (US) / 72px (JP) header
+- Carousel arrows padded at 16px for easy reach over imagery
+
+### Collapsing Strategy
+- Hero/carousel banners maintain full-width treatment, reduce internal padding on mobile
+- Feature media-tile rows: multi-column → 2-up → single-column swipe
+- Top nav: horizontal menu → hamburger toggle
+- Tinted/white alternating bands maintain full-width treatment
+
+### Image Behavior
+- Key-art banners and media tiles maintain 12px radius across breakpoints
+- Card shadows stay whisper-soft at all sizes, consistent with the flat system
+- Game/box-art imagery scales to fit tile aspect ratios without added borders
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA / link / brand: Nintendo Red (`#e60012`)
+- Heading / body text (US): Ink Grey (`#484848`)
+- Heading / body text (JP): Ink Grey (`#3c3c3c`)
+- Secondary text: Muted Grey (`#727272`)
+- Disabled: Disabled Grey (`#c8c8c8`)
+- Background: Pure White (`#ffffff`)
+- Tinted surface: Surface Grey (`#f8f8f8`) / `#f2f2f2` (JP)
+- Hairline: `#e0e0e0`
+- Secondary accents: eShop Green (`#468254`), Blue (`#4b5cce`), Navy (`#27455c`)
+
+### Example Component Prompts
+- "Create a Nintendo-style hero on white background with a full-width key-art banner. Section label at 16px Geologica weight 600, color #484848. One primary red CTA: #e60012 background, white text, 8px radius, 0 24px padding, 48px height, 18px Geologica weight 600 — 'Learn more'. Carousel arrows as rgba(0,0,0,0.3) chips with 8px radius."
+- "Design a media tile: white background, 12px radius, soft shadow rgba(0,0,0,0.07) 0px 2px 8px. Title 21px Geologica weight 600, #484848. An inline red Play pill: #e60012 background, white text, 48px radius, 32px height."
+- "Build a header: white nav, 48px row. Utility pills (Search, Wish List, Cart) at #f8f8f8 background, #484848 text, 20px radius, 32px height, 14px Geologica weight 600. Nav items 14px weight 600, red #e60012 on active."
+- "Create a Japanese-locale layout using font-family: YakuHanJPs, Roboto, 'Hiragino Kaku Gothic ProN', sans-serif. Body 16px weight 400 with 32px line-height, color #3c3c3c. Red accent #e60012 for links and CTAs."
+
+### Iteration Guide
+1. Nintendo red (`#e60012`) is the single action color — don't spread it
+2. Geologica Variable for US/Western; YakuHan + Hiragino Kaku Gothic ProN for Japanese
+3. Text is warm grey (`#484848` US / `#3c3c3c` JP), never pure black
+4. Keep elevation whisper-soft (`rgba(0,0,0,0.07) 0px 2px 8px`); separate with tint + `#e0e0e0` hairline
+5. Geometry: 12px cards, 8px primary buttons, 48px Play pills, 20px header pills
+6. Headings at weight 600, body at 400; home headlines top out around 28px
+7. Let key-art imagery carry the energy; keep chrome calm
+
+---
+
+## 10. Voice & Tone
+
+Nintendo's voice is **warm, inviting, and family-friendly** — playful where it persuades, plain and orderly where it informs. Copy is welcoming and benefit-first ("Experience The World's Game like never before", "Get up and move with friends and family") without slipping into hype or pressure. Calls-to-action are gentle imperatives — "Learn more", "Start shopping", "Pre-order now!" — and the rare exclamation reads as genuine enthusiasm rather than urgency-marketing. The brand speaks to a broad audience (kids, parents, lifelong fans) at once, so the register stays clear, optimistic, and never condescending or jargon-heavy.
+
+| Context | Tone |
+|---|---|
+| Hero / feature headlines | Inviting, experiential. "Experience The World's Game like never before." Enthusiastic, never hard-sell. |
+| CTAs | Gentle imperatives. "Learn more", "Start shopping", "See all news articles". |
+| Trending topics / links | Plain and direct. "Nintendo Direct", "Games on sale", "Online services". |
+| Product / availability | Benefit-first, friendly. "Pre-order now! Blast off on a high…", "Available now!". |
+| Support / account | Calm, reassuring, helpful. Plain instructions over marketing language. |
+
+**Voice samples (verbatim from live homepage 2026-06-17):**
+- "Experience The World's Game like never before" — feature headline (experiential invitation). *(verified live)*
+- "Get up and move with friends and family" — feature headline (inclusive, family-first). *(verified live)*
+- "Trending topics" — section label (plain, orderly navigation). *(verified live)*
+
+**Forbidden register**: fear-based or urgency-manipulation marketing, dense industry jargon left unexplained, edgy/exclusionary humor, condescension toward younger players, exclamation-stacked hype.
+
+## 11. Brand Narrative
+
+Nintendo Co., Ltd. (任天堂) is a **Kyoto, Japan**-headquartered video-game and consumer-hardware company, originally founded in **1889** as a maker of *hanafuda* playing cards before transforming, across the late 20th century, into one of the most recognizable entertainment brands in the world. Its design identity is defined less by trend-chasing than by an unusual constancy: the **Nintendo red (`#e60012`)** and the wordmark have remained essentially unchanged for decades, and the brand treats that consistency as an asset rather than a constraint.
+
+That discipline carries into the digital product. Where many consumer-tech sites chase maximal contrast, heavy gradients, and aggressive conversion chrome, Nintendo's web surfaces stay deliberately calm: a light canvas, a single sacred accent color, gently rounded geometry, and imagery-forward storytelling. The product is fun; the chrome around it is composed. This restraint signals trust to a famously broad audience — Nintendo sells to children, parents, and adults who grew up with the brand simultaneously, and the design has to feel safe, legible, and joyful for all of them at once.
+
+What Nintendo refuses, visible in its design: the cold, high-contrast aesthetic of enterprise tech; dark-pattern urgency in commerce; and the dilution of its red into a decorative palette. What it embraces: a near-immutable brand red used with restraint, region-tuned typography (Geologica in the West, the YakuHan + Hiragino CJK stack in Japan), flat-and-light depth, and a warm, family-first voice — craft in service of play.
+
+## 12. Principles
+
+1. **One sacred red.** Nintendo red (`#e60012`) is the single action color and brand signature. *UI implication:* reserve it for primary CTAs, inline links, and the wordmark — never let a competing saturated hue dilute it.
+2. **Constancy is the brand.** The wordmark and red have barely changed in decades. *UI implication:* favor durable, classic choices over trend-driven styling; the 8-12px radius and warm grey ink should age gracefully.
+3. **Calm chrome, playful content.** The product is fun; the interface around it is composed. *UI implication:* keep elevation whisper-soft and layouts orderly so imagery and play carry the energy.
+4. **Region-tuned legibility.** Each script gets a font and rhythm tuned for it. *UI implication:* Geologica for Western surfaces; YakuHan + Hiragino with generous 2.0 line-height for Japanese.
+5. **Welcoming to everyone.** Kids, parents, and lifelong fans share the same surface. *UI implication:* clear hierarchy, plain copy, friendly geometry, and high legibility over cleverness.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable Nintendo audience segments (families, lifelong fans, new players), not individual people.*
+
+**Maya Thompson, 38, Seattle.** A parent buying a console and games for her two kids. Values that the store feels safe, legible, and unintimidating — clear prices, gentle CTAs, no dark-pattern urgency. Trusts the brand because the experience matches the family-friendly reputation.
+
+**Kenji Sato, 27, Osaka.** A lifelong fan who reads トピックス and Nintendo Direct recaps on the Japanese site. Appreciates the generous line-height and authentic typography that make dense Japanese announcements easy to read. Notices and values that the red and wordmark never change.
+
+**Diego Ramirez, 19, Mexico City.** A new Switch owner browsing games on sale. Finds the red "Learn more" and "Start shopping" buttons obvious and frictionless. Likes that the site is calm and image-forward rather than a wall of conversion pop-ups.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (wish list / cart, none yet)** | White canvas. Single Ink Grey (`#484848`) line explaining nothing is saved yet, with one red CTA to browse games. No clutter, friendly tone. |
+| **Empty (search, no results)** | Muted Grey (`#727272`) single line stating no matches, with suggestions or a path to browse. Calm, never a dead-end error. |
+| **Loading (storefront fetch)** | Skeleton media tiles at final 12px-radius dimensions on `#f8f8f8` tint, flat soft pulse consistent with the near-shadowless system. |
+| **Loading (in-place refresh)** | Previous content stays visible; a subtle red `#e60012` progress affordance signals activity without blocking the view. |
+| **Error (page/network failure)** | Friendly Ink Grey message with plain-language explanation and a retry. No raw error codes; states what to do next. |
+| **Error (form validation)** | Field-level message below the input describing what's valid, in a warm tone — not just "Required". |
+| **Success (purchase / pre-order placed)** | Brief calm confirmation with order/next-step detail linked immediately below. Enthusiastic but not gimmicky. |
+| **Skeleton** | `#f8f8f8` blocks at final dimensions, 12px radius, flat soft pulse — no shadow shimmer. |
+| **Disabled** | Disabled Grey (`#c8c8c8`) text on reduced-opacity surface; red actions fade rather than turn a foreign grey, preserving brand read. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-fast` | 120ms | Hover, button press, focus |
+| `motion-standard` | 220ms | Card/section reveal, carousel slide, dropdown |
+| `motion-slow` | 360ms | Page-level transitions, hero/banner reveals |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, sheets, carousel slides |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
+
+**Motion rules**: Motion is friendly but composed — consistent with the calm, image-forward aesthetic. Carousels slide at `motion-standard / ease-enter`; cards lift subtly on hover with the soft shadow deepening slightly. A gentle, tasteful bounce is acceptable on playful interactive moments (it's a games brand), but core navigation and commerce flows stay steady and predictable. Under `prefers-reduced-motion: reduce`, carousels and reveals collapse to instant; the experience remains fully functional.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 live inspect (2026-06-17) via global playwright getComputedStyle on two surfaces:
+- https://www.nintendo.com/us/ — US store: Geologica Variable, ink #484848, brand red #e60012
+  (rgb 230,0,18) on primary CTAs/links/wordmark, utility pills #f8f8f8, media-card 12px radius,
+  soft shadow rgba(0,0,0,0.07) 0px 2px 8px, featured-card shadow rgba(72,72,72,0.15) 0px 4px 16px.
+- https://www.nintendo.com/jp/ — Japanese site: CJK stack
+  "YakuHanJPs, Roboto, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Arial, nc3Jp, sans-serif",
+  ink #3c3c3c, body line-height 32px on 16px, red #e60012 confirmed dominant, surface #f2f2f2,
+  tighter 2-3px radii + 50% circular icon chips.
+
+Token-level claims (§1-9) are sourced from these two live inspections.
+
+Voice samples (§10) are verbatim from the live US homepage (feature headlines, "Trending topics" label).
+
+Brand narrative (§11): Nintendo Co., Ltd. (任天堂), Kyoto-headquartered, founded 1889 as a
+hanafuda card maker, later a global video-game/hardware company. These are widely documented
+public facts; specific claims beyond the homepage are general public knowledge, not directly
+quoted from a verified Nintendo statement in this turn.
+
+Personas (§13) are fictional archetypes informed by publicly observable Nintendo audience
+segments (families, lifelong fans, new players). Names are illustrative; they do not refer to
+real people.
+
+Interpretive claims (e.g., "one sacred red", "calm chrome, playful content", "constancy is the
+brand") are editorial readings connecting Nintendo's observed design to its positioning, not
+directly sourced Nintendo statements.
+-->