# Grundlagen ## Designprinzipien ### 1. Lage vor Oberfläche Der wichtigste Zustand, seine Aktualität und die nächste Entscheidung müssen im ersten sichtbaren Bereich stehen. App-Navigation ist notwendig, aber nicht der Hauptinhalt. ### 2. Ruhig unter Druck Die Oberfläche schreit nicht. Kritische Zustände werden eindeutig, aber kontrolliert dargestellt. Keine pulsierenden Alarmflächen, keine dauerhaften Animationen, keine Ausrufezeichenketten. ### 3. Belegt statt behauptet Operative Werte erscheinen zusammen mit: - Quelle oder verantwortlicher Rolle; - Stand als absolute Uhrzeit; - Vertrauensgrad; - Kennzeichnung von Widersprüchen. ### 4. Menschliche Freigabe sichtbar Eine Aktion mit Außenwirkung zeigt vor Ausführung: - was gesendet oder geändert wird; - an wen; - welcher Zustand danach gilt; - wer freigibt; - ob Blocker offen sind. ### 5. Dichte mit Luft Informationen dürfen kompakt sein, aber nicht gedrängt. Das 4-Pixel-Raster, feste Tabellenzeilen, 44-Pixel-Bedienelemente und klar getrennte Abschnitte sorgen für Scanbarkeit. ### 6. Ungewissheit ist ein Zustand `UNBEKANNT`, `NICHT BESTÄTIGT`, `WIDERSPRÜCHLICH` und `VERALTET` sind vollwertige UI-Zustände. Sie werden nicht durch leere Felder oder blasses Grau versteckt. ## Farbe ### Markenpalette | Token | Wert | Zweck | |---|---:|---| | `--gev-color-brand` | `#a92331` | primäre Entscheidung, aktive Marke | | `--gev-color-brand-hover` | `#861a27` | Hover | | `--gev-color-brand-active` | `#671722` | gedrückter Zustand | | `--gev-color-brand-soft` | `#fff1f2` | sehr sparsame Markenfläche | | `--gev-color-surface-inverse` | `#171b1e` | Navigation, starke Kontrastfläche | | `--gev-color-canvas` | `#f1f0ec` | warmer Arbeitsgrund | Markenfarbe ist keine automatische Statusfarbe. Ein Standardlink ist bewusst blau; ein bestätigter Zustand grün; eine Warnung amber. ### Semantische Zustände | Bedeutung | Bezeichnung | Farbe allein reicht? | |---|---|---| | erfolgreich/bestätigt | `Bestätigt` | Nein: Text + Häkchen/Statuspunkt | | Aufmerksamkeit | `Prüfung offen` | Nein: Text + Marker | | kritisch/blockiert | `Blockiert` | Nein: Text + Blockergrund | | Information | `Hinweis` | Nein: Überschrift + Kontext | | neutral | `Beobachtung` | Nein: Text | | unklar | `Nicht bestätigt` | Nein: gestrichelter Rand + Text | Priorität und Bearbeitungsstatus sind getrennt. `P1` bedeutet nicht automatisch `Bestätigt`; `RELEVANT` bedeutet nicht `AUTORISIERT`. ## Typografie - UI-Text: `Inter`, `IBM Plex Sans`, `Segoe UI`, Arial, sans-serif. - Daten und Zeit: `IBM Plex Mono`, `SFMono-Regular`, Consolas, monospace. - Überschriften: Satzschreibung, keine dauerhafte Versalienschrift. - Labels: kurz, versal, maximal 12 px und nur für Metadaten. - Mindestgröße für Fließtext: 16 px. - Zahlen in Kennzahlen, Zeitstempeln und Tabellen: tabellarische Ziffern. Die Fonts werden absichtlich nicht aus einem externen CDN geladen. Interne Apps bleiben schnell, datensparsam und unabhängig. Falls die Organisation Inter oder IBM Plex lokal bündelt, greifen die Stacks automatisch darauf zurück. ## Geometrie und Tiefe - Standardraster: 4 px. - Standardradius: 4 px. - Große Karten: maximal 8 px. - Pills nur für kurze Tags und Badges. - Schatten nur bei Überlagerung oder Dialog; Karten werden primär durch 1-Pixel-Linien gegliedert. - Keine Glasflächen als primärer Stil. Leichte Transparenz ist auf klebenden Leisten zulässig. ## Helle und dunkle Ansicht Die helle Ansicht ist Standard für Lesen, Erfassen und Drucken. Die dunkle Ansicht ist eine gleichwertige Option für lange Nutzung in dunkler Umgebung. Theme-Regel: ```html ``` Das Theme ist eine lokale Benutzerpräferenz. Ein fachlicher Status darf nicht an ein Theme gekoppelt werden. ## Bewegung - 120 ms für Hover und Fokus. - 180 ms für Navigation oder Einblendung. - keine Feder-, Bounce- oder endlosen Alarmanimationen; - Lade-Skeletons respektieren `prefers-reduced-motion`; - Zustandswechsel müssen auch ohne Animation verständlich sein.