A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Nintendo 2001, in one page
Nintendo.com circa 2001 is the web rendered as console hardware. Where most sites of the era reached for either grunge texture or corporate gradients, this interface builds itself out of brushed-periwinkle metal plates — every region is a discrete beveled panel, edge-lit with a brighter highlight on top and a {colors.chrome-indigo} shadow line beneath, as if stamped from the same injection-molded plastic as a Game Boy. The whole page reads as one machine faceplate: a body of {colors.canvas} periwinkle chrome carrying inset modules, with the corners of the largest panels physically chamfered (cut at 45°) rather than rounded, reinforcing the manufactured-object feeling.
The system runs on a tight three-voice contrast. The structural voice is the cool periwinkle-to-indigo chrome ({colors.canvas}, {colors.periwinkle}, {colors.chrome-indigo}). The authority voice is {colors.carbon} carbon-navy — the top navigation bar, the right-rail action buttons, and the footer, all near-black slabs printed with a faint halftone dot-matrix texture that evokes a speaker grille. The energy voice is warm and reserved for one job only: telling you where to go. {colors.nav-gold} lights the primary menu words, {colors.amber} fills the utility chips and badges, and {colors.signal} orange marks every "forward" cue — the round arrow buttons, the chevron chips beside each headline, the Submit button. Warmth in this system always means *action*; the cool chrome never carries it.
Atmosphere comes from the hero fields, which break the periwinkle calm with full-bleed product photography over textured backdrops — a circuit-board cyan on Systems, a motion-blurred racetrack red on Games, a soft lavender wash on Home — each topped with chunky {typography.display} wordmarks rendered in white with a heavy outline and hard drop shadow, the visual signature of game-box cover type. A pixel-eared Mario leans in from the masthead with a "Welcome to Nintendo.com!" speech bubble, anchoring the entire machine to the brand's playful character voice.
Key Characteristics:
- Every UI region is a beveled metal plate in
{colors.canvas}periwinkle, edge-lit on top and shadow-lined with{colors.chrome-indigo}below — the page is assembled, not laid out. - Chamfered (cut-corner) panel geometry on the largest modules; most chrome is sharp-edged (
{rounded.none}), with rounding reserved for the logo pill, radio dots, and circle-arrow badges ({rounded.full}). - A carbon-navy command layer (
{colors.carbon}) with halftone-dot texture carries the top nav, right-rail buttons, and footer. - Warmth is rationed as directional signal only:
{colors.nav-gold}for menu words,{colors.amber}for utility chips/badges,{colors.signal}for every forward/Submit cue. - Photographic hero fields cycle a page-specific accent tint (
{colors.lavender}home →{colors.systems-teal}systems →{colors.games-red}games) under outlined{typography.display}box-art wordmarks. - A dense, modular grid — masthead, dual nav bars, hero, then a two-thirds content column of stacked list/feature panels beside a one-third right action rail — packed with minimal whitespace.
- Character-led: the Mario mascot speech-bubble masthead and ESRB badge frame the chrome with brand personality and regulatory trust marks.
Do's and don'ts
Do
- Build every region as a beveled plate: a
{colors.canvas}body with a brighter top edge and a{colors.chrome-indigo}shadow line beneath. The "assembled machine" feel depends on it. - Reserve warm color for wayfinding only —
{colors.nav-gold}for nav words,{colors.amber}for utility/badges,{colors.signal}for forward/Submit. Cool chrome never carries action color. - Keep structural labels uppercase Arial Bold with 0.5px tracking (
{typography.ui-label}) — it is the silkscreen-legend voice of the whole system. - Render hero wordmarks as outlined + drop-shadowed
{typography.display}over full-bleed photographic fields tinted per page. - Use
{colors.carbon}with halftone texture for the command layer (nav, right rail, footer) to separate "system controls" from "content." - Let panels butt together with thin bevel seams; density is the intended texture.
- Default corners to sharp/chamfered (
{rounded.none}); spend roundness only on the logo pill, radio dots, and circle-arrow badges.
Don't
- Don't soften every corner — turning the sharp chrome into a uniformly rounded card system erases the manufactured-faceplate identity.
- Don't introduce a soft blurred drop-shadow elevation language; depth here is hard bevels and pictorial photography, not Material elevation.
- Don't let
{colors.signal}and{colors.amber}bleed into decorative use — warm color must always mean "act here." - Don't add accent colors outside the page-tint heroes (
{colors.systems-teal},{colors.games-red}); the steady-state chrome is strictly cool periwinkle + carbon. - Don't widen body copy or whitespace into an airy modern layout; the packed, fixed-canvas density is the brand.
- Don't flatten the dual-nav structure (gold primary words over the pale secondary strip) into one bar — the layered command hierarchy is signature.
- Don't render hero or system wordmarks as flat text; without the outline + shadow they lose the box-art reference entirely.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Nintendo 2001 design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #e60012
- signal: #f68d1f
- amber: #ecab37
- nav-gold: #e48600
- canvas: #7a8aba
- canvas-soft: #9fbee7
- sky: #9fbee7
- lavender: #acace7
- ice: #c0d5e6
- periwinkle: #8ba1d4
Type:
- families: Arial, Arial Black, Silkscreen, Archivo Black
- scale: 10, 11, 12, 13, 15, 44
- weights: 400, 700, 900
Shape:
- radius: 0, 2, 4, 6, 10
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.
Spacing: 2, 4, 8, 12, 16, 24, 32, 48
Rules:
- Build every region as a beveled plate: a `{colors.canvas}` body with a brighter top edge and a `{colors.chrome-indigo}` shadow line beneath. The "assembled…
- Reserve warm color for wayfinding only — `{colors.nav-gold}` for nav words, `{colors.amber}` for utility/badges, `{colors.signal}` for forward/Submit. Cool…
- Keep structural labels uppercase Arial Bold with 0.5px tracking (`{typography.ui-label}`) — it is the silkscreen-legend voice of the whole system.
- Render hero wordmarks as outlined + drop-shadowed `{typography.display}` over full-bleed photographic fields tinted per page.
- Use `{colors.carbon}` with halftone texture for the command layer (nav, right rail, footer) to separate "system controls" from "content."
- Let panels butt together with thin bevel seams; density is the intended texture.
Avoid:
- Don't soften every corner — turning the sharp chrome into a uniformly rounded card system erases the manufactured-faceplate identity.
- Don't introduce a soft blurred drop-shadow elevation language; depth here is hard bevels and pictorial photography, not Material elevation.
- Don't let `{colors.signal}` and `{colors.amber}` bleed into decorative use — warm color must always mean "act here."
- Don't add accent colors outside the page-tint heroes (`{colors.systems-teal}`, `{colors.games-red}`); the steady-state chrome is strictly cool periwinkle + carb…
- Don't widen body copy or whitespace into an airy modern layout; the packed, fixed-canvas density is the brand.
- Don't flatten the dual-nav structure (gold primary words over the pale secondary strip) into one bar — the layered command hierarchy is signature.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
The palette is a cool metallic chassis with rationed warm signal. Read it as three layers: the periwinkle chrome that everything is built from, the carbon command slabs, and the warm wayfinding accents that are the only saturated color in the steady-state interface.
Brand & Accent
- Nintendo Red (
{colors.primary}— #e60012): The racetrack logo wordmark and the brand's anchor hue. Used sparingly as pure brand identity and doubled as the validation/alert color. Never a surface fill outside the logo plate. - Signal Orange (
{colors.signal}— #f68d1f): The "go forward" color. Fills every round arrow button, every chevron chip beside a headline, the Submit button, and the "Play It On" platform badges. If something advances you, it is orange. - Amber (
{colors.amber}— #ecab37): Utility energy. Fills the Code Bank / Game Finder / Go chips, the info-box header tabs, the sweepstakes stars, and the ESRB Privacy-Certified badge. Distinguished from Signal Orange by being more golden and reserved for *tools and marks* rather than *forward motion*. - Nav Gold (
{colors.nav-gold}— #e48600): The deeper orange-gold reserved exclusively for the primary navigation words (Games, Systems, News, Nsider, Downloads) glowing on the carbon bar.
Surface
- Periwinkle Metallic (
{colors.canvas}— #7a8aba): The primary interface body — the brushed-metal chrome that every module is inset into. - Light Periwinkle (
{colors.periwinkle}— #8ba1d4): Raised mid panels (poll panel, system tiles) — one step brighter than canvas for elevation. - Pale Sky (
{colors.sky}/{colors.canvas-soft}— #9fbee7): The secondary-nav strip and light inset panel fills. - Pale Lavender (
{colors.lavender}— #acace7): The home hero field and side promo cards. - Pale Ice (
{colors.ice}— #c0d5e6): The News hero panel field. - Chrome Indigo (
{colors.chrome-indigo}— #3d4f97): The beveled border / shadow line under every plate, and the leading angled edge of nav tabs. - Muted Indigo (
{colors.muted-indigo}— #60619c): Inactive tabs and recessed chrome. - Platinum Gray (
{colors.platinum}— #dedede): The list-row and inset content surface — news headlines and archive rows sit on this cool platinum. - White (
{colors.surface}— #ffffff): Content cards, form fields, the logo pill, and list-row highlight.
Text
- Carbon Navy (
{colors.ink}— #21242e): Primary text on light chrome, and the fill of the dark command layer (nav bar, rail buttons, footer). - Chrome Indigo (
{colors.ink-soft}— #3d4f97): Secondary text and small-caps chrome labels. - White (
{colors.on-primary}— #ffffff): Text on carbon, red, and orange chrome.
Semantic
- Error / Alert (
{colors.error}— #e60012): Validation and destructive states reuse the brand red. - Systems Teal (
{colors.systems-teal}— #206479): Page-accent tint — the Systems hero's circuit-board cyan field. - Games Red (
{colors.games-red}— #a7282b): Page-accent tint — the Games hero's motion-blurred racetrack field.
Type scaleRead the full spec
Font Family
The era's web-safe reality is Arial / Helvetica throughout — there are no webfonts. The system gets its character not from typeface choice but from *treatment*: tight uppercase tracking on every chrome label, and a heavy outlined-and-shadowed display style for hero wordmarks that mimics console box-art logotype. Body copy is plain small Arial; links are the same family at bold weight in {colors.ink-soft}.
The micro-labels (vertical left-rail tabs, footer fine print) render with the soft pixelation characteristic of small bitmap-rendered Arial of the period — for a faithful reproduction, pair Arial with a pixel face such as Silkscreen or VT323 at the 10–11px label sizes.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display} | 44px | 900 | 1 | 0 | Hero box-art wordmarks (white, heavy outline + hard drop shadow) |
{typography.hero-tagline} | 15px | 700 | 1.3 | 0 | Hero supporting line ("Gorgeous graphics, great sound…") |
{typography.nav-link} | 13px | 700 | 1 | 0.5px | Primary nav menu words, uppercase |
{typography.ui-label} | 11px | 700 | 1.1 | 0.5px | Section header labels, panel titles, button text — uppercase |
{typography.link} | 12px | 700 | 1.4 | 0 | News headline links, "Read More" |
{typography.body} | 12px | 400 | 1.4 | 0 | Descriptions, poll text, info-box copy |
{typography.micro} | 10px | 400 | 1.3 | 0 | Footer copyright, calendar cells, fine print |
Principles
- Uppercase + tracking is the chrome voice. Every structural label — nav words, panel headers ("Official News", "Featured Sites", "Player's Poll"), button text — is uppercase Arial Bold with a half-pixel of tracking. It reads like silkscreened legends on a controller.
- Display type is outlined, never flat. Hero wordmarks always carry a thick contrasting outline and a hard offset shadow so they pop off the photographic field — the box-art convention.
- Body stays small and quiet. At 12px, descriptive copy never competes with the chrome; the hierarchy is carried entirely by the labels and the photography.
Note on Font Substitutes
Arial is freely available system-wide and needs no substitute. To recreate the period bitmap rendering of micro-labels, layer a pixel font (Silkscreen, VT323, or Press Start 2P for the chunkiest legends) at 10–11px and disable anti-aliasing. The display wordmarks are bespoke logotypes; the closest open substitute is Archivo Black (italicized) or Arial Black with a CSS text-stroke outline and text-shadow offset.
Components and layoutRead the full spec
No hover states are documented. Each spec below covers Default and (where extracted) Pressed/Active. Variants live as separate
components:entries.
Navigation
nav-bar — Primary top navigation
{colors.carbon}slab with a faint halftone-dot texture, ~28px tall, carrying the{components.logo-pill}at left, the five{colors.nav-gold}section words in{typography.nav-link}uppercase, and the amber Code Bank / Game Finder utility chips at right. Sharp corners ({rounded.none}),{spacing.sm}padding.
subnav-strip — Secondary navigation
- A
{colors.canvas-soft}pale-sky strip directly beneath the nav bar, carrying utility links (Parents, Customer Service, Corporate, Global, Privacy, Store, Contact) in{typography.ui-label}{colors.ink}, separated by thin dividers. Sharp,{spacing.xs}padding.
left-rail-tab — Rotated section tabs
- A thin vertical strip of
{colors.carbon}tabs (Top Ten, Top Rentals, Player's Choice, ESRB Ratings) with vertically-rotated{typography.ui-label}text in{colors.canvas-soft}, clipped to the left chrome edge. Sharp corners,{spacing.xs}padding.
Brand & Masthead
logo-pill — Nintendo racetrack logo
- The wordmark in
{colors.primary}red set inside a white{rounded.full}racetrack pill, outlined. Sits at the left of the nav bar.{spacing.xs}padding.
mascot-bubble — Mario welcome speech bubble
- A white
{rounded.lg}rounded-rectangle speech bubble with a tail, carrying "Welcome to Nintendo.com!" in{typography.micro}{colors.carbon}, paired with the Mario cutout in the masthead.{spacing.sm}padding.
Buttons
button-primary — Amber utility / Go chip
{colors.amber}fill,{colors.carbon}text in{typography.ui-label},{rounded.xs}corners,{spacing.md}padding, with a beveled top highlight. The everyday tool button (Code Bank, Game Finder, Go).- Pressed state in
button-primary-pressed— fill deepens to{colors.nav-gold}.
button-submit — Forward / Submit
{colors.signal}orange fill,{colors.on-primary}white text in{typography.ui-label},{rounded.xs},{spacing.lg}padding. The "commit" action (poll Submit, Go on archives).
button-secondary — Right-rail action button
{colors.carbon}near-black slab,{colors.on-primary}white text in{typography.ui-label}, sharp{rounded.none}corners,{spacing.md}padding, with a small leading icon. Used for Login / Subscribe / Newsletter / Help in the right rail.
button-icon-arrow — Round forward arrow
- A 22px
{colors.signal}orange{rounded.full}disc with a white chevron — the primary "go" affordance on hero panels and section links.
button-arrow-chip — Headline chevron chip
- An 18px
{colors.signal}orange{rounded.xs}chip with a white forward chevron, sitting at the right end of each{components.news-row}to advance to the article.
Inputs & Forms
search-field — Masthead search input
- White
{colors.surface}field,{colors.ink}text in{typography.body},{rounded.xs}corners, 1px{colors.hairline}border, ~20px tall, paired with an "All" category dropdown and an amber Go chip.
text-input — Generic text field
- Same chassis as
search-field: white fill,{colors.ink}text,{rounded.xs},{colors.hairline}1px border,{spacing.xs}padding. Used in the Login form (Username / Password / E-mail), news-archive keyword, and date fields.
select-dropdown — Native select ("Click to choose")
- A white
{colors.surface}field with{colors.ink}text in{typography.body},{rounded.xs}corners, and a hard 1px{colors.carbon}border (sharper than the inputs) closing on a beveled native dropdown-chevron button at the right edge. ~24px tall,{spacing.xs}padding. Used for the Register form's Month / Year pickers.
field-label — Inline form label
- A bold
{colors.ink}label in{typography.link}(Arial Bold 12px) sitting left of its input (Username, Password, E-mail, Month, Year).{rounded.none},{spacing.xxs}padding.
radio-option — Poll radio button
- A 12px white
{rounded.full}radio dot with a{colors.hairline}ring, paired with{typography.body}option text. Used in the Player's Poll.
form-panel — Form container (Login / Register)
- A
{colors.platinum}light-gray{rounded.md}panel holding a form, capped by a{components.section-label-bar}header (≡ LOG IN / ≡ REGISTER).{spacing.lg}interior. The Login page pairs two side by side.
dotted-divider — Dotted hairline rule
- A 1px dotted
{colors.muted-indigo}separator rule used between form sub-sections (the "Note:" line, "Forgot Your Password?"). A recurring Y2K-chrome detail — dotted rather than solid.
Cards & Panels
hero-panel — Photographic hero plate
- A
{rounded.md}beveled rectangle filled with full-bleed product photography over a page-tinted field ({colors.lavender}/{colors.systems-teal}/{colors.games-red}), topped with an outlined{typography.display}wordmark and a{components.button-icon-arrow}call-to-action.{spacing.lg}interior.
section-label-bar — Panel header
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-nintendo-2001 {--page-bg: #455585;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #ffc3c9;
--link-hover-color: #ff909b;
--border-color: #66749b;
--card-bg: #455585;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #54638f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #455585;
--footer-text-color: #cacfdc;
--button-bg: #e60012;
--button-text-color: #ffffff;
--button-hover-bg: #b3000e;
--button-border: none;
--button-border-radius: 4px;
--button-secondary-bg: #505f8c;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #5b6994;
--button-secondary-border: 1px solid #66749b;
--prompt-bg: #4e5e8b;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 4px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- dell 1996 74.8%
- kashiyama 73.1%
- posthog 72.9%
- bandainamco 72.8%
- spiral 71.4%
Where this came from
- Source document
volt/design-md/nintendo-2001/DESIGN.md· 37.8 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.