Styleguide

Referenz für Design-Tokens und Basis-Komponenten. Jede Ansicht muss in Hell und Dunkel funktionieren — oben rechts umschalten.

Farb-Tokens

Nur Theme-Tokens aus globals.css verwenden, keine Ad-hoc-Farben.

background
foreground
primary
secondary
muted
accent
destructive
border

Typografie

Überschrift 1

Überschrift 2

Überschrift 3

Fließtext: KORZEN bündelt Compliance-Trainings und Policy-Management in einer Plattform.

Sekundärtext für Beschreibungen und Hinweise.

Monospace für IDs und Code.

Buttons

Formulare

Badges

ZugewiesenEntwurfArchiviertÜberfällig

Card

Datenschutz-Grundlagen
Pflichttraining · Version 3 · 25 Minuten

Jährliche Unterweisung zu DSGVO-Grundlagen für alle Mitarbeitenden.

Tabs

Inhalte der Trainings-Ansicht.

Zustände

Jede View braucht Loading-, Empty- und Error-State (CLAUDE.md, UI-Standards).

Loading
Empty

Noch keine Trainings zugewiesen.

Error
Laden fehlgeschlagen
Bitte erneut versuchen oder den Support kontaktieren.

Alerts

Training abgeschlossen
Der Nachweis wurde im Audit-Log gespeichert.
Attestierung fehlgeschlagen
Die Policy-Version ist nicht mehr aktuell.

Motion

Animationen ausschließlich über Presets aus lib/motion.ts.

  • fadeInUp

    Preset aus lib/motion.ts

  • staggerChildren

    Preset aus lib/motion.ts

  • transitionBase

    Preset aus lib/motion.ts