# Retro-Pixel / 8-Bit

Auch bekannt als: Pixel-Art-UI, 8-Bit-Design, NES-Stil, 16-Bit, Retro-Game-UI  
Ära: Konsolen 1983-1995; Web-Revival ab 2014 (NES.css 2018)  
Seite: https://designforai.dev/de/style/retro-pixel-8-bit

## Merkmale

- Pixelschriften und pixelkantiges UI: Buttons mit gestuften Ecken, per box-shadow gezeichnet
- begrenzte Paletten (NES 54 Farben, Game Boy 4 Grüntöne, PICO-8 16 Farben)
- image-rendering: pixelated auf allen Sprites; alles in ganzzahligen Vielfachen skaliert (2x, 3x, 4x)
- Dialogboxen mit dicken Rändern, blinkende Pfeile, "PRESS START"
- klobige Fortschrittsbalken, Herzen und Münzen als UI-Metaphern
- Motion in steps(), nie geeased; Sprite-Sheet-Animation
- Soundeffekt-Gefühl in Hover-Zuständen (1 Frame Bounce)

Palette: #212529 Seite (oder #0f380f Game Boy), #f8f8f8 Text, #e76e55 Rot, #92cc41 Grün, #209cee Blau, #f7d51d Gelb

Schrift: Press Start 2P (sehr laut, 8-12px), Silkscreen, VT323 (lesbar, 18-22px), Pixelify Sans für Überschriften; immer ganzzahlige Größen, die zum Pixelraster passen

## Do

- snappe alles auf ein 8px-Raster und skaliere Sprites ganzzahlig mit image-rendering: pixelated
- zeichne Ränder und Ecken mit box-shadow-Stapeln oder border-image, nicht mit border-radius
- wähle eine echte Konsolenpalette und bleib darin

## Don't

- kein Anti-Aliasing: kein Blur, keine weichen Schatten, keine geeasten Transitions
- setze Fließtext nicht über ein paar Zeilen hinaus in Press Start 2P; nutze VT323 oder Silkscreen zum Lesen
- misch keine Pixelskalen (ein 2x-Sprite neben einem 3x-Sprite sieht falsch aus)

Bekannt dafür: NES.css, Seiten von Celeste und Shovel Knight, Nintendo-Jubiläumsseiten, itch.io-Spieleseiten

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

Baue die Seite im 8-Bit-Pixelstil. Hintergrund #212529, Text #f8f8f8, Akzente nur #e76e55, #92cc41, #209cee, #f7d51d. Schriften: Press Start 2P für Überschriften und Buttons bei 24/16/12px, VT323 bei 22px für Fließtext (line-height 1.3). Alle Größen und Abstände auf einem 8px-Raster. Buttons und Karten: kein border-radius; zeichne einen 4px Pixelrand mit box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8), damit die Ecken ausgekerbt bleiben. Dialogbox-Hero mit blinkendem Pfeil nach unten (steps(2) 1s infinite) und einem "PRESS START"-Call-to-Action. Fortschrittsbalken als segmentierte 8px-Blöcke. Jedes Bild bekommt image-rendering: pixelated und wird 3x aus einer kleinen Quelle skaliert. Hover: Element springt ohne Transition 4px nach oben; aktiv: 4px nach unten. Icons sind 16x16 Pixel-SVGs. Keine Verläufe, kein Blur, nirgends Easing.