Farben, Abstände, Schriftgrößen, Eckenradien, Schatten – jedes digitale Produkt trifft unzählige gestalterische Entscheidungen. Werden diese Entscheidungen nur in einzelnen Komponenten oder verstreut im Code festgelegt, driften Design und Umsetzung mit der Zeit unweigerlich auseinander: Ein Blauton existiert plötzlich in drei leicht unterschiedlichen Varianten, Abstände werden mal in Pixeln, mal in Rem angegeben, und niemand weiß mehr, welcher Wert eigentlich der „richtige“ ist. Design Tokens lösen genau dieses Problem – und sie sind gerade jetzt wieder ein großes Thema, weil es seit Kurzem erstmals ein einheitliches, herstellerneutrales Format dafür gibt.
Was Design Tokens eigentlich sind
Design Tokens systematisieren die gestalterischen Grundentscheidungen eines digitalen Produkts an einer zentralen Stelle. Statt einen Farbwert oder einen Abstand direkt in jeder Komponente zu hinterlegen, wird er einmal als Token definiert und von dort aus referenziert – ähnlich einer Variable, nur eben für Designentscheidungen statt für Programmlogik. Ein einfaches Beispiel:
json
{
"color": {
"brand": {
"primary": { "$type": "color", "$value": "#7C5CFC" }
}
},
"spacing": {
"md": { "$type": "dimension", "$value": "16px" }
}
}Andere Tokens oder Komponenten können sich dann auf color.brand.primary beziehen, statt den Hex-Wert erneut auszuschreiben. Ändert sich die Markenfarbe, genügt eine Anpassung an einer Stelle – konsistent über die gesamte Anwendung hinweg, egal ob Website, App oder internes Tool.
Neu: ein gemeinsames Austauschformat
Bislang war genau das der Haken an Design Tokens: Jedes Tool – Figma, Style Dictionary, Tailwind, native Entwicklungsumgebungen – brachte sein eigenes, proprietäres Format mit. Design-System-Teams mussten die Übersetzung zwischen den Tools mit selbstgebauten Skripten und Workflows lösen, und ein Wechsel des Werkzeugs bedeutete jedes Mal, diese Integration neu zu bauen.
Im Oktober 2025 hat die Design Tokens Community Group (DTCG), organisiert im Rahmen von W3C Community Groups, die erste stabile Version einer offenen Spezifikation veröffentlicht: ein JSON-basiertes Austauschformat für Design Tokens. Die Spezifikation gliedert sich in drei Module:
- Format Module: definiert die Grundstruktur für alle Token-Typen – Name, Wert, Typ und optionale Beschreibung.
- Color Module: definiert ein differenziertes Farbformat mit Unterstützung für moderne Farbräume wie OKLCH und Display P3, statt nur klassischer Hex-Werte.
- Resolver Module: beschreibt, wie kontextabhängige Varianten – etwa Light/Dark-Modus, unterschiedliche Marken oder Gerätegrößen – organisiert werden können, ohne dieselben Tokens mehrfach zu duplizieren.
Mehr als zehn Design-Tools und Open-Source-Projekte unterstützen das Format bereits oder haben eine Unterstützung angekündigt. Für Design-System-Teams bedeutet das: Ein einmal definierter Token-Satz lässt sich zwischen Design-Tool und Code-Basis austauschen, ohne dass für jede neue Werkzeugkombination eine eigene Übersetzungslogik entstehen muss.
Warum Design Tokens gerade jetzt an Fahrt gewinnen
Zwei Entwicklungen verstärken sich hier gegenseitig. Zum einen sorgt das neue Austauschformat erstmals für echte Interoperabilität zwischen Design- und Entwicklungswerkzeugen. Zum anderen übernehmen KI-Agenten und Automatismen zunehmend die Übersetzung zwischen Design-Tool und Code – etwa beim Export aus dem Figma Dev Mode, wo sauber gepflegte Variablen direkt als nutzbarer Code-Vorschlag erscheinen. Beides zusammen verkürzt den Weg von der Design-Entscheidung bis zum fertigen, produktiven Code spürbar.
Wichtig dabei: Die konzeptionelle Arbeit bleibt Teamsache. Welche Tokens ein Design-System überhaupt braucht, wie sie sinnvoll strukturiert und benannt werden – das lässt sich nicht automatisieren, sondern erfordert weiterhin bewusste Entscheidungen. Tendenziell verschiebt sich die Verantwortung dafür aber vom einzelnen Gewerk (nur Design oder nur Entwicklung) hin zum gesamten Team, weil Tokens jetzt tool-übergreifend sichtbar und nutzbar sind.
Primitive und semantische Tokens: eine sinnvolle Struktur
In der Praxis hat sich eine zweistufige Struktur bewährt. Primitive Tokens beschreiben rohe Werte, etwa eine Farbpalette von hell bis dunkel oder eine Abstandsskala. Semantische Tokens referenzieren diese primitiven Werte und geben ihnen eine funktionale Bedeutung, zum Beispiel color.text.error, das intern auf einen bestimmten Rotton aus der primitiven Palette verweist. Der Vorteil: Ändert sich das visuelle Erscheinungsbild – etwa im Rahmen eines Rebrandings –, genügt es, die primitiven Werte anzupassen. Alle semantischen Tokens und damit alle Komponenten, die sich darauf beziehen, aktualisieren sich automatisch mit.
Unsere Einschätzung
Design Tokens sind kein neues Konzept – die Grundidee, gestalterische Entscheidungen zentral zu pflegen statt sie über Komponenten zu verstreuen, gehört seit Jahren zu den Grundlagen eines guten Design-Systems. Neu ist, dass es jetzt erstmals ein herstellerneutrales Format gibt, das den Wechsel zwischen Tools und die Zusammenarbeit zwischen Design und Entwicklung spürbar erleichtert. Für Unternehmen, die ihre digitalen Produkte konsistent, barrierefrei und wartbar halten wollen, lohnt sich ein Blick auf das eigene Design-System – unabhängig davon, ob es um eine einzelne Website oder eine ganze Produktfamilie mit mehreren Marken geht.
Wenn Sie ein Design-System aufbauen oder ein bestehendes auf ein zukunftsfähiges, standardisiertes Format überführen möchten – sprechen Sie uns gerne an. Wir unterstützen Sie von der Konzeption der Token-Struktur bis zur technischen Umsetzung im Frontend.
