Designsystem und Tokens

Sobald eine Website mehr als ein paar Seiten hat, entsteht eine Frage der Ordnung: Wer legt fest, welches Blau, welcher Abstand, welche Schriftgröße? Ohne Antwort schleichen sich Varianten ein, bis dieselbe Schaltfläche auf fünf Seiten fünf Abstufungen hat. Tokens lösen das – und sie sind deutlich einfacher, als der Begriff vermuten lässt.

1. Was ein Token ist

Der Gewinn zeigt sich beim ersten Wechsel. Wird die Markenfarbe geändert, ist das bei Tokens eine Zeile; ohne sie eine Suche über alle Dateien, bei der verlässlich drei Stellen übrig bleiben. Der zweite Gewinn ist die Sprache: Wenn im Team von abstand-6 die Rede ist, meinen alle dasselbe – „etwas mehr Luft“ meint niemand gleich.

2. Ein kleines Verzeichnis

Auffällig ist, wie wenige es sind. Ein Designsystem für einen Mittelständler braucht keine hundert Werte; es braucht wenige, die konsequent verwendet werden. Der Nutzen entsteht durch die Konsequenz, nicht durch die Vollständigkeit.

3. Namen, die tragen

Die Benennung entscheidet über die Haltbarkeit. Ein Token namens blau wird falsch, sobald die Marke ihre Farbe ändert. Ein Token namens farbe-akzent bleibt richtig. Gleiches gilt für Abstände: abstand-gross ist unklar, sobald ein noch größerer hinzukommt – nummerierte Stufen sind stabiler.

4. Wann sich ein Designsystem lohnt

Ein vollständiges Designsystem mit Komponentenbibliothek, Dokumentation und Pflegeprozess lohnt sich ab etwa drei zusammenhängenden Projekten oder einem Produkt mit laufender Weiterentwicklung. Für eine einzelne Unternehmenswebsite genügt die kleine Form: ein Token-Verzeichnis, eine Übersicht der Komponenten und eine Seite mit Beispielen. Das ist an einem Tag angelegt und deckt neunzig Prozent des Nutzens ab.

Der häufigste Fehler ist der umgekehrte: ein aufwendiges System für ein Projekt, das danach nicht weiterläuft. Die Pflege kostet dann mehr als die Ersparnis.

5. Vom Entwurf in den Code

Tokens existieren an zwei Orten: im Entwurfswerkzeug als Stile und im Code als Variablen. Wichtig ist, dass die Namen identisch sind. Dann bedeutet eine Anmerkung wie „hier bitte abstand-6 statt abstand-4“ für beide Seiten dasselbe, und es entsteht kein Übersetzungsschritt, bei dem Fehler passieren.

In modernen Websites liegen die Tokens im Code als CSS-Variablen. Das hat einen praktischen Nebeneffekt: Ein dunkler Modus oder eine Fassung mit erhöhtem Kontrast entsteht dann durch das Austauschen weniger Werte statt durch eine zweite Gestaltung.

6. Häufige Fragen

Brauchen wir dafür ein bestimmtes Werkzeug? Nein. Eine Tabelle mit Name, Wert und Verwendungszweck genügt für den Anfang. Werkzeuge helfen bei der Übertragung zwischen Entwurf und Code, sind aber kein Muss.

Wer pflegt die Tokens? Eine benannte Person. Tokens ohne Zuständigkeit wachsen unkontrolliert – nach einem Jahr gibt es dann vier Akzentfarben.

Was ist mit bestehenden Marken-Vorgaben? Sie werden zu Tokens. Eine Markenrichtlinie legt meist Farben und Schriften fest; Abstände, Radien und Zustände kommen hinzu und ergeben zusammen ein benutzbares System.

7. Übung zum Selbermachen

Lesen Sie von einer Website, die Sie betreuen, alle verwendeten Farbwerte und Abstände aus – im Browser über die Entwicklerwerkzeuge oder durch Nachmessen. Tragen Sie sie in eine Tabelle ein und zählen Sie die unterschiedlichen Werte. Reduzieren Sie danach auf höchstens fünf Farben und sechs Abstände und geben Sie jedem einen Namen nach den Regeln aus Tabelle 3.1. Das Ergebnis ist Ihr erstes Token-Verzeichnis.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.