Was ist ein Design Token?
Stell dir vor, deine Hausfarbe ändert sich. Wie viele Stellen müsstest du anfassen: im Designtool, auf der Website, im Newsletter, in der App? Mit Design Tokens ist die Antwort: eine.
Die Design Tokens Community Group des W3C definiert einen Token als Information mit einem für Menschen lesbaren Namen, mindestens ein Paar aus Name und Wert. Salesforce, wo der Begriff entstand, nennt Tokens die Atome eines Design-Systems: benannte Einheiten, die an die Stelle fester Werte treten.
Ein Beispiel: Statt im Code an 40 Stellen #fe4c1c zu schreiben, steht dort farbe-akzent. Der Wert dahinter liegt genau einmal in einer Datei.
Die drei Ebenen von Tokens
Richtig stark werden Tokens erst, wenn sie aufeinander verweisen. Adobes Design-System Spectrum unterscheidet drei Ebenen, bei Google Material heißen sie reference, system und component:
Ebene
Beispiel
Primitive (der Wert)
orange-500 = #fe4c1c
Semantisch (der Zweck)
farbe-akzent → orange-500
Komponente (das Bauteil)
button-hintergrund → farbe-akzent
Der Clou: Wechselt deine Akzentfarbe von Orange auf Grün, änderst du nur den Verweis von farbe-akzent. Jeder Button, jeder Link, jede Hervorhebung zieht mit. Genauso funktionieren Hell- und Dunkelmodus: Ein semantischer Token bekommt je Modus einen anderen Wert.
Gibt es einen Standard?
Ja, seit genau einem Jahr. Am 28. Oktober 2025 hat die Design Tokens Community Group des W3C die erste stabile Version ihrer Spezifikation veröffentlicht (Version 2025.10). Es ist ein Bericht einer Community Group, kein offizieller W3C-Standard. In der Praxis wirkt er aber wie einer.
- Drei Module: Format, Farbe und Resolver (für Themes und Varianten).
- 13 Typen: sieben einfache wie Farbe, Abmessung und Dauer, sechs zusammengesetzte wie Rahmen, Schatten und Typografie.
- Breite Beteiligung: mehr als 20 Herausgeber und Autoren, unter anderem von Adobe, Google, Microsoft, Figma und Shopify.
- Werkzeuge: laut Ankündigung unterstützen mehr als zehn Designtools und Open-Source-Projekte das Format oder setzen es gerade um.
Auch Figma kann Variablen als Tokens im Format der Community Group importieren und exportieren. Das macht den Weg vom Design in den Code deutlich kürzer.
Häufige Fehler
Fehler 1 · Nach dem Wert benennen statt nach dem Zweck
Ein Token namens button-rot lügt, sobald der Button grün wird. Spectrum formuliert es klar: Token-Namen sollen den Zweck einer Designentscheidung zeigen. Also farbe-warnung statt rot.
Fehler 2 · Komponenten direkt auf Primitive verweisen lassen
Hängt der Button direkt an orange-500, fehlt die semantische Ebene dazwischen. Dann funktionieren Themes nicht mehr, und beim Dunkelmodus fängst du von vorn an.
Fehler 3 · Tokens nur im Designtool pflegen
Viele Teams legen saubere Variablen in Figma an. Im Code stehen trotzdem weiter feste Werte. Dann hast du zwei Wahrheiten, die mit jeder Änderung weiter auseinanderdriften. Tokens brauchen einen Weg in den Code, zum Beispiel über Style Dictionary.
Fehler 4 · Für jeden Sonderfall einen Token
300 Tokens für eine kleine Website versteht niemand mehr. Fang mit wenigen an: Farben, Schriftgrößen, Abstände, Radien. Neue Tokens kommen erst, wenn ein Wert wirklich mehrfach gebraucht wird.
So fängst du an
Du brauchst dafür kein großes Design-System. Viele Werkzeuge arbeiten längst nach dem Token-Prinzip, nur unter anderem Namen:
- WordPress: Die Voreinstellungen in der theme.json werden zu CSS-Variablen wie --wp--preset--color--black.
- Elementor: Im Variablen-Manager legst du Farben, Schriften und Größen zentral an.
- Figma: Variablen mit Modi, etwa für Hell und Dunkel.
- Für Entwickler: Style Dictionary, Tokens Studio oder Terrazzo wandeln eine Token-Datei in Formate für Web und Apps um.
Laut Design Systems Report 2025 von zeroheight nutzen 84 % der Teams mit Design-System inzwischen Tokens, ein Jahr zuvor waren es 56 %.
Häufige Fragen
Was ist der Unterschied zwischen Design Token und CSS-Variable?
Der Token ist die Designentscheidung selbst, plattformneutral gespeichert, meist als JSON. Eine CSS-Variable ist ein mögliches Ausgabeformat davon für Websites. Aus demselben Token lassen sich auch Formate für iOS und Android erzeugen.
Brauche ich als kleines Unternehmen Design Tokens?
Das Prinzip ja, ein großes Token-System nein. Wer in WordPress oder Elementor globale Farben und Schriften konsequent nutzt, arbeitet schon mit Tokens im Kleinen.
Gibt es einen Standard für Design Tokens?
Ja. Die Design Tokens Community Group des W3C hat am 28. Oktober 2025 die erste stabile Version ihrer Spezifikation veröffentlicht. Formal ist sie ein Community-Group-Bericht, kein W3C-Standard.
Wie benenne ich Design Tokens richtig?
Nach dem Zweck, nicht nach dem Wert: farbe-akzent statt orange, abstand-gross statt 32px. Nur die unterste Ebene, die Primitive, trägt den Wert im Namen.
Woher kommt der Begriff Design Token?
Aus dem Design-System-Team von Salesforce. Die Community Group nennt in einem frühen Entwurf ausdrücklich Salesforce als Ursprung des Namens.
