Design System

Grundlagen, Tokens und Regeln der Datenschutzmanagment PRO Component Library für alle DSMS-Module.

Komponenten ansehen

Eine Quelle der Wahrheit

Jedes Modul importiert ausschließlich aus @/design-system. Keine lokalen Button-, Badge- oder Tabellen-Varianten.

Nur semantische Tokens

Farben werden über Tokens wie bg-card, text-muted-foreground oder intentSurface gesetzt — keine Hexwerte, keine Farbverläufe.

8px Raster

Abstände, Höhen und Radien folgen dem 4–96px Raster. Karten nutzen p-6, Formularblöcke gap-6, Seitenabschnitte space-y-8.

WCAG AA

Sichtbarer Focus-Ring, Tastaturbedienung, aria-Beschriftung für Icon-Buttons und Statusfarben nie als einziges Signal.

Typografie

Elf Stufen von Display bis Mono. Systemschrift, keine dekorativen Fonts.

Verzeichnis von Verarbeitungstätigkeiten

Display48/52 · 600 · -0.03em

Verzeichnis von Verarbeitungstätigkeiten

Heading XL36/40 · 600 · -0.025em

Verzeichnis von Verarbeitungstätigkeiten

Heading L28/34 · 600 · -0.02em

Verzeichnis von Verarbeitungstätigkeiten

Heading M20/28 · 600 · -0.015em

Verzeichnis von Verarbeitungstätigkeiten

Heading S16/24 · 600 · -0.01em

Verzeichnis von Verarbeitungstätigkeiten

Body Large16/26 · 400

Verzeichnis von Verarbeitungstätigkeiten

Body14/22 · 400

Verzeichnis von Verarbeitungstätigkeiten

Body Small13/20 · 400

Verzeichnis von Verarbeitungstätigkeiten

Caption12/16 · 400 · muted

Verzeichnis von Verarbeitungstätigkeiten

Overline11/16 · 600 · 0.08em · UPPER

Verzeichnis von Verarbeitungstätigkeiten

Mono13/20 · mono

Spacing

8px Grid — 4 bis 96 Pixel.

xxs

4

xs

8

sm

12

md

16

lg

24

xl

32

2xl

40

3xl

48

4xl

64

5xl

80

6xl

96

Farbtokens

Alle Werte sind oklch-Variablen mit Light- und Dark-Mode.

background

foreground

card

card-foreground

popover

primary

primary-foreground

secondary

secondary-foreground

muted

muted-foreground

accent

border

input

ring

success

warning

destructive

info

Verbindliche Regeln

Import immer als import { DSButton } from "@/design-system".
Keine Farbverläufe, keine Schatten größer als shadow-raised.
Tabellen ausschließlich über DataGrid.
Formulare über FormSection + Feldkomponenten, Validierung via Zod.
Destruktive Aktionen immer mit DeleteDialog bestätigen.
Statusaussagen kombinieren Farbe, Text und Icon.

Motion

Dezente Übergänge

Bewegung dient der Orientierung, nie der Dekoration. Maximal 200 ms, ausschließlich Farbe, Opazität und kleine Translationen.

fast: duration-100
base: duration-150
slow: duration-200
ease: ease-out
interactive: transition-colors duration-150 ease-out

Barrierefreiheit

Kontrast mindestens 4.5:1, Tab-Reihenfolge folgt der visuellen Ordnung, Dialoge fangen den Fokus, alle Icon-Buttons tragen ein aria-label plus Tooltip.