# Retro pixel / 8-bit

Also called: pixel art UI, 8-bit design, NES style, 16-bit, retro game UI  
Era: 1983-1995 consoles; web revival 2014 onward (NES.css 2018)  
Page: https://designforai.dev/style/retro-pixel-8-bit

## Traits

- pixel fonts and pixel-edged UI: buttons with stepped corners drawn in box-shadow
- limited palettes (NES 54 colours, Game Boy 4 greens, PICO-8 16 colours)
- image-rendering: pixelated on all sprites; everything scaled by whole multiples (2x, 3x, 4x)
- dialogue boxes with thick borders, blinking arrows, "PRESS START"
- chunky progress bars, hearts and coins as UI metaphors
- motion in steps(), never eased; sprite-sheet animation
- sound-effect feel in hover states (bounce 1 frame)

Palette: #212529 page (or #0f380f Game Boy), #f8f8f8 text, #e76e55 red, #92cc41 green, #209cee blue, #f7d51d yellow

Type: Press Start 2P (very loud, 8-12px), Silkscreen, VT323 (readable, 18-22px), Pixelify Sans for headings; always integer sizes that match the pixel grid

## Do

- snap everything to an 8px grid and scale sprites by integers with image-rendering: pixelated
- draw borders and corners with box-shadow stacks or border-image, not border-radius
- pick one real console palette and stay inside it

## Don't

- do not anti-alias: no blur, no soft shadows, no eased transitions
- do not set body text in Press Start 2P above a few lines; use VT323 or Silkscreen for reading
- do not mix pixel scales (2x sprite next to a 3x sprite looks wrong)

Known for it: NES.css, Celeste and Shovel Knight sites, Nintendo anniversary pages, itch.io game pages

## CSS seed

```css
:root{--bg:#212529; --fg:#f8f8f8; --accent:#e76e55; --accent2:#92cc41; --accent3:#209cee; --radius:0; --border:4px solid #f8f8f8; --font:'Press Start 2P',monospace}
```

## Prompt

Build the site in 8-bit pixel style. Background #212529, text #f8f8f8, accents #e76e55, #92cc41, #209cee, #f7d51d only. Fonts: Press Start 2P for headings and buttons at 24/16/12px, VT323 at 22px for body (line-height 1.3). All sizes and spacing on an 8px grid. Buttons and cards: no border-radius; draw a 4px pixel border with box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) so the corners stay notched. Dialogue-box hero with a blinking down-arrow (steps(2) 1s infinite) and a "PRESS START" call to action. Progress bars as segmented 8px blocks. Any image gets image-rendering: pixelated and is scaled 3x from a small source. Hover: element jumps up 4px with no transition; active: down 4px. Icons are 16x16 pixel SVGs. No gradients, no blur, no easing anywhere.