Was sind Design-Tokens?
Ein Design-Token ist ein benannter Wert, etwa die Markenfarbe oder der Standardabstand, der einmal definiert und überall verwendet wird, statt den rohen Wert zu wiederholen.
Tokens in CSS#
Im Web sind Tokens CSS Custom Properties, meist definiert auf :root:
--color-accent: #2b59ff;definiert einen Tokencolor: var(--color-accent);verwendet ihn
Änderst du die Definition, folgt jede Stelle, die sie verwendet. Eine Farbe, die in vierzig Regeln vorkommt, wird zu einer einzigen Zeile, die du änderst.
Zwei Ebenen: was ein Wert ist und wofür er da ist#
Gute Token-Systeme haben zwei Ebenen. Primitive Tokens benennen die rohe Palette (--blue-600). Semantische Tokens benennen eine Aufgabe und zeigen auf einen primitiven Token (--color-accent: var(--blue-600)). Seiten und Komponenten verwenden nur die semantischen, sodass ein Dark Mode nur ein zweiter Satz semantischer Werte ist und ein Rebranding eine Handvoll Zeilen ändert.
Tokens in Weblooks#
Das Panel Variablen im Modus Design des Editors listet deine Tokens, gruppiert sie und zeigt, wo jeder verwendet wird. Der Kontrast-Scan liest Farben, die als Tokens geschrieben sind, im hellen und im dunklen Modus, sodass eine Website mit Tokens richtig geprüft wird. Die Startvorlagen bringen einen zweistufigen Token-Satz und einen Dark Mode mit.