Was ist Design Token?
Ein Design Token ist ein Name-Wert-Paar für eine Gestaltungsentscheidung: `color.brand.primary` statt `#324ceb`, `space.md` statt `16px`. Der Gewinn liegt in der Ebene darüber: Weil überall der Name steht und nicht die Zahl, ändert ein einziger Eintrag die Farbe in Figma, in der iOS-App und auf der Website gleichzeitig. Gute Token-Sets arbeiten in Schichten - Rohwerte, semantische Namen wie `color.text.muted`, und darauf aufbauend Komponentenwerte.
Seit dem 28. Oktober 2025 gibt es dafür einen Standard: Die Design Tokens Community Group beim W3C hat die erste stabile Fassung ihrer Spezifikation veröffentlicht (Version 2025.10), getragen unter anderem von Adobe, Google, Microsoft, Meta, Figma, Salesforce und Shopify. Damit ist das Dateiformat herstellerneutral - Tokens wandern zwischen Werkzeugen, ohne dass jemand Konvertierungscode pflegt.
Der häufigste Fehlschluss ist, Tokens für ein Design-Thema zu halten. Sie sind ein Verteilungsproblem: Ohne automatische Pipeline von der Quelle in Design, Code und Dokumentation ist eine Token-Datei nur ein PDF mit besserer Syntax. Für Text gilt dieselbe Logik - der Styleguide wirkt erst, wenn er versioniert im System-Prompt der Werkzeuge liegt statt in einem Ordner.
Warum ist Design Token wichtig?
Nicht das Format entscheidet, sondern die Leitung: Im Design Systems Report 2026 von zeroheight (147 befragte Praktikerinnen und Praktiker) hatten nur 40 Prozent der Teams überhaupt eine Token-Pipeline, alle anderen gleichen ihre Werte von Hand zwischen Design, Code und Doku ab. Genau dort entsteht die Inkonsistenz, die man später der Marke anlastet.
Design Token in der Praxis
- 01`color.brand.primary` ist an einer Stelle definiert und wird von Figma, der Website und der App gelesen - ein Rebranding ist ein Commit statt einer Suchen-und-Ersetzen-Woche.
- 02Semantische statt roher Namen: `color.text.muted` überlebt einen Farbwechsel, `grau-400` nicht.
- 03Dark Mode als zweiter Wertesatz auf denselben Namen, statt als zweiter Satz Komponenten.
