Design Tokens speichern Designentscheidungen als benannte Werte – plattformunabhängig, zentral verwaltbar und konsistent. Von Token-Ebenen über Theming bis zum Unterschied zu Variablen.
Wer sich mit Design Systemen beschäftigt, stößt früher oder später auf den Begriff „Design Tokens“. Und wer ihn zum ersten Mal hört, fragt sich zu Recht: Was soll das sein – ein Token?
Das Wort klingt technisch, fast kryptisch. Dabei ist die Idee dahinter überraschend einfach. Design Tokens sind benannte Werte, die Designentscheidungen speichern – plattformunabhängig, wiederverwendbar und zentral verwaltbar. Statt eine Farbe, eine Schriftgröße oder einen Abstand an hundert verschiedenen Stellen hart einzutragen, wird der Wert einmal definiert und überall referenziert. Ändert sich die Entscheidung, ändert sich ein einziger Token – und die Wirkung zieht sich automatisch durch das gesamte Produkt.
In diesem Artikel erklären wir, was Design Tokens genau sind, woher der Begriff kommt, wie sie aufgebaut sind und warum sie inzwischen als Fundament moderner Design Systeme gelten.
Der englische Begriff „Token“ begegnet uns in ganz unterschiedlichen Kontexten – und genau das macht ihn auf den ersten Blick verwirrend. In der Alltagssprache bezeichnet ein Token eine Marke, ein Symbol oder einen Stellvertreter für etwas anderes. Eine Spielfigur im Brettspiel ist ein Token: Sie steht stellvertretend für den Spieler. Eine Wertmarke an der Garderobe ist ein Token: Sie repräsentiert den hinterlegten Mantel, ohne selbst der Mantel zu sein.
In der Informatik taucht der Begriff in vielen Bereichen auf: Authentifizierungs-Tokens stehen stellvertretend für eine Berechtigung. Kryptowährungs-Tokens repräsentieren einen Wert auf einer Blockchain. In der Sprachverarbeitung (NLP) sind Tokens die kleinsten bedeutungstragenden Einheiten, in die ein Text zerlegt wird.
Das gemeinsame Prinzip hinter all diesen Verwendungen: Ein Token ist ein benannter Stellvertreter, der auf etwas anderes verweist. Er trägt keine eigene Bedeutung in sich, sondern seine Bedeutung entsteht durch das, worauf er zeigt.
Genau so funktionieren Design Tokens: Sie sind benannte Stellvertreter für konkrete Designwerte. Der Token color.brand.primary ist nicht selbst eine Farbe – er verweist auf einen Farbwert, zum Beispiel #0044CC. Ändert sich die Markenfarbe, wird der hinterlegte Wert aktualisiert – der Name bleibt gleich, und jede Stelle, die den Token referenziert, übernimmt automatisch den neuen Wert.
Das Konzept geht auf Salesforce zurück, das 2014 sein Lightning Design System vorstellte – eines der ersten großen Design Systeme mit einem Token-basierten Ansatz. Die Herausforderung war konkret: Salesforce betrieb Produkte auf mehreren Plattformen (Web, iOS, Android) und brauchte eine Möglichkeit, Designentscheidungen zentral zu verwalten und plattformübergreifend konsistent umzusetzen.
Die Lösung: Designentscheidungen nicht als CSS-Werte, Figma-Styles oder Swift-Konstanten zu definieren, sondern als plattformneutrale Tokens, die in jedes beliebige Format exportiert werden können. Ein Token wie spacing.medium kann in CSS als 16px, in iOS als 16pt und in Android als 16dp ausgegeben werden – der Wert ist überall identisch, nur das Format passt sich der Plattform an.
Heute sind Design Tokens ein De-facto-Standard in der Branche. Das W3C arbeitet seit 2019 an einer offiziellen Spezifikation (Design Tokens Format Module), die ein einheitliches Austauschformat etablieren soll. Tools wie Figma, Style Dictionary, Tokens Studio und viele andere unterstützen den Token-Workflow bereits.
Design Tokens können jede Art von Designentscheidung abbilden. Die häufigsten Kategorien sind Farben (Markenfarben, Systemfarben, Hintergrundfarben, Textfarben), Typografie (Schriftfamilien, Schriftgrößen, Zeilenhöhen, Schriftgewichte), Abstände (Padding, Margin, Gap – meist als konsistente Skala), Größen (Breiten, Höhen, Border-Radien, Icon-Größen), Schatten (Box Shadows mit Offset, Blur und Farbe), Bewegung (Animationsdauern, Easing-Funktionen) und Breakpoints (Schwellenwerte für responsive Anpassungen).
Entscheidend ist: Ein Token speichert nicht nur den Wert, sondern gibt ihm einen semantischen Namen. #FF0000 sagt nichts über die Verwendung – color.feedback.error dagegen kommuniziert sofort, wofür diese Farbe gedacht ist.
Die meisten ausgereiften Token-Systeme arbeiten mit drei Abstraktionsebenen. Diese Hierarchie ist das Herzstück des Konzepts – und der Grund, warum Tokens so leistungsfähig sind.
Die unterste Ebene: rohe Werte ohne kontextuelle Bedeutung. Sie beschreiben, was ein Wert ist – nicht, wofür er verwendet wird. Beispiele: blue.600 verweist auf #0044CC, gray.100 auf #F5F5F5, space.16 auf 16px, font-size.18 auf 18px.
Primitive Tokens bilden die Palette – das Rohmaterial, aus dem alles andere entsteht. Sie werden in der Regel nie direkt in Komponenten verwendet, sondern immer über semantische Tokens referenziert.
Die mittlere Ebene: Sie geben den primitiven Werten eine Bedeutung im Kontext des Designs. Sie beschreiben, wofür ein Wert verwendet wird. Beispiele: color.brand.primary referenziert blue.600, color.background.default referenziert gray.100, spacing.section referenziert space.16, font-size.body referenziert font-size.18.
Semantische Tokens sind die Ebene, mit der Designer:innen und Entwickler:innen im Alltag arbeiten. Sie machen Designentscheidungen lesbar und nachvollziehbar.
Die oberste Ebene: Sie definieren Werte für spezifische Komponenten. Nicht jedes System braucht diese Ebene – aber für komplexe Produkte mit vielen Komponenten und Varianten bietet sie zusätzliche Kontrolle. Beispiele: button.primary.background referenziert color.brand.primary, button.primary.text referenziert color.text.inverse, input.border.default referenziert color.border.subtle.
Der entscheidende Vorteil zeigt sich bei Änderungen. Angenommen, die Markenfarbe ändert sich von Blau zu Dunkelgrün. In einem System ohne Tokens müssten hunderte CSS-Deklarationen, Figma-Styles und App-Definitionen manuell angepasst werden. In einem Token-System wird ein einziger primitiver Token geändert – und weil alle semantischen und Component Tokens darauf verweisen, zieht die Änderung automatisch durch das gesamte System.
Noch mächtiger wird das Prinzip bei Theming: Für einen Dark Mode müssen keine Farben neu erfunden werden. Stattdessen werden die semantischen Tokens mit anderen primitiven Werten belegt. color.background.default verweist im Light Mode auf gray.100 (hell) und im Dark Mode auf gray.900 (dunkel). Die Komponentenlogik bleibt identisch – nur die Zuordnung ändert sich.
Wer mit CSS Custom Properties oder Variablen in Designtools arbeitet, fragt sich zurecht: Wo ist der Unterschied zu einem Design Token? Auf den ersten Blick tun beide dasselbe – einen Wert unter einem Namen speichern und überall referenzieren. Und in vielen Projekten ist die Grenze tatsächlich fließend. Trotzdem beschreiben die Begriffe unterschiedliche Dinge.
Eine Variable ist ein technisches Konzept: ein benannter Container, der einen Wert speichert – innerhalb eines bestimmten Systems. CSS Custom Properties (--color-primary: #0044CC;) sind Variablen. Sass-Variablen, Swift-Konstanten, JavaScript-Variablen – alles Variablen. Sie existieren in ihrer jeweiligen technischen Umgebung und funktionieren dort.
Eine Variable fragt: Wie speichere ich diesen Wert, damit ich ihn wiederverwenden kann?
Ein Token ist ein Designkonzept: eine dokumentierte Designentscheidung mit semantischem Namen, die plattformunabhängig definiert wird. Ein Token existiert zunächst abstrakt – als JSON-Datei, in einem Tool wie Tokens Studio oder in einer Designsystem-Dokumentation. Er beschreibt nicht nur den Wert, sondern auch seine Bedeutung und seinen Verwendungszweck.
Ein Token fragt: Welche Designentscheidung steckt hinter diesem Wert – und wie stelle ich sicher, dass sie überall konsistent umgesetzt wird?
Aus einem Token werden dann Variablen generiert: CSS-Variablen für Web, Swift-Konstanten für iOS, XML-Ressourcen für Android, Styles fürs Designtool. Der Token ist die zentrale Wahrheit, die Variablen sind seine plattformspezifischen Übersetzungen.
Jeder Token wird irgendwann zur Variable – aber nicht jede Variable ist ein Token. Wenn in einem CSS-Projekt eine Variable --header-height: 64px existiert, ist das eine praktische Wiederverwendung. Aber es ist kein Token, solange der Wert nicht Teil einer dokumentierten, systematischen Designentscheidung ist, die plattformübergreifend gelten soll.
Umgekehrt: Wer in einem Designtool eine Variable „Brand Primary“ anlegt und konsequent in allen Styles referenziert, arbeitet mit Token-Logik – auch ohne es so zu nennen. Die Denkweise ist dieselbe: benennen, zentral verwalten, überall referenzieren, bei Bedarf an einer Stelle ändern.
Für ein einzelnes Webprojekt ist die Unterscheidung akademisch. Sauber benannte Variablen erfüllen denselben Zweck. Der Unterschied wird erst praktisch relevant, wenn ein Design System mehrere Plattformen bedient und ein plattformneutrales Austauschformat braucht, wenn Design- und Entwicklungsteams eine gemeinsame Sprache jenseits einzelner Tools benötigen oder wenn Theming (etwa Dark Mode oder Mandantenfähigkeit) systematisch umgesetzt werden soll. In diesen Fällen reichen Variablen in einzelnen Systemen nicht mehr aus – dann braucht es die Abstraktionsebene, die Tokens bieten.
Design Tokens entfalten ihren vollen Wert in Kontexten, in denen Konsistenz über Skala hinweg gebraucht wird: mehrere Produkte, mehrere Plattformen, mehrere Teams, häufige Designanpassungen oder die Notwendigkeit von Theming.
Für ein einzelnes Webprojekt mit einer Handvoll Seiten ist ein ausgewachsenes Token-System mit JSON-Definitionen und Build-Pipeline Overkill. Hier reichen sauber benannte CSS-Variablen völlig aus. Die Denkweise hinter Tokens – Werte benennen, zentral verwalten, konsistent einsetzen – ist aber in jeder Projektgröße sinnvoll.
Bei Büro Bloock setzen wir die Token-Logik in jedem Webdesign-Projekt ein – angepasst an die Projektgröße. Wir arbeiten mit definierten Variablen für Farben, Abstände und Schriftgrößen, um Konsistenz sicherzustellen und spätere Anpassungen effizient zu machen. Für umfangreichere Corporate-Design-Projekte definieren wir Token-Strukturen, die als Grundlage für die systematische Umsetzung über verschiedene Medien hinweg dienen.
RSS-Feed
Direkt für deinen Feedreader – Antworten auf häufige Fragen zu Design, Webdesign und Markenführung. Ehrlich, verständlich und aus der Praxis von Büro Bloock.
Du willst noch mehr über Design lesen?
