AfiS-Aktensystem/docs/10-design-system.md

# 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

- **Flächen bleiben eckig, Bedienelemente sind rund.** Eine Akte ist ein Blatt und hat
  scharfe Kanten: Eckenradius 2 px für Panels, Tabellen, Listen. Was man drücken oder
  ausfüllen kann, ist rund — Knöpfe, Suchbalken, Marken und Profilbilder voll (`--radius-control`,
  999 px), Eingabefelder weich (`--radius-field`, 10 px). Daran erkennt man ein Bedienelement,
  bevor man es berührt.
- Rahmen 1 px in `--ink-500`. Keine Schatten außer dem Fokusring und dem inneren Ring, den
  ein gedrückter Knopf zeigt.
- 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.

## Beschriftung und Bedienelement

**Der Abstand nach aussen ist grösser als die Polsterung nach innen.** Eine Beschriftung, die
näher am Rahmen steht als der Inhalt des Rahmens an demselben Rahmen, wirkt angeklebt — daran
erkennt das Auge einen zu engen Satz, ohne dass man es benennen könnte.

Daraus folgen die Zahlen, nicht umgekehrt: das Feld polstert innen 0,4 rem senkrecht und
0,7 rem waagerecht, also steht die Beschriftung 0,5 rem darüber (`.field-label`) oder
0,85 rem daneben (`.field-row`). Waagerecht braucht es mehr, weil das Auge senkrecht
Gestapeltes ohnehin als zusammengehörig liest.

Beides steht **einmal** in `globals.css` und nicht an den Aufrufstellen. Vorher war es ein
Dutzend Mal von Hand gesetzt, mit drei verschiedenen Werten, und keiner reichte. Ein Test
prüft die Regel, nicht die Zahl: wer die Polsterung ändert, fällt dort auf.

Ein Hinweis unter einem Feld (`.field-hint`) steht näher am Feld als am nächsten.

## Knöpfe

Jeder Knopf trägt Rahmen und eigene Grundfläche, auch der unscheinbarste. Ein Text, der sich
erst beim Überfahren als Knopf entpuppt, wird nicht gefunden. Die Klasse dafür ist `.btn`,
mit `.btn-primary` für den einen Knopf, der die Sache erledigt, und `.btn-sm` für dichte
Zeilen. Kein eigenes Knopf-Aussehen je Seite.

Drei Zustände, die man sehen muss:

| Zustand | Was passiert |
|---|---|
| Überfahren | Fläche eine Stufe heller, Rahmen und Schrift in `--steel` |
| Gedrückt | Knopf zieht sich leicht zusammen und bekommt einen inneren Ring — er wirkt kurz dicker, ohne dass die Rahmenbreite sich ändert und das Umfeld springt |
| Läuft | `aria-busy`, gestrichelter Rahmen, nimmt keine zweite Eingabe an |

Die Druckrückmeldung setzt **ohne Verzögerung** ein und klingt langsam ab. Andersherum
bliebe ein kurzer Klick unsichtbar, und genau darum geht es: der Nutzer soll wissen, dass er
diesen Knopf wirklich getroffen hat.

Eine Rückfrage vor dem Ausführen ist damit nicht gemeint und steht nur dort, wo sie ohnehin
schon steht.

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