# Cyberpunk / Neon

Auch bekannt als: Cyberpunk-UI, Neon-UI, Synthwave, Glitch-Design, Night City  
Ära: Blade-Runner-Optik 1982; Web-Wellen 2017 (Synthwave) und 2020 (Cyberpunk-2077-Marketing)  
Seite: https://designforai.dev/de/style/cyberpunk-neon

## Merkmale

- fast schwarze Hintergründe mit gesättigtem Neon: Magenta, Cyan, Gelb, Acid Green
- Glow über geschichtete text-shadows und box-shadows im selben Neonton
- abgeschnittene Ecken (clip-path-Polygone), diagonale Schnitte, Warnstreifen
- Glitch-Effekte: RGB-Split, Skew-Jitter, Scanlines
- Monospace oder schmale Versalien mit weitem Tracking, überall Zahlencodes
- HUD-Elemente: Klammern, Fadenkreuze, Statusanzeigen
- schnelle, scharfe Motion mit gelegentlichem Flackern

Palette: #050507 Seite, #f0f0f0 Text, #ff2a6d Magenta, #05d9e8 Cyan, #f9f002 Gelb, #d1f7ff blasses Cyan als Glow-Ton

Schrift: Orbitron oder Rajdhani für Überschriften (700, Versalien, 0.1em Tracking), Share Tech Mono oder JetBrains Mono für Daten, Barlow Condensed für Fließtext; Überschriften 40-80px

## Do

- beschränke Neon auf zwei Töne plus ein Warngelb; maximal drei Glows pro Screen
- baue den Glow aus 3 gestapelten Schatten (2px, 8px, 24px) in derselben Farbe mit fallendem Alpha
- schneide eine Ecke der Karten mit clip-path: polygon() ab für die Signaturform

## Don't

- lass Fließtext nicht glühen; Glow ist nur für Überschriften, Ränder und Buttons
- lass Glitch-Animationen nicht dauerhaft laufen; bei Hover oder einmal beim Laden auslösen
- nutze keine runden Ecken; nur Winkel und Schnitte

Bekannt dafür: Cyberpunk 2077, Razer, Ghost-in-the-Shell-Tie-ins, Corsair iCUE

## CSS-Seed

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

Baue die Seite im Cyberpunk-Neon-Stil. Hintergrund #050507 mit einem schwachen 48px Raster (rgba(5,217,232,0.06) Linien). Text #f0f0f0, Neon-Magenta #ff2a6d, Neon-Cyan #05d9e8, Warngelb #f9f002. Schriften: Orbitron 700 Versalien mit 0.1em Tracking für Überschriften bei 64/40/24px, Barlow Condensed 400 bei 18px für Fließtext, Share Tech Mono 13px für Codes, Zeitstempel und Labels. Karten: background #0b0b12, 1px Rand #05d9e8, eine Ecke abgeschnitten mit 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). Primärbutton #ff2a6d mit demselben Glow-Rezept in Magenta und einem diagonalen gelb-schwarzen Warnstreifen an der linken Kante. Überschriften bekommen text-shadow 0 0 8px currentColor. Der Hero-Titel läuft beim Laden einmalig 600ms als Glitch (skewX-Jitter und 2px RGB-Split über Pseudo-Elemente) und wiederholt ihn bei Hover. Nirgends border-radius. Motion schnell: 120ms Transitions.