Design Systems & Tokens
Ein Design System ist kein starres Regelwerk — es ist eine gemeinsame Sprache zwischen Design und Entwicklung. Tokens sind die Vokabeln dieser Sprache: benannte, wiederverwendbare Werte, die Entscheidungen kodifizieren statt sie jedes Mal neu zu treffen.
- Verstehen, was ein Design System ist und warum es Konsistenz und Geschwindigkeit gleichzeitig verbessert
- Die drei Ebenen von Design Tokens unterscheiden: Global, Alias und Component Tokens
- Eine Farbpalette, Spacing-Skala und Typografie-Skala als Token-System definieren
- Erkennen, wann Ad-hoc-Werte ein Zeichen für ein fehlendes System sind
- Ein eigenes Mini-Design-System mit CSS Custom Properties aufbauen
Ein Design System ist kein starres Regelwerk — es ist eine gemeinsame Sprache zwischen Design und Entwicklung. Tokens sind die Vokabeln: benannte, wiederverwendbare Werte, die Entscheidungen kodifizieren.
Was ist ein Design System?
Sammlung von wiederverwendbaren Komponenten, Gestaltungsregeln und dokumentierten Entscheidungen. Stellt sicher, dass Produkt konsistent aussieht — unabhängig wer daran arbeitet.
Design Tokens
Atomare Bausteine: Farben, Abstände, Schriftgrößen, Schatten, Border-Radien als benannte Variablen
Komponenten-Bibliothek
Fertige UI-Bausteine (Buttons, Cards, Inputs), die Tokens verwenden — spart Entwicklungszeit
Dokumentation & Richtlinien
Wann, wo, wie Komponenten eingesetzt werden — verhindert Missbrauch und Überformatierung
Die drei Ebenen von Design Tokens
Global Tokens (Was) → Alias Tokens (Wofür) → Component Tokens (Wo). Jede Ebene baut auf der vorherigen auf.
Das WAS: Rohe Werte ohne Kontext
--blue-500: #3b82f6 — Die pure Farbe
Vorteil
Single Source of Truth für Roharben
Das WOFÜR: Semantische Bedeutung
--color-primary: var(--blue-500) — Was ist die Rolle dieser Farbe?
Vorteil
Bei Markenfarb-Wechsel nur ein Token ändern; Dark Mode funktioniert durch Umschaltung
Das WO: Komponentenspezifisch
--btn-bg: var(--color-primary) — Wo wird das Token verwendet?
Vorteil
Komponenten-Logik ist klar; Abhängigkeiten sind sichtbar
Token-Systeme: Die wichtigsten Kategorien
Nicht jedes Token braucht eine komplexe Definition — aber einige sollten immer systematisiert werden:
Farbsystem
Ein Farbsystem mit Stufen (100, 200, ..., 900) eliminiert „35 Shades of Blue"
--blue-100, --blue-200, ... --blue-900Spacing-Skala
Systematische Abstände (4px, 8px, 16px, 24px, ...) statt ad-hoc Werte
--spacing-xs: 4px, --spacing-sm: 8px, --spacing-md: 16pxTypografie-Skala
Definierte Schriftgrößen (12px, 14px, 16px, 20px, ...) statt zufällige Größen
--font-size-sm: 12px, --font-size-base: 14px, --font-size-lg: 16pxShadow System
Elevation-System (sm, md, lg, xl) für konsistente Tiefe
--shadow-md: 0 4px 6px rgba(0,0,0,0.1)Theming: Dark Mode via Tokens
Token-basiertes Theming ermöglicht Dark Mode ohne Komponenten-CSS-Änderung. Nur Alias-Tokens müssen umgeschaltet werden.
Light Theme
Background light, text dark
Dark Theme
Background dark, text light