Sind Design Token und CSS-Variable dasselbe?

Nicht ganz. Der Token ist der werkzeugunabhängige Name einer Designentscheidung. Die CSS-Variable ist eine seiner Entsprechungen im Web. Derselbe Token lässt sich auch in iOS- oder Android-Code übersetzen.

Soll ich primitive oder semantische Tokens nutzen?

Nutzen Sie in Komponenten semantische Tokens. Primitives geben den semantischen Tokens ihre Werte. So müssen Sie bei einem Themewechsel keine Komponente anfassen.

Ist das DTCG-Format ein W3C-Standard?

Nein. Das Format Module 2025.10 ist ein Final Community Group Report. Das Dokument schreibt selbst, dass es kein W3C-Standard ist und sich nicht im Standardisierungsprozess befindet.

Was ist ein Design Token? Wofür man ihn nutzt

Was bedeutet Design Token?

Das Formatdokument der Design Tokens Community Group definiert einen Token als Information, die an einen lesbaren Namen gebunden ist. Er besteht mindestens aus einem Namen und einem Wert. Das Beispiel im Dokument lautet: color-text-primary: #000000.

Eine deutsche Übersetzung gibt es kaum, in Teams sagt man meist einfach Design Token. So halte ich es auch.

Ohne Token steht dasselbe Orange in Dutzenden Dateien als #FF6B3D. Um die Farbe zu ändern, müssen Sie alle einzeln finden. Mit Token ändern Sie eine Zeile.

Primitive und semantische Tokens

Tokens werden meist in zwei Schichten gehalten. Ein primitiver Token benennt den Rohwert. Ein semantischer Token sagt, welche Aufgabe dieser Wert hat.

Die eigene Datei dieser Website ist ein Beispiel. In src/ds/tokens.css stehen in der ersten Schicht Primitives wie --c-orange-500: #FF6B3D. Laut dem Kommentar in der Datei nutzen Komponenten sie nie direkt.

Die zweite Schicht ist semantisch: --accent: var(--c-orange-500), --text: var(--c-ink-900), --bg: var(--c-cream-100). Buttons und Karten lesen nur diese Namen.

Schicht	Was der Name sagt	Beispiel auf dieser Website
Primitiv	Den Wert selbst	`--c-ink-900`
Semantisch	Die Aufgabe des Werts	`--text`

Theme: dieselbe Komponente, andere Werte

Ein Theme bindet die semantischen Tokens an andere Primitives. Der Code der Komponente ändert sich nicht, nur die Werte hinter den Namen.

So funktionieren die dunklen Bereiche dieser Website. Die Regel data-mood="inverse" setzt --bg auf --c-ink-900 und --text auf --c-cream-100. Das CSS des Buttons wird gar nicht angefasst.

Live-Mini-Theme

Versand

Ihre Bestellung ist unterwegs

Voraussichtliche Lieferung: Donnerstag

Sendung verfolgen

Semantischer Token	Zugehöriger primitiver Token
`--dtk-bg`	`--c-cream-0` #FFFDF8
`--dtk-text`	`--c-ink-900` #1A1916
`--dtk-accent`	`--c-orange-500` #FF6B3D

Das helle Theme wird gezeigt.

Die Kartenkomponente liest nur drei semantische Tokens. Die Theme-Buttons ändern, an welche primitive Farbe diese Tokens gebunden sind. Das CSS der Karte selbst bleibt unberührt. Die Farben sind die Primitives aus der Datei src/ds/tokens.css dieser Website.

Ändert sich das Theme, ändert sich auch der Kontrast. Ich empfehle, neue Farbpaare im Kontrastrechner zu prüfen. Die Schwellen finden Sie im WCAG-Ratgeber.

Das Format der W3C Design Tokens Community Group

Um Tokens zwischen Werkzeugen zu übertragen, gibt es ein gemeinsames Dateiformat. Die Design Tokens Community Group (DTCG) erarbeitet es. Die Gruppe arbeitet unter dem Dach der Community Groups des W3C.

Das Design Tokens Format Module 2025.10 erschien am 28. Oktober 2025 als „Final Community Group Report“. Das Dokument schreibt in seiner eigenen Notiz, dass es kein W3C-Standard ist und sich auch nicht im Standardisierungsprozess befindet. Es hält sich für stabil und schreibt, dass es zur Umsetzung gedacht ist.

Das Format beruht auf JSON. Empfohlene Endungen sind .tokens und .tokens.json. Jedes Objekt mit dem Feld $value gilt als Token, $type ist optional. Ein Token kann den Wert eines anderen Tokens mit der Schreibweise {gruppe.token} nutzen.

{
  "color": {
    "orange-500": { "$type": "color", "$value": "#FF6B3D" },
    "accent": { "$type": "color", "$value": "{color.orange-500}" }
  }
}

Für verschiedene Kontexte wie helles und dunkles Theme erschien am selben Tag ein eigenes Resolver Module. Auf derselben Website steht außerdem ein Live-Entwurf. Der Entwurf bezeichnet sich als Vorschau und bittet darum, ihn nicht umzusetzen.

Meine Notiz

In Codebasen sehe ich am häufigsten, dass mehrere sehr ähnliche Töne derselben Farbe verstreut geschrieben sind. Wird in so einem Produkt ein dunkles Theme gewünscht, muss man jede Komponente einzeln öffnen.

Mein Rat ist, mit wenigen semantischen Tokens zu beginnen: Hintergrund, Text, Akzent, Rahmen. Die Liste der Primitives räumen Sie danach auf. Im Design & Ship Sprint übertrage ich die Tokens aus der Designdatei in Ihr Repository.

Tokens ordnen die sichtbare Schicht der Oberfläche. Was die Oberfläche ist, beschreibe ich im Glossareintrag UI.