# Cyberpunk / neon

Também chamado de: UI cyberpunk, UI neon, synthwave, design glitch, night city  
Era: visuais de Blade Runner de 1982; ondas na web em 2017 (synthwave) e 2020 (marketing de Cyberpunk 2077)  
Página: https://designforai.dev/pt/style/cyberpunk-neon

## Traços

- fundos quase pretos com neon saturado: magenta, ciano, amarelo, verde ácido
- brilho via text-shadows e box-shadows em camadas no mesmo matiz neon
- cantos cortados (polígonos clip-path), cortes diagonais, listras de aviso
- efeitos glitch: separação RGB, tremor com skew, linhas de varredura
- tipografia monospace ou condensada em caixa alta com tracking largo, códigos numéricos em todo lugar
- elementos de HUD: colchetes, miras, leituras de status
- movimento rápido e cortante com flicker ocasional

Paleta: #050507 página, #f0f0f0 texto, #ff2a6d magenta, #05d9e8 ciano, #f9f002 amarelo, #d1f7ff ciano pálido para o tom do brilho

Tipografia: Orbitron ou Rajdhani para títulos (700, caixa alta, tracking 0.1em), Share Tech Mono ou JetBrains Mono para dados, Barlow Condensed para o corpo; títulos 40-80px

## Faça

- limite o neon a dois matizes mais um amarelo de aviso; no máximo três brilhos na tela
- construa o brilho com 3 sombras empilhadas (2px, 8px, 24px) na mesma cor com alpha decrescente
- corte um canto dos cards com clip-path: polygon() para a forma assinatura

## Evite

- não coloque brilho no texto de corpo; o brilho é só para títulos, bordas e botões
- não rode animações glitch continuamente; dispare no hover ou uma vez no load
- não use cantos arredondados; só ângulos e cortes

Conhecido por: Cyberpunk 2077, Razer, tie-ins de Ghost in the Shell, Corsair iCUE

## Semente CSS

```css
:root{--bg:#050507; --fg:#f0f0f0; --accent:#ff2a6d; --accent2:#05d9e8; --warn:#f9f002; --radius:0; --glow:0 0 2px #05d9e8,0 0 8px #05d9e8,0 0 24px rgba(5,217,232,0.6); --font:'Orbitron',sans-serif}
```

## Prompt

Construa o site em estilo cyberpunk neon. Fundo #050507 com uma grade tênue de 48px (linhas rgba(5,217,232,0.06)). Texto #f0f0f0, magenta neon #ff2a6d, ciano neon #05d9e8, amarelo de aviso #f9f002. Fontes: Orbitron 700 em caixa alta com tracking 0.1em para títulos a 64/40/24px, Barlow Condensed 400 a 18px para o corpo, Share Tech Mono 13px para códigos, timestamps e labels. Cards: background #0b0b12, borda 1px #05d9e8, um canto cortado com clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%), box-shadow 0 0 2px #05d9e8, 0 0 8px #05d9e8, 0 0 24px rgba(5,217,232,0.5). Botão primário #ff2a6d com a mesma receita de brilho em magenta e uma listra diagonal de aviso amarela e preta na borda esquerda. Os títulos recebem text-shadow 0 0 8px currentColor. O título do hero roda um glitch único de 600ms no load (tremor skewX e separação RGB de 2px via pseudo-elementos) e repete no hover. Sem border-radius em lugar nenhum. Movimento rápido: transições de 120ms.