# Terminal / Hacker

Auch bekannt als: Hacker-Ästhetik, CLI-UI, Kommandozeilen-Website, Green Screen, TUI-Stil  
Ära: Terminals der 1970er-80er; Web-Revival ab 2015 (Entwickler-Portfolios, Security-Tools)  
Seite: https://designforai.dev/de/style/terminal-hacker

## Merkmale

- Monospace für alles, auch Überschriften
- schwarzer oder sehr dunkler Hintergrund mit Phosphorgrün oder Amber-Text
- Prompt-Zeichen ($, >, ~) als Listenmarker und Überschriften
- Box-Drawing-Zeichen, ASCII-Art-Logos, blinkender Blockcursor
- Tipp-Effekt im Hero, eine Zeile nach der anderen
- Ränder sind einzeilige ASCII-Linien oder 1px in der Textfarbe
- Tabellen in festen Spalten ausgerichtet wie Verzeichnislistings

Palette: #0c0c0c Seite, #33ff33 Primärgrün (oder #ffb000 Amber), #1f7a1f gedämpftes Grün, #c8c8c8 Sekundär, #ff5555 Fehlerrot, #ffff55 Warnung

Schrift: JetBrains Mono, IBM Plex Mono, Fira Code oder Commit Mono; eine Größe 14-16px, Überschriften in derselben Größe fett oder eingerahmt, line-height 1.5

## Do

- nutze eine Schriftgröße und baue Hierarchie mit Prompts, Versalien und Box-Drawing-Linien
- ergänze ein Scanline-Overlay (repeating-linear-gradient, 2px, opacity 0.06) und einen leichten Text-Glow
- mach den Tipp-Effekt überspringbar und deaktiviere ihn unter prefers-reduced-motion

## Don't

- misch keine Sans-Serif "für die Lesbarkeit" hinein; das bricht die Fiktion
- nutze keine runden Ecken, Verläufe oder Schatten
- mach daraus kein Fake-OS mit Fake-Fenstern; bleib in einem Terminal

Bekannt dafür: Hack The Box, Hackaday (teilweise), unzählige Entwickler-Portfolios, Marketingseiten von Warp und Ghostty

## CSS-Seed

```css
:root{--bg:#0c0c0c; --fg:#33ff33; --dim:#1f7a1f; --muted:#c8c8c8; --alert:#ff5555; --radius:0; --glow:0 0 6px rgba(51,255,51,0.5); --font:'JetBrains Mono',monospace}
```

## Prompt

Baue die Seite als Terminal. Hintergrund #0c0c0c, Text #33ff33, gedämpfter Text #1f7a1f, Sekundär #c8c8c8, Fehler #ff5555. Schrift JetBrains Mono 15px überall, line-height 1.5; Überschriften in derselben Größe fett, mit "$ " vorangestellt oder in Box-Drawing-Zeichen eingerahmt (┌─┐ │ └─┘). Maximalbreite 88 Zeichen, Padding 24px, linksbündig. Die Nav ist eine einzelne Zeile aus Pfaden (~/home ~/work ~/about) mit dem aktiven in inverser Darstellung (background #33ff33, Text #0c0c0c). Hero: eine getippte Zeile mit blinkendem Blockcursor (steps()-Animation, 1s Blinken), 40ms pro Zeichen, per Klick überspringbar. Listen nutzen "> "-Marker; Daten in Spalten fester Breite. Links unterstrichen in #33ff33, Hover invertiert die Farben. Ergänze text-shadow 0 0 6px rgba(51,255,51,0.5) und ein 2px Scanline-Overlay bei opacity 0.06. Kein Radius, keine Verläufe, keine Bilder außer ASCII-Art. Unter prefers-reduced-motion allen Text sofort anzeigen.