# Retro pixel / 8 bits

También llamado: UI de pixel art, diseño de 8 bits, estilo NES, 16 bits, UI de juego retro  
Época: consolas 1983-1995; revival web de 2014 en adelante (NES.css en 2018)  
Página: https://designforai.dev/es/style/retro-pixel-8-bit

## Rasgos

- fuentes pixeladas y UI con bordes de píxel: botones con esquinas escalonadas dibujadas con box-shadow
- paletas limitadas (54 colores de NES, 4 verdes de Game Boy, 16 colores de PICO-8)
- image-rendering: pixelated en todos los sprites; todo escalado por múltiplos enteros (2x, 3x, 4x)
- cajas de diálogo con bordes gruesos, flechas parpadeantes, "PRESS START"
- barras de progreso robustas, corazones y monedas como metáforas de UI
- movimiento en steps(), nunca con easing; animación por hoja de sprites
- sensación de efecto de sonido en los estados hover (rebote de 1 frame)

Paleta: #212529 página (o #0f380f Game Boy), #f8f8f8 texto, #e76e55 rojo, #92cc41 verde, #209cee azul, #f7d51d amarillo

Tipografía: Press Start 2P (muy ruidosa, 8-12px), Silkscreen, VT323 (legible, 18-22px), Pixelify Sans para títulos; siempre tamaños enteros que encajen en la retícula de píxeles

## Haz

- ajusta todo a una retícula de 8px y escala los sprites por enteros con image-rendering: pixelated
- dibuja bordes y esquinas con pilas de box-shadow o border-image, no con border-radius
- elige una paleta de consola real y no te salgas de ella

## Evita

- no suavices: sin blur, sin sombras suaves, sin transiciones con easing
- no compongas el cuerpo en Press Start 2P más allá de unas pocas líneas; usa VT323 o Silkscreen para leer
- no mezcles escalas de píxel (un sprite a 2x junto a uno a 3x se ve mal)

Conocido por: NES.css, sitios de Celeste y Shovel Knight, páginas de aniversario de Nintendo, páginas de juegos en itch.io

## Semilla CSS

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

## Prompt

Construye el sitio en estilo pixel de 8 bits. Fondo #212529, texto #f8f8f8, acentos únicamente #e76e55, #92cc41, #209cee, #f7d51d. Fuentes: Press Start 2P para títulos y botones a 24/16/12px, VT323 a 22px para el cuerpo (line-height 1.3). Todos los tamaños y espaciados en una retícula de 8px. Botones y tarjetas: sin border-radius; dibuja un borde de píxel de 4px con box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) para que las esquinas queden dentadas. Hero como caja de diálogo con una flecha hacia abajo parpadeante (steps(2) 1s infinite) y una llamada a la acción "PRESS START". Barras de progreso como bloques segmentados de 8px. Cualquier imagen recibe image-rendering: pixelated y se escala 3x desde un origen pequeño. Hover: el elemento salta 4px hacia arriba sin transición; active: 4px hacia abajo. Los iconos son SVG de 16x16 píxeles. Sin gradientes, sin blur, sin easing en ningún sitio.