Nintendo (2001)

A Y2K hardware aesthetic that treats the web page like the faceplate of a game system. Brushed-periwinkle beveled metal plates, amber-glow navigation over a halftone-dotted carbon bar, and bold outlined display type on circuit-board hero fields. Warm gold/amber/orange is rationed as directional signal only.

Homepage Example

Nintendo GamesSystemsNews
Super Mario®
Tools
code bank
Games
find a fit
©1997-2001 Nintendo

Color Palette (16)

Nintendo Red#e60012
Signal Orange#f68d1f
Amber#ecab37
Nav Gold#e48600
Canvas#7a8aba
Lavender#acace7
Ice#c0d5e6
Periwinkle#8ba1d4
Chrome-The#3d4f97
Muted Indigo#60619c
Sky#9fbee7
Platinum#dedede
Carbon#21242e
On-primary#ffffff
Systems Teal#206479
Games Red#a7282b

Typography (7)

display
display32px · weight 900
hero-tagline
hero-tagline15px · weight 700
nav-link
nav-link13px · weight 700
ui-label
ui-label11px · weight 700
link
link12px · weight 700
body
body12px · weight 400
micro
micro10px · weight 400

Components (10)

nav-bar
nav-bar
logo-pill
logo-pill
button-primary
button-primary
button-submit
button-submit
button-secondary
button-secondary
hero-panel
hero-panel
form-panel
form-panel
poll-panel
poll-panel
footer-bar
footer-bar
code-bank-chip
code-bank-chip

Border Radius

0 (0px)
2 (2px)
4 (4px)
6 (6px)
10 (10px)
pill (9999px)

Design Philosophy

Overview

Nintendo.com circa 2001 is the web rendered as console hardware. Every region is a beveled periwinkle metal plate, edge-lit with a brighter top highlight and a Chrome-Indigo shadow line beneath, as if stamped from the same injection-molded plastic as a Game Boy. The page reads as one machine faceplate with characters chamfered corners on the largest panels.

Key Characteristics

  • Beveled metal plates in periwinkle chrome, assembled rather than laid out
  • A carbon-navy command layer with a halftone-dot texture carries the top nav, rail buttons, and footer
  • Warmth is rationed as directional signal: nav gold for menu words, amber for utility chips/badges, signal orange for forward cues
  • Photographic hero fields cycle lavender, teal, and red page accents under outlined box-art wordmarks
  • Sharp, chamfered panel geometry with roundness reserved for the logo pill, radio dots, and arrow badges

Do's and Don'ts

Build every region as a beveled plate with a brighter top edge and Chrome-Indigo shadow line. Reserve warm colors for wayfinding only. Keep structural labels uppercase Arial Bold with 0.5px tracking. Don't soften every corner or add soft blurred drop-shadows — depth here is hard bevels.