# Pixel retrô / 8-bit

Também chamado de: UI pixel art, design 8-bit, estilo NES, 16-bit, UI de jogo retrô  
Era: consoles de 1983-1995; revival na web de 2014 em diante (NES.css em 2018)  
Página: https://designforai.dev/pt/style/retro-pixel-8-bit

## Traços

- fontes pixeladas e UI de bordas pixeladas: botões com cantos em degrau desenhados com box-shadow
- paletas limitadas (54 cores do NES, 4 verdes do Game Boy, 16 cores do PICO-8)
- image-rendering: pixelated em todos os sprites; tudo escalado por múltiplos inteiros (2x, 3x, 4x)
- caixas de diálogo com bordas grossas, setas piscando, "PRESS START"
- barras de progresso robustas, corações e moedas como metáforas de UI
- movimento em steps(), nunca com easing; animação por sprite sheet
- sensação de efeito sonoro nos estados de hover (pulo de 1 frame)

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

Tipografia: Press Start 2P (muito chamativa, 8-12px), Silkscreen, VT323 (legível, 18-22px), Pixelify Sans para títulos; sempre tamanhos inteiros que batem com a grade de pixels

## Faça

- encaixe tudo numa grade de 8px e escale sprites por inteiros com image-rendering: pixelated
- desenhe bordas e cantos com pilhas de box-shadow ou border-image, não border-radius
- escolha uma paleta de console real e fique dentro dela

## Evite

- não suavize: sem blur, sem sombras suaves, sem transições com easing
- não componha texto de corpo em Press Start 2P além de algumas linhas; use VT323 ou Silkscreen para leitura
- não misture escalas de pixel (um sprite 2x ao lado de um 3x parece errado)

Conhecido por: NES.css, sites de Celeste e Shovel Knight, páginas de aniversário da Nintendo, páginas de jogos no itch.io

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

Construa o site em estilo pixel 8-bit. Fundo #212529, texto #f8f8f8, acentos #e76e55, #92cc41, #209cee, #f7d51d apenas. Fontes: Press Start 2P para títulos e botões a 24/16/12px, VT323 a 22px para o corpo (line-height 1.3). Todos os tamanhos e espaçamentos numa grade de 8px. Botões e cards: sem border-radius; desenhe uma borda pixelada de 4px com box-shadow (0 -4px #f8f8f8, 0 4px #f8f8f8, -4px 0 #f8f8f8, 4px 0 #f8f8f8) para os cantos ficarem recortados. Hero em caixa de diálogo com uma seta para baixo piscando (steps(2) 1s infinite) e uma chamada para ação "PRESS START". Barras de progresso como blocos segmentados de 8px. Qualquer imagem recebe image-rendering: pixelated e é escalada 3x a partir de uma fonte pequena. Hover: o elemento pula 4px para cima sem transição; active: 4px para baixo. Ícones são SVGs pixelados de 16x16. Sem gradientes, sem blur, sem easing em lugar nenhum.