Arbeitslaststeuerung Schriftgut — Die Haftpflichtkasse. Dieses Dokument ist der visuelle Vertrag für Release 1: Tokens (Basis: lily-patch-Extraktion, unverändert), die per Screenshot bestätigten HK-Web-Patterns und die ALS-spezifischen Komponenten. v0.1 · 12.06.2026
Quellen & Status: Token-Werte 1:1 aus tokens.css (lily-patch). Aus den Screenshots neu abgeleitet: Stepper, Selection-Cards, Step-Tabs, Toggle, Vergleichs-Checks, Banner, runde Icon-Buttons, Canvas #F4EEE7. Mit [PROPOSED] markiert: Button-Interaktionszustände, SLA-Rot/Verletzt-Mapping, Status-Flächenfarben, App-Shell (keine Referenz vorhanden) und die gesamte Dark-Palette.
01 · Farbe — Light
Semantische --color-*-Tokens in Komponenten verwenden, nie die --hk-*-Primitives und nie rohe Hex-Werte.
Brand & Blau
Brand primary
#006C97
--color-brand-primary
Hover
#005576
--color-brand-primary-hover
Active
#004762
--color-brand-primary-active
Selection
#0085BA
--als-selection
Focus
#009EDC
--color-border-focus
Info surface
#E1F5FB
--color-surface-info
Brand subtle
#E6F1F7
--color-surface-brand-subtle
Canvas (App-BG)
#F4EEE7
--als-canvas
SLA-Eskalation (ALS)
Grün
#2E7D32
--als-sla-gruen
Gelb
#FDC300
--als-sla-gelb
Orange
#F89B2D
--als-sla-orange
Rot [PROPOSED]
#D40F66
--als-sla-rot
Verletzt [PROPOSED]
#8E0A45
--als-sla-verletzt
Workitem-Status (ALS)
Offen
#0075B4
--als-st-offen
Zugewiesen
#009EDC
--als-st-zugewiesen
Angenommen
#006C97
--als-st-angenommen
Gehalten
#8B4FC4
--als-st-gehalten
Klärung
#F89B2D
--als-st-klaerung
Erledigt
#2E7D32
--als-st-erledigt
02 · Dark Mode [PROPOSED]
Die App folgt der Systemeinstellung (kein manueller Schalter in Release 1). Alle Dark-Werte sind aus der Light-Palette abgeleitet — HK hat keine offizielle Dark-Spezifikation. Freigabe durch Camilo erforderlich. Button oben rechts schaltet diese Seite zur Prüfung um.
Canvas
#0C161D
--als-canvas
Surface primary
#16242E
--color-surface-primary
Surface subtle
#1B2B36
--color-surface-subtle
Brand primary
#27A9DE
--color-brand-primary
Text primary
#F2F6F8
--color-text-primary
Divider
#243641
--color-border-divider
03 · Typografie
Filson Soft nur für großen Text (≥24px bzw. ≥18,5px bold) — Seitentitel, KPI-Zahlen, Modal-Titel. IBM Plex Sans für alles andere; 600 für Buttons, Labels und Tabellen-Header. Basis 16px.
Seitentitel · 30/500Zentraler Arbeitsvorrat
Abschnitt · 24/500Offene Workitems
Card-Titel · 18/600Workitem W-2026-04812-02
Body · 16/400Das ASS entscheidet, welche Arbeit wann und durch wen bearbeitet wird.
UI klein · 14/400Eingang 09.06.2026, 08:12 Uhr · SLA-Restlaufzeit 2 h 15 min
Pill (Radius 24), Plex 600. Aus den Screenshots bestätigt: Primary mit Pfeil-Icon, weißer Button auf Farbflächen, runder Icon-Button (Zurück). Hover/Active/Focus weiterhin [PROPOSED].
default
hover
active
focus
disabled
primary · xl
secondary · xl
primary · md
Weitere Varianten
06 · Formular-Controls
Schaden-, Vertrags- oder Antragsnummer
Kein gültiges Datum.
Auswahl
07 · Badges & Status
SLA-Eskalation
Grün · 3 TGelb · 8 hOrange · 4 hRot · 1 h 20 mVerletzt · +2 h
W-04812-02 wird von M. Weber an S. Kraus übergeben. Der Vorgang wird historisiert.
Empty State
Keine Workitems im FilterFilter anpassen oder zurücksetzen.
Loading Skeleton
11 · App-Shell [PROPOSED]
Persistente Sidebar + schmale Topbar (Entscheidung). Kein HK-Referenzscreen vorhanden — abgeleitet aus Logo-/Aktiv-Patterns. Unter lg wird die Sidebar zum Offcanvas.