Design System — Nintendo 2001 Inspired Spec

Visual Theme & Atmosphere

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.

...

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

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

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

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

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

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

primary

#e60012

signal

#f68d1f

amber

#ecab37

nav-gold

#e48600

canvas

#7a8aba

canvas-soft

#9fbee7

sky

#9fbee7

lavender

#acace7

ice

#c0d5e6

periwinkle

#8ba1d4

chrome-indigo

#3d4f97

muted-indigo

#60619c

platinum

#dedede

surface

#ffffff

carbon

#21242e

hairline

#5a5f8c

ink

#21242e

ink-soft

#3d4f97

on-primary

#ffffff

systems-teal

#206479

games-red

#a7282b

error

#e60012

Typography Rules

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

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