Design Tokens erklärt, mit einem Live-Konverter von JSON zu CSS
Design Tokens erklärt
Design Tokens erklärt mit Beispielen (JSON, CSS, Tailwind) | We.Inc
Was Design Tokens sind, wie das JSON-Format der W3C Community Group sie schreibt, und ein Live-Konverter, der Token-JSON in CSS-Variablen und einen Tailwind v4 @theme-Block umwandelt.
Design Tokens sind benannte Designentscheidungen wie color.primary oder space.md, die als Daten gespeichert werden, damit jede Plattform dieselben Werte liest. Das Format der Design Tokens Community Group schreibt sie in JSON mit $value und $type und erlaubt, dass ein Token per geschweifter Klammern auf ein anderes verweist. Tools wandeln dieses JSON dann in CSS-Variablen, Tailwind-Themes oder App-Code um.
Token-Ebenen, die die meisten Teams nutzen
Ebene
Beispielname
Enthält
Basis (primitiv)
Einen Rohwert: eine Farbe, Größe oder Schrift
Semantisch (Alias)
Eine Rolle, die auf ein Basis-Token verweist
Komponente
Eine Rolle, die auf eine Komponente beschränkt ist
Die meisten Erklärungen hören bei der Definition auf. Füge unten Token-JSON im Format der Community Group ein oder bearbeite es, und sieh beim Tippen die CSS Custom Properties und das Tailwind v4 Theme, das daraus entsteht, wobei Aliase zu var()-Referenzen aufgelöst werden.
Bearbeite das JSON links. Gruppen können $type einmal für alle enthaltenen Tokens festlegen.
Verweise auf ein anderes Token, indem du seinen Punktpfad in geschweifte Klammern setzt, zum Beispiel {color.blue-500}.
Lies im CSS-Tab die :root-Variablen oder im Tailwind-Tab einen @theme-Block.
Kopiere die Ausgabe in dein Stylesheet. Behebe vorher alle Fehlermeldungen unter dem Editor.
Benenne semantische Tokens nach ihrer Aufgabe (text, surface, danger) statt nach ihrem Aussehen (red, dark), damit ein Rebranding nur die Basisebene ändert.
Halte Basis-Tokens aus Komponenten heraus. Komponenten sollten semantische Namen lesen, damit Dark Mode und Themes die Werte darunter austauschen können.
Speichere Tokens in einer Datei unter Versionskontrolle und erzeuge die Ausgabe für jede Plattform daraus.
Nutze die empfohlene Endung .tokens oder .tokens.json, damit Tools die Dateien erkennen.
Häufige Fragen
Was ist ein Design Token?
Ein Design Token ist ein Name, der mit einem Designwert verknüpft ist, zum Beispiel color.text mit einer fast schwarzen Farbe. Code und Designdateien verwenden den Namen, sodass eine Änderung des Werts an einer Stelle jeden Button, jede Seite und jede App aktualisiert, die darauf verweist.
Gibt es ein Standardformat für Design Tokens?
Ja. Die Design Tokens Community Group beim W3C hat das Format Module 2025.10 am 28. Oktober 2025 als finalen Community-Group-Bericht veröffentlicht und bezeichnet es als stabil. Es ist ein Community-Group-Bericht, keine W3C Recommendation.
Was ist der Unterschied zwischen Design Tokens und CSS-Variablen?
Tokens sind die Quelldaten, unabhängig von jeder Plattform. CSS Custom Properties sind eine mögliche Ausgabe. Dieselbe Token-Datei kann auch Swift-, Android- oder JavaScript-Konstanten erzeugen, was CSS-Variablen allein nicht leisten.
Wie funktionieren Design Tokens mit Tailwind CSS?
In Tailwind v4 deklarierst du Theme-Variablen innerhalb von @theme, etwa --color-primary. Tailwind erzeugt daraus Utilities wie bg-primary und gibt sie zusätzlich als normale CSS-Variablen auf :root aus, sodass Tokens und Utilities synchron bleiben.
Wie werden Farben im Token-Format geschrieben?
Im Format 2025.10 ist ein Farbwert ein Objekt mit einem colorSpace, etwa srgb, und einem Array von Komponenten zwischen 0 und 1, optional mit Alpha. Der Konverter hier akzeptiert auch einfache Strings, damit du ältere Token-Dateien einfügen kannst.
Warum Teams Tokens einführen
Ohne Tokens steckt das Markenblau als Hex-Code an Hunderten Stellen in CSS, mobilen Apps und Designdateien. Eine Änderung bedeutet Suchen und Ersetzen, bei dem immer eine Stelle übersehen wird.
Mit Tokens hat dieses Blau einen Namen und einen festen Ort. Designer und Entwickler sprechen von color.primary, und ein Build-Schritt schreibt den Wert in das jeweilige Format jeder Plattform.
Das JSON-Format lesen
Jedes Objekt mit einem $value ist ein Token, jedes andere Objekt ist eine Gruppe. Eigenschaften, die mit einem Dollarzeichen beginnen, sind vom Format reserviert: $value, $type, $description, $deprecated und $extensions.
Die Spezifikation definiert einfache Typen wie color, dimension, fontFamily, fontWeight, duration, cubicBezier und number sowie zusammengesetzte Typen wie shadow, border, transition, typography, strokeStyle und gradient. Dimensionen und Dauern sind Objekte mit einem numerischen Wert und einer Einheit.
Von Tokens zu einem funktionierenden Theme
Eine kleine Website kann Tokens direkt in CSS als Custom Properties halten. Sobald du für mehr als eine Plattform auslieferst oder in einem Tool gestaltest, das Tokens exportiert, erzeuge das CSS stattdessen aus JSON, damit es eine einzige Quelle gibt.
Dark Mode wird zu einem zweiten Satz semantischer Werte. Die Basisfarben bleiben gleich, und die semantische Ebene tauscht innerhalb einer Media Query für dunkle Farbschemata oder eines Data-Attributs aus, auf welche Basis jede Rolle verweist.
Semantische Tokens mit dunklem Theme
Semantische Werte tauschen, Basiswerte behalten
Die Karte liest nur --surface und --text. Der dunkle Block weist diesen beiden Namen neue Werte zu, und die Karte folgt, ohne dass sich ihre eigenen Regeln ändern.
Ein zusammengesetztes Token
Schatten-Token im Format der Community Group
Zusammengesetzte Tokens bündeln mehrere Werte. Hier ist die Farbe selbst ein Alias, und die Versätze verwenden Dimension-Objekte.
Keine Tokens gefunden. Ein Token ist ein Objekt mit einer $value-Eigenschaft.
Das ist noch kein gültiges JSON: {message}
Konverter von Token-JSON zu CSS
Bearbeite die Token-Datei, und die CSS-Variablen und das Tailwind-Theme werden beim Tippen aktualisiert. Die Startdatei wird umgewandelt zu: