Design-Tokens als Standard: Ein Format für Farben, Schriften und Abstände
2025.10heißt die erste stabile Version des offenen Formats für Design-Tokens [1]
Seit Oktober 2025 gibt es einen offenen Standard, mit dem Farben, Schriften und Abstände zwischen Design-Werkzeugen und Code ausgetauscht werden. Was Design-Tokens sind und was Agenturen davon haben.
Das Wichtigste in Kürze
Design-Tokens sind die Bausteine eines Design-Systems als Daten: ein Name und ein Wert, etwa „Farbe Primär = Blau“ oder „Abstand M = 24 px“ [2]. Am 28. Oktober 2025 hat die Design Tokens Community Group beim W3C die erste stabile Fassung eines gemeinsamen Formats veröffentlicht [1]. Damit können Design-Werkzeuge und Code dieselbe Datei lesen. Für Agenturen heißt das: Das Corporate Design eines Kunden lässt sich einmal sauber anlegen und überall gleich verwenden.
Die Eckdaten
Was ein Token ist
Laut Spezifikation ist ein Token eine Information mit einem lesbaren Namen, mindestens ein Paar aus Name und Wert [2]. Gespeichert wird in JSON, der Wert steht unter $value, die Art unter $type [2]. Das Format kennt unter anderem Farben, Abstände, Schriftfamilien und -stärken, Dauer und Kurven für Animationen, Ränder, Schatten, Verläufe und ganze Typografie-Stile [2].
Entscheidend sind Verweise: Ein Token kann auf ein anderes zeigen, etwa „Button-Hintergrund = {Farbe.Primär}“ [2]. Ändert sich die Markenfarbe, ändert sich alles, was darauf verweist. Gruppen können andere Gruppen erweitern und einzelne Werte überschreiben [2]; so entstehen Varianten wie ein Dunkelmodus oder eine zweite Marke, ohne alles doppelt zu pflegen.
Ohne und mit Tokens
| Kriterium | Ohne Tokens | Mit Tokens |
|---|---|---|
| Markenfarbe ändern | in Figma, im CSS und in jedem Plugin einzeln | einmal im Token, alles andere folgt |
| Dunkelmodus | zweiter Satz Farben, oft unvollständig | Variante, die nur die nötigen Werte überschreibt [2] |
| Übergabe an andere Agentur | Styleguide als PDF, Werte abtippen | eine Datei im offenen Format [1] |
| Werkzeugwechsel | Werte neu anlegen | Datei mitnehmen, sofern das Werkzeug das Format liest |
Wie gut ein Werkzeug das Format unterstützt, hängt vom Hersteller ab; die Zahlen in eckigen Klammern verweisen auf die Quellenliste.
So arbeiten wir damit
Wenn wir aus einem Corporate Design ein Web-Design-System machen, legen wir Farben, Schriften, Abstände, Radien und Schatten als Tokens an und prüfen dabei gleich die Kontraste. Im Code werden daraus CSS-Variablen, auf WordPress mit Bricks und ACSS genauso wie auf Statamic. Wie der Weg vom CD zum System aussieht, steht in Corporate Design rein, Website raus.
Für Ihre Agentur hat das einen Nebeneffekt, der gut zu unserer Haltung passt: Die Tokens gehören Ihrem Kunden. Wer später mit einer anderen Agentur weiterarbeitet, nimmt das Design-System als Datei mit. Kein Lock-in, auch nicht im Design.
Häufige Fragen zum Thema
Was ist der Unterschied zwischen Design-Tokens und einem Styleguide?
Ein Styleguide beschreibt die Gestaltung für Menschen, meist als PDF. Design-Tokens sind dieselben Entscheidungen als Daten, die Werkzeuge und Code direkt lesen. Der Styleguide bleibt sinnvoll, die Tokens sorgen dafür, dass er auch umgesetzt wird.
Lohnen sich Design-Tokens auch für kleine Websites?
Ja, in einfacher Form. Schon zehn Farben, drei Schriften und eine Abstandsskala als Tokens machen spätere Änderungen schneller und halten die Seite einheitlich. Der Aufwand dafür steckt bei uns ohnehin im Design-System.
Können wir die Tokens in Figma weiterverwenden?
Wenn Ihr Werkzeug das offene Format oder einen passenden Import unterstützt, ja. Die Unterstützung entwickelt sich gerade, darum klären wir am Anfang, mit welchen Werkzeugen Ihre Agentur arbeitet.
Für Agenturen
Wir machen aus dem Corporate Design Ihres Kunden ein Design-System mit Tokens, geprüften Kontrasten und Dunkelmodus. White-label und zum Fixpreis.
Sie sind ein Unternehmen? Rückruf vereinbaren
Weiterlesen
- Corporate Design rein, Website raus: Wie aus einem CD ein Web-Design-System wirdEin Corporate Design regelt Logo, Farben und Schrift für Print. Eine Website braucht mehr: Farben als Tokens, Schriftgrößen für jede Breite, Abstände, Komponenten und Kontraste, die von Anfang an passen.
- Figma- oder KI-Layout umsetzen: Was ein Entwurf mitbringen mussIhre Agentur hat schon einen Entwurf aus Figma oder einem KI-Werkzeug? Wir setzen ihn zum selben Fixpreis in sauberen Code um. Damit nichts nachverhandelt werden muss, sollte er sieben Dinge mitbringen.
- Neue Farbräume und Dark Mode: Markenfarben im Web kräftiger und zugänglichModerne Browser können Farben darstellen, die über das klassische sRGB hinausgehen, und Hell- und Dunkelmodus direkt in CSS steuern. Was OKLCH, Display-P3 und light-dark() für Markenfarben bedeuten.
Quellen
- W3C Design Tokens Community Group, Design Tokens specification reaches first stable version (28.10.2025) · abgerufen am 29.10.2026
- Design Tokens Community Group, Design Tokens Format Module 2025.10 · abgerufen am 29.10.2026
Recherchiert mit KI-Unterstützung, mit Quellen belegt und inhaltlich geprüft von Mike Joerihsen am .
Diese Inhalte sind eine Orientierung und keine Rechtsberatung. Bei konkreten Fragen zu Ihrer Situation wenden Sie sich an eine Rechtsberatung oder die zuständige Behörde.