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.

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