# Design-System

## Gestaltungsidee

Der Bezugspunkt ist nicht „Dashboard" und nicht „Hacker-Terminal", sondern **eine
Registratur im Nachtdienst**: lackierter Stahl, Aktenpapier, Stempelfarbe. Ruhige, kühle
Flächen, in denen die einzige Farbe von der Klassifizierung kommt.

Das ist eine bewusste Absage an drei naheliegende Richtungen:

- Schwarz mit giftgrünem Akzent. Wirkt nach Filmrequisite, ermüdet beim Lesen langer Texte.
- Warmes Cremeweiß mit Serifen-Überschriften. Zu behaglich für eine Ermittlungsbehörde.
- Der übliche Karten-Baukasten mit gleichen Radien und weichen Schatten. Eine Akte ist kein
  Produktkatalog, und identische Kacheln nehmen der Hierarchie jede Aussage.

## Farben

Dunkel ist der Auslieferungszustand, ein helles Thema ist verpflichtend mitzuliefern.

```css
--ink-900:  #15181A;   /* Grundfläche, kühles Anthrazit, leicht grünstichig */
--ink-800:  #1D2124;   /* Panel */
--ink-700:  #262B2F;   /* erhöhte Fläche, Eingabefelder */
--ink-500:  #3A4147;   /* Linien und Rahmen */
--paper:    #E4E7E4;   /* Primärtext, papierfarbenes Off-White */
--paper-dim:#939C99;   /* Sekundärtext */
--steel:    #7A97A6;   /* interaktiv: Links, Fokus, aktive Zustände */
```

Klassifizierungsfarben sind das einzige Buntsystem und werden nirgends sonst benutzt:

| Stufe | Token | Hex | Anmutung |
|---|---|---|---|
| 0 Offen | `--stamp-0` | `#8A918D` | Grau |
| 1 Intern | `--stamp-1` | `#6D8A9C` | Stahlblau |
| 2 Vertraulich | `--stamp-2` | `#4E8F72` | Grünspan |
| 3 Geheim | `--stamp-3` | `#B08637` | Messing |
| 4 Streng geheim | `--stamp-4` | `#B4543C` | Oxidrot |
| 5 Leitungssache | `--stamp-5` | `#7E5E96` | Tiefviolett |

Status (offen, ruhend, abgeschlossen) wird **nicht** über Farbe transportiert, sondern über
Position und Beschriftung. Sonst konkurrieren zwei Farbsysteme um dieselbe Aufmerksamkeit.

## Typografie

IBM Plex, selbst gehostet, als `woff2` untergesetzt. Die Wahl ist inhaltlich begründet: Plex
wurde als Hausschrift einer Institution entworfen, hat einen schmalen Schnitt für
Tabellenköpfe und eine passende Mono für Kennzeichen. Drei Rollen aus einer Familie halten das
Bild geschlossen, ohne beliebig zu wirken.

| Rolle | Schnitt | Einsatz |
|---|---|---|
| Fließtext | Plex Sans 400 / 500 | Abschnitte, Vermerke, Chat |
| Struktur | Plex Sans Condensed 500 | Spaltenköpfe, Stempel, Reiter |
| Daten | Plex Mono 400 | Aktenzeichen, Zeitstempel, Hashes, Dienstnummern |

Skala: 12 / 13 / 15 / 18 / 24 px. Zeilenhöhe 1,6 im Fließtext. Zeilenlänge höchstens
72 Zeichen, bei breiten Fenstern durch `max-width` begrenzt statt die Spalte zu dehnen.

Kein Versalsatz für Beschriftungen. Der Stempelcharakter kommt aus dem schmalen Schnitt, der
Rahmenlinie und der Farbe, nicht aus Großbuchstaben. Auch keine hervorgehobenen Einzelwörter
in Überschriften.

## Struktur

- Eckenradius 2 px, überall gleich. Akten sind nicht abgerundet.
- Rahmen 1 px in `--ink-500`. Keine Schatten außer dem Fokusring.
- Trennung durch Linien und Weißraum, nicht durch gestapelte Karten.
- Die Klassifizierung erscheint als 3 px breite Kante links am Objekt plus einer
  Stempelmarke oben rechts. Beides in derselben Stufenfarbe.
- Der Verlauf hat eine durchgehende senkrechte Linie als Zeitachse. Der Chat hat keine,
  sondern nur eine Trennlinie zum Hauptbereich. Der Unterschied muss ohne Beschriftung
  erkennbar sein.

## Der eine mutige Moment

Die Schwärzung. Ein massiver Balken in `--ink-900` mit feiner Rahmenlinie, der beim ersten
Erscheinen einmal von links nach rechts durchwischt (150 ms, `prefers-reduced-motion`
respektiert). Daneben in Mono die Stufe, ab der gelesen werden darf. Sonst bewegt sich in der
Oberfläche nichts von selbst.

Alle übrige Bewegung ist Antwort auf eine Handlung: Aufklappen, Bestätigen, Einfügen.
Keine Einblend-Animationen beim Scrollen, keine Hover-Effekte auf jeder Fläche.

## Schreibweise in der Oberfläche

- Aktive Verben, die sagen, was passiert: „Vermerk speichern", nicht „Absenden"
- Dieselbe Bezeichnung durch den ganzen Ablauf: Knopf „Fall schließen" → Meldung
  „Fall geschlossen"
- Fehler nennen Ursache und nächsten Schritt, ohne Entschuldigung:
  „Nicht gespeichert, die Akte wurde zwischenzeitlich geändert. Fassungen vergleichen."
- Leere Zustände sind eine Aufforderung: „Noch kein Vermerk. Ersten Vermerk anlegen."
  Nicht „Keine Daten vorhanden."
- Keine Ausrufezeichen, kein „bitte", kein „erfolgreich"

## Barrierefreiheit als Untergrenze

Sichtbarer Fokusring in `--steel`, Kontrast mindestens 4,5:1 im Fließtext, vollständige
Tastaturbedienung inklusive Kommandopalette, `prefers-reduced-motion` respektiert, alle
Zustandsangaben zusätzlich als Text und nicht nur als Farbe.