Design System Analysis of Nintendo.com (2001)

The web rendered as console hardware. Every region is a beveled periwinkle metal plate, edge-lit on top and shadow-lined below — the page reads as one machine faceplate. A carbon-navy command layer carries the navigation, the right rail, and the footer; warm amber and orange are rationed strictly as wayfinding signal. Outlined box-art wordmarks sit on full-bleed photographic hero fields.

01 — Foundations

Color Palette

primary

#e60012

Nintendo Red — racetrack logo, alert

signal

#f68d1f

Signal Orange — forward cues, submit, badges

amber

#ecab37

Amber — utility buttons, info-box tabs, badges

nav-gold

#e48600

Nav Gold — top-nav menu links

canvas

#7a8aba

Periwinkle metallic — primary interface body

canvas-soft

#9fbee7

Pale Sky — secondary-nav strip, light panels

lavender

#acace7

Pale Lavender — home hero field

ice

#c0d5e6

Pale Ice — news hero field

periwinkle

#8ba1d4

Light Periwinkle — raised mid panels

chrome-indigo

#3d4f97

Chrome Indigo — beveled borders, tab edges

muted-indigo

#60619c

Muted Indigo — inactive tabs, secondary chrome

platinum

#dedede

Platinum Gray — list-row / inset surface

surface

#ffffff

White — content cards, list-row highlight

carbon

#21242e

Carbon Navy — nav bar, dark buttons, footer, ink

hairline

#5a5f8c

Hairline — blended bevel divider

systems-teal

#206479

Systems Teal — systems hero tint (page accent)

games-red

#a7282b

Games Red — games hero tint (page accent)

02 — Foundations

Typography

Arial / Helvetica throughout — the era had no webfonts. Character comes from treatment, not typeface: every chrome label is uppercase Arial Bold with half-pixel tracking (silkscreen-legend voice), while hero wordmarks are heavy outlined-and-shadowed display type mimicking console box-art logotype. Body stays small and quiet at 12px.

display
Arial Black Italic · 44px / 900
lh 1 · ls 0
Hero box-art wordmarks — outlined + drop shadow
ARIAL BLACK
hero-tagline
Arial Bold Italic · 15px / 700
lh 1.3 · ls 0
Hero supporting line
The quick brown Game Boy
nav-link
Arial Bold · 13px / 700
lh 1 · ls 0.5px
Primary nav menu words (uppercase)
OFFICIAL NEWS
ui-label
Arial Bold · 11px / 700
lh 1.1 · ls 0.5px
Section headers, panel titles, button text
OFFICIAL NEWS
link
Arial Bold · 12px / 700
lh 1.4 · ls 0
News headline links, Read More
The quick brown Game Boy
body
Arial · 12px / 400
lh 1.4 · ls 0
Descriptions, poll text, info-box copy
The quick brown Game Boy
micro
Arial · 10px / 400
lh 1.3 · ls 0
Footer copyright, calendar cells, fine print
The quick brown Game Boy
03 — Components

Button Variants

button-primary · amber utility / Go

Amber fill, carbon label, 2px radius, beveled top highlight — the everyday tool button.

button-submit · forward / commit

Signal-orange fill, white label — the "commit" action (poll Submit, archive Go).

button-secondary · carbon rail

Near-black slab, white label, sharp corners — the right-rail action rows.

button-icon-arrow · forward disc

22px orange disc with a white chevron — the primary "go" affordance on hero panels.

esrb-rating-squareE

White content-rating square stamping the ESRB letter on each game card.

04 — Components

Cards & Surfaces

news-row

Platinum-gray list row with a category icon, a bold headline link, and a trailing orange chevron chip. The workhorse content row.

featured-tile

Carbon-framed screenshot tile (~95×60px) with a micro URL caption, arranged in a tight 2×2 grid of featured sites.

poll-panel

Raised light-periwinkle panel posing a question with radio options and an orange Submit — the Player's Poll module.

hero-panel

Beveled rectangle of full-bleed product photography over a page-tinted field, topped with an outlined box-art wordmark and a circle-arrow CTA.

05 — Components

Form Elements

search-field + Go
text-input · white field
select-dropdown · Click to choose
field-label + text-input
Username
radio-option · poll choice
Oracle of Seasons
dotted-divider
Dotted hairline rule — separates form sub-sections.
06 — Foundations

Spacing Scale

8px base rhythm unit. Panels carry 12px (md) interior padding; larger modules use 16px (lg); section gaps run 24px (xl) to 48px (section). The layout is deliberately dense — whitespace is structural seam, not luxury.

xxs
2px
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
xxl
32px
section
48px
07 — Foundations

Border Radius

Sharpness with rationed roundness. Chrome is hard-edged and often chamfered (0px); roundness appears only where it signals a physical control — the pill logo, radio dots, and circle-arrow badges (9999px).

0px
none
2px
xs
4px
sm
6px
md
10px
lg
pill
full
08 — Foundations

Elevation & Depth

Inset / Plate — recessed bevel: darker chrome-indigo top edge, lighter bottom edge. List rows, fields, content plates.
Command slab — carbon near-black with halftone dot-matrix texture, sitting "above" the chrome. Nav bar, right-rail buttons, footer.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Desktop (only)~780–830px fixedThe native, sole target — a fixed-width application-style layout that does not reflow
Narrow window< 780pxHorizontal scroll (no reflow); the table layout stays fixed
Modern port — tablet720–1024pxDual nav bars → single carbon bar; two-column body → stacked; right rail moves below content
Modern port — mobile< 720pxLeft rotated-tab strip → horizontal chip row or removed; hero stays full-bleed with outlined wordmark
375
768
1024
1280
1440

Touch targets: button-primary clears 44×44 WCAG-AAA at 0/20px padding. Collapsing: nav → hamburger below the tablet breakpoint (yellow CTA stays); multi-column pricing/feature grids reflow to a single stacked column; section padding compresses from section (128px) toward giant (64px); display type scales down while keeping weight 500.