Nintendo DESIGN.md

Overview

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

Primary tasks

• Search the store for a game, hardware item, or news article
• Shop for a console and games for your kids
• Save games to a wish list or cart before buying
• Pre-order or buy a game and see the next step
• Read Nintendo Direct recaps and topic announcements

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.

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.

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.

Colors

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.

Typography

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

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.

Layout

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

Responsive Behavior

Breakpoints

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

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.soft: rgba(0,0,0,0.07) 0px 2px 8px 0px
• shadow.card: rgba(72,72,72,0.15) 0px 4px 16px 0px

Motion & Easing

Durations:

Easings:

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.

Components

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

States

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

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.

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.

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