Design Tokens

Die DNA des Systems als CSS Custom Properties (Spacing, Typography, Colors, Radius, Shadows).

Spacing (4px Grid)

Abstände sind auf einem 4px‑Raster standardisiert.

TokenValuePreview
--s88px
--s1616px
--s2424px
--s3232px
--s4848px
--s6464px

Typography Tokens

Skalierung für Premium‑Lesbarkeit (ruhig, nicht laut).

TokenValueUsage
--fs-sm13pxCaptions, Hints
--fs-base15pxBody Text
--fs-lg17pxLead
--fs-xl20pxCard Titles
--fs-3xl32pxH2
--fs-4xl40pxH1 / Hero

Color Tokens

Semantik: Brand für Actions, Accent sparsam als Highlight.

TokenValuePreview
--bg#f5f5f4Background
--surface#ffffffSurface
--border#e0e0deBorder
--text#1f2937Text
--brand#0f766eBrand
--accent#c9a227Accent

Radius Tokens

Weiche Kanten, premium‑ruhig. Keine harten 0px.

TokenValuePreview
--r88px
--r1212px
--r1616px
--r2020px
--r-pill999px

Shadow Tokens

Schatten sind subtil: Soft → Medium → Deep → Premium.

TokenValuePreview
--sh-soft0 4px 12px rgba(...)
--sh-medium0 8px 24px rgba(...)
--sh-deep0 18px 45px rgba(...)
--sh-premiummixed