Design Token.

Der Kern der Idee ist der Wechsel von Werten zu Namen. Nicht mehr «dieses Grün» oder «#ccff00» steht in Design und Code, sondern ein Name, hinter dem der Wert liegt. Das klingt nach einer technischen Kleinigkeit, verschiebt aber die Verantwortung: Solange alle Stellen einen Namen verwenden, ist eine Farbänderung eine einzige Anpassung statt einer Suche über hunderte Fundstellen. Tokens umfassen dabei nicht nur Farben, sondern jede wiederkehrende Grösse — Abstandsstufen, Schriftgrade und Zeilenhöhen, Rahmenstärken, Radien, Schattenstufen, Ebenen der Stapelung und Dauer sowie Verlauf von Übergängen.

Tragfähige Token-Systeme haben drei Ebenen. Die unterste Ebene enthält Rohwerte ohne Bedeutung, etwa eine Farbskala von hell bis dunkel. Die mittlere Ebene gibt Rollen an: Textfarbe für Fliesstext, Hintergrund für erhöhte Flächen, Farbe für Fehlerzustände. Die oberste Ebene beschreibt Komponenten: Hintergrund des primären Buttons, Rahmen eines Eingabefelds im Fehlerfall. Entscheidend ist die mittlere Ebene, denn nur sie erlaubt einen Wechsel des Erscheinungsbilds ohne Eingriff in die Komponenten — ein dunkler Modus tauscht Rollen um, nicht Buttons. Systeme ohne diese Ebene brechen beim ersten Theming-Wunsch.

Ein Anwendungsfall: Ein Unternehmen betreibt eine Website und ein Kundenportal und ändert seine Akzentfarbe. Mit Tokens werden zwei Werte in einer Datei angepasst, alle Buttons, Links, Fokusrahmen und Diagrammfarben folgen automatisch, und die Kontrastprüfung nach WCAG ist an einer Stelle nachvollziehbar. Ohne Tokens beginnt eine Suche über Komponenten, E-Mail-Vorlagen und PDF-Ausgaben, bei der einzelne Stellen zuverlässig übersehen werden — meist genau jene Zustände, die man selten sieht: deaktivierte Schaltflächen, Fehlermeldungen, Ladezustände. Ein halber Tag Vorarbeit ersetzt hier wiederkehrende Tage an Nacharbeit.

Technisch entstehen Tokens heute meist als CSS Custom Properties, als Theme-Konfiguration in Tailwind CSS und parallel als Variablen im Designwerkzeug. Für den Austausch zwischen beiden Welten arbeitet eine W3C Community Group an einem JSON-Format; es ist noch nicht abgeschlossen, und Werkzeugketten unterscheiden sich in der Praxis. Die ehrliche Abgrenzung: Für eine einzelne Website, die eine Person pflegt, bringt eine dreistufige Hierarchie mehr Verwaltung als Nutzen — dort genügen zwei Dutzend CSS-Variablen. Der Aufwand lohnt sich ab dem zweiten Produkt, ab mehreren Beteiligten oder sobald ein zweites Erscheinungsbild dazukommt. Der Rahmen dafür ist ein Design System.