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

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