TOKEN, DIE ÜBERDAUERN
Baue ein Design-Token-System auf, das die nächste visuelle Neugestaltung überlebt. Dreilagige Struktur, semantische Benennung, reale Muster.
Warum die meisten Token-Systeme Neugestaltungen nicht überdauern
Die meisten Design-Token-Systeme werden innerhalb von zwei Jahren eingestellt, weil sie die visuellen Werte der Zeit codiert haben, anstatt die semantische Absicht dahinter. Ein Token namens blue-500 ist für immer an einen Blauwert gebunden; ein Token namens accent-primary überlebt jede Farbänderung, weil der nächste Designer ihn auf whatever Blau-Equivalent des neuen Systems abbildet.
Die einzige Regel, die Token-Systeme, die überdauern, von denen, die sterben, trennt: Benenne Token nach Zweck, nicht nach Aussehen. accent-primary, surface-base, text-secondary, danger-bg. Niemals blue-500, gray-900, red-light. Der semantische Name ist der Vertrag; der Wert ist das Implementierungsdetail.
Die dreilagige Architektur
Ebene 1: Primitive. Raw Farbe, Abstände, Typografie-Werte. blue-50, blue-100, blue-200..., blue-900. space-1, space-2..., space-12. Diese existieren als die zugrunde liegende Skala und ändern sich selten.
Schicht 2: semantisch. Zweckbenannte Tokens, die auf Primitive abbilden. accent-primary verweist auf blue-500, accent-hover auf blue-600, surface-base auf gray-50, text-primary auf gray-900. Komponenten referenzieren diese, nie die Primitive direkt.
Schicht 3: komponenten-spezifisch. Pro-Komponenten-Tokens, die auf semantische abbilden. button-primary-bg verweist auf accent-primary, card-border auf border-subtle, nav-active-bg auf accent-emphasis. Komponenten konsumieren diese.
Wenn das Brand-Refresh ansteht, änderst du die Primitive-Skala und eventuell das semantisch-zu-primitiv-Mapping. Komponenten-spezifische Tokens fließen unverändert durch. Das Redesign shipped in Tagen statt Monaten.
Was zu kodieren ist und was hart-codiert bleibt
Kodieren: Farbe, Abstände, Typografie (Schriftfamilien, Größen, Stärken, Zeilenhöhen), border-radius, Shadow, Motion-Dauer und Easing, Breakpoint-Breiten.
Nicht kodieren: Layout-spezifische Werte (max-width von 1280 auf dem Article-Template), einmalige Positioning-Offsets, Animation-Choreografie, die nur für eine Komponente eindeutig ist. Diese gehören inline; sie zu kodieren erzeugt ein System, das sich selbst bekämpft.
Der Lackmustest: würde eine andere Komponente plausibel denselben Wert verwenden? Wenn ja, kodieren. Wenn nein, hart-codieren.
Implementierung über den Stack
CSS Custom Properties an der Token-Grenze. Definiere die Primitive und Semantiken in :root, überschreibe in [data-theme="dark"]. Komponenten referenzieren die semantischen Tokens, nie die Primitive.
JS-zugängliche Tokens über eine generierte TypeScript-Datei aus derselben Quelle. Tools wie Style Dictionary, Theo oder ein kleiner Custom-Generator erzeugen sowohl CSS-Variablen als auch TS-Exports aus einer einzigen JSON- oder YAML-Quelle. Die Single Source bedeutet JS-Animationen und styled Components bleiben mit Stylesheets synchron.
Dokumentieren Sie das System auf einer einzelnen Seite (eine Storybook-Seite oder eine /design-Seite auf der Website selbst), damit zukünftige Mitwirkende es finden. Token-Systeme, die nicht auffindbar sind, werden innerhalb weniger Monate von Personen umgangen, die nicht wissen, dass sie existieren.