TOKENS, DIE ÜBERLEBEN

Die meisten Design-Token-Systeme werden innerhalb von zwei Jahren wieder abgeschafft, da sie eher die aktuellen visuellen Werte als die dahinterstehende semantische Absicht kodieren. Ein Token namens „blue-500“ ist für immer an einen bestimmten Blauton gebunden; ein Token namens „accent-primary“ überdauert jede Farbänderung, da der nächste Designer es dem jeweiligen Blau-Äquivalent zuordnet, das im neuen System verwendet wird.

Die einzige Regel, die erfolgreiche Token-Systeme von gescheiterten unterscheidet: Benennen Sie Token nach ihrem Zweck, nicht nach ihrem Erscheinungsbild. accent-primary, surface-base, text-secondary, danger-bg. Niemals blue-500, gray-900, red-light. Der semantische Name ist die Vereinbarung; der Wert ist das Implementierungsdetail.

Ebene 1: Grundelemente. Rohwerte für Farbe, Abstände und Typografie. blau-50, blau-100, blau-200…, blau-900. Abstand-1, Abstand-2…, Abstand-12. Diese dienen als zugrunde liegende Skala und ändern sich nur selten.

Ebene 2: Semantik. Zweckgebundene Tokens, die Primitiven zugeordnet sind. „accent-primary“ ist „blue-500“ zugeordnet, „accent-hover“ ist „blue-600“ zugeordnet, „surface-base“ ist „gray-50“ zugeordnet und „text-primary“ ist „gray-900“ zugeordnet. Komponenten verweisen auf diese Tokens, niemals direkt auf die Primitiven.

Ebene 3: Komponentenbereich. Komponentenbezogene Tokens, die semantischen Tokens zugeordnet sind. „button-primary-bg“ entspricht „accent-primary“, „card-border“ entspricht „border-subtle“ und „nav-active-bg“ entspricht „accent-emphasis“. Diese werden von den Komponenten verwendet.

Bei einer Markenauffrischung ändern Sie die Skalierung der Primitive und möglicherweise auch die Zuordnung von Semantik zu Primitiven. Tokens auf Komponentenebene bleiben dabei unverändert. Das Redesign wird innerhalb von Tagen statt Monaten bereitgestellt.

Kodierung: Farbe, Abstände, Typografie (Schriftfamilien, Schriftgrößen, Schriftstärken, Zeilenhöhen), Eckenrundung, Schatten, Bewegungsdauer und Beschleunigung, Breiten der Breakpoints.

Nicht kodieren: layout-spezifische Werte (max-width von 1280 in der Artikelvorlage), einmalige Positionierungsversätze, Animationsabläufe, die nur für eine einzelne Komponente gelten. Diese gehören inline; ihre Kodierung führt zu einem System, das sich selbst widerspricht.

Der Lackmustest: Würde eine andere Komponente diesen Wert plausiblerweise ebenfalls verwenden? Wenn ja, dann kodieren Sie ihn. Wenn nein, dann fest einbinden.

Benutzerdefinierte CSS-Eigenschaften an der Token-Grenze. Definieren Sie die Primitive und die Semantik in :root und überschreiben Sie diese in [data-theme="dark"]. Komponenten verweisen auf die semantischen Token, niemals auf die Primitive.

JS-zugängliche Tokens über eine generierte TypeScript-Datei aus derselben Quelle. Tools wie Style Dictionary, Theo oder ein kleiner benutzerdefinierter Generator erzeugen sowohl CSS-Variablen als auch TS-Exporte aus einer einzigen JSON- oder YAML-Quelle. Durch die einheitliche Quelle bleiben JS-Animationen und gestaltete Komponenten mit den Stylesheets synchronisiert.

Dokumentieren Sie das System auf einer einzigen Seite (einer Storybook-Seite oder einer /design-Seite auf der Website selbst), damit zukünftige Mitwirkende es finden können. Token-Systeme, die nicht auffindbar sind, werden innerhalb weniger Monate von Personen umgangen, die nicht wissen, dass es sie gibt.