Warum das in Ihrer Woche auftaucht
Ein Brand Refresh ändert die Akzentfarbe. Ohne Tokens greppt jemand fünfzig Dateien nach fast-orange Hex-Codes und verpasst trotzdem drei Landingpages. Mit Tokens ändern Sie color.accent einmal.
Klartext
Ein Token kann color.accent oder --acc heißen. Komponenten konsumieren Tokens statt roher Hex-Codes.
Primitive Tokens (Rohpalette) und semantische Tokens (accent, danger, text-muted) halten Intent klar, wenn Themes wachsen.
WordPress-Block-Themes drücken viele Tokens in theme.json, damit Redakteure in der Palette bleiben.
Ohne Tokens erfindet jede Landingpage Spacing. Mit Tokens bleibt das Design System kohärent, wenn die Site wächst.
Dokumentieren Sie Aliase. Wenn Design „Coral" sagt und Code „--acc", schreiben Sie die Map auf.
Fakten zum Behalten
- Was sie benennen
- Farbe, Type, Spacing, Radius, Elevation, Motion (manchmal)
- Code-Form
- CSS-Variablen, Style-Dictionary-Outputs, theme.json-Werte
- Design-Form
- Figma Variables / Styles
- Warum sie existieren
- Eine Quelle der Wahrheit für Marke und UI-Konsistenz
- Paart mit
- Komponenten und Patterns in einem Design System
Nicht dasselbe wie
- Ein volles Design SystemTokens sind die primitive Schicht. Komponenten und Patterns konsumieren sie.
- Hardcodierte Theme-Farben in einer CSS-DateiBesser als verstreutes Hex, schwächer als benannte semantische Tokens überall genutzt.
- Nur Brand GuidelinesGuidelines beschreiben. Tokens implementieren Werte, die Maschinen und Komponenten referenzieren können.
Wo es wehtut
Fehlende Tokens tun weh beim Brand Refresh, wenn fünfzig Seiten leicht verschiedene Grautöne hardcoden und niemand weiß, welches Orange offiziell ist.
Kampagnenseiten shippen dann „fast richtige" Farben, die die Marke zufällig wirken lassen.
Was zu prüfen ist
- Nutzen Figma-Styles und CSS-Variablen dieselben Token-Namen?
- Liegen Einmal-Hex-Werte noch in Komponenten verstreut?
- Kann eine Akzentänderung ohne jedes Template zu editieren shippen?
- Werden semantische Tokens (accent, danger) statt Rohpalette überall genutzt?
- Exponiert theme.json (oder Äquivalent) dieselbe Palette, die Redakteure sehen?
Häufige Fragen
Was sind Design Tokens?
Benannte Werte für visuelle Entscheidungen wie Farbe, Typografie und Abstände, geteilt zwischen Design-Tools und Code.
Wie hängen Design Tokens mit einem Design System zusammen?
Tokens sind die primitive Schicht. Komponenten und Patterns konsumieren Tokens für Konsistenz.
Nutzen WordPress-Sites Tokens?
Ja. Block-Themes mappen Tokens oft über theme.json. Custom Themes können CSS-Variablen gleich nutzen.
Was sollten Sie bei Design Tokens zuerst prüfen?
Kern-Farbe-, Type- und Spacing-Tokens in Figma und Production bestätigen und dass Komponenten diese Namen statt Rohwerte referenzieren.
Sind Tokens nur für große Product-Teams?
Nein. Selbst eine Marketing-Site mit zehn Templates profitiert, wenn Akzent und Spacing einmal benannt sind.