Design System

Unsere Plattform folgt einem einheitlichen Design-System. Das bedeutet: alle Elemente — Buttons, Tabellen, Formulare, Karten — sehen überall gleich aus und folgen denselben Regeln.

Für wen ist das?

Für Sie als Benutzer bedeutet das Design-System:

Konsistenz — Die Plattform sieht überall einheitlich aus, egal welche Funktion Sie nutzen
Klarheit — Farben und Symbole haben feste Bedeutungen (z.B. Grün = Erfolg, Rot = Fehler)
Vertrauen — Wenn etwas wie ein Button aussieht, ist es auch ein Klick-Button

Die wichtigsten Regeln

Farben

Farbe	Bedeutung	Beispiel
Primär (Dunkelgrau)	Wichtigste Aktion auf der Seite	„Exposé erstellen”, „Speichern”
Sekundär (Hellgrau)	Weniger wichtige Aktionen	„Abbrechen”, „Zurück”
Akzent (Hellgrau)	Hover-Effekte, aktuelle Auswahl	Hover in Tabellen
Muted (Grau)	Metadaten, hilfreiche Informationen	Timestamps, Beschreibungen

Schaltflächen (Buttons)

Jeder Button hat einen klaren Zweck:

Primär — Die wichtigste Aktion auf der Seite. Pro Sektion nur EIN primärer Button (z.B. „Speichern”)
Sekundär — Alternativen oder weniger wichtige Aktionen (z.B. „Abbrechen”)
Outline — Neutrale Aktionen (z.B. „Details ansehen”)
Ghost — Unsichtbare Aktionen, die beim Hover erscheinen (z.B. Bearbeiten-Symbol)
Destructive — Gefährliche Aktionen (z.B. Löschen) — immer mit roter Farbe

Karten

Unsere Karten (Card) haben immer dieselbe Struktur:

┌─────────────────────────────────┐
│  Überschrift (Titel)      [Aktion]│  ← CardHeader (optional: Aktions-Button rechts)
├─────────────────────────────────┤
│  Inhalt                          │  ← CardContent
│  • Detail 1                      │
│  • Detail 2                      │
├─────────────────────────────────┤
│  [Badge] [Badge]                  │  ← CardFooter (optional)
└─────────────────────────────────┘

Formulare

Zwischen Formularelementen gibt es immer denselben Abstand:

Zwischen Abschnitten: Großzügiger Abstand (platz für Atemraum)
Zwischen Label und Eingabefeld: Kleiner Abstand (logisch zusammengehörig)

Symbole

Wir verwenden durchgängig Lucide-Symbole — das sind die Symbole in der Sidebar und in Buttons. Sie erkennen sie am einheitlichen Strichstärke-Stil.

Änderungen am Design

Das Design-System wird zentral verwaltet. Wenn Sie eine Änderung am Design wünschen (z.B. andere Farbe für Status-Badges), teilen Sie es Ihrem Administrator mit — die Änderung wird dann systemweit wirksam.

Das Design-System wird vom KI-Agent automatisch gelesen. Wenn Sie dem Agent Design-Änderungen mitteilen, merkt er sich diese für zukünftige Sitzungen.

Technischer Hintergrund (für Administratoren)

Das Design-System basiert auf:

Tailwind CSS v4 — für Styling mit CSS-Variablen
shadcn/ui — wiederverwendbare React-Komponenten
Radix UI — Barrierefreiheit und Tastatur-Navigation
Zod-Schemata — Datendefinitionen mit UI-Hinweisen

Alle Komponenten sind in apps/web/src/components/ui/ verfügbar.