HarlekinandClaude Opus 5
4446e3f0ac
CLAUDE.md und README.md verweisen auf docs/, die Dateien lagen aber im Wurzelverzeichnis. Verschoben. docs/13-entscheidungen.md hält fest, wo die Dokumente sich widersprechen und wie es aufgelöst wurde. Der wichtigste Punkt: 04-datenmodell.md verlangt eine Regel, die jedes UPDATE auf CaseEntryVersion verwirft, 05-akten-und-vorlagen.md verlangt, dass eine Umklassifizierung rückwirkend auf alle Versionen wirkt. Beides zusammen geht nicht. Aufgelöst über einen Trigger, der die Tabelle anhängend hält, aber das Anheben von minClearance zulässt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
101 lines
4.6 KiB
Markdown
101 lines
4.6 KiB
Markdown
# 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.
|