Design Token

Jede App und jede Webseite besteht aus tausenden kleinen Gestaltungsentscheidungen. Welches Blau haben die Buttons? Wie viel Platz liegt zwischen zwei Absätzen? Wie stark sind die Ecken abgerundet? Ein Design Token ist so eine Entscheidung, festgehalten als Paar aus Name und Wert. Statt an fünfhundert Stellen den Farbcode für Blau einzutragen, schreibt man überall den Namen hin, zum Beispiel « farbe-primaer ». Was dieser Name konkret bedeutet, steht an genau einer zentralen Stelle. Man kann sich das wie eine Vokabelliste für das Aussehen eines Produkts vorstellen.

Warum große Produkte ohne Tokens unordentlich werden

An einer größeren App arbeiten oft dutzende Menschen gleichzeitig. Ohne gemeinsame Liste sucht sich jeder seine Werte selbst aus. Dann existieren am Ende sieben leicht unterschiedliche Blautöne, und keiner weiß, welcher der richtige ist. Nutzer merken das nicht bewusst, empfinden das Produkt aber als unruhig und billig gemacht.

Der zweite Grund ist Änderbarkeit. Wenn ein Unternehmen sein Logo und seine Hausfarbe erneuert, muss die neue Farbe überall ankommen. Mit Tokens ändert man einen einzigen Eintrag, und alle Bildschirme ziehen nach. Ohne Tokens wird daraus eine wochenlange Suche durch den Programmcode, bei der garantiert eine Stelle vergessen wird.

Dazu kommt ein praktischer Nebeneffekt: Designer und Programmierer reden endlich über dasselbe. Beide benutzen den Namen « abstand-gross » statt « 24 Pixel » oder « ungefähr zwei Zentimeter ». Missverständnisse zwischen Entwurf und fertigem Produkt werden dadurch deutlich seltener.

Vom Namen zum fertigen Pixel

Technisch sind Design Tokens meist eine schlichte Textdatei mit einer langen Liste. Dort steht zum Beispiel, dass « farbe-primaer » den Wert #0057FF hat und « abstand-klein » acht Pixel bedeutet. Diese Datei ist die einzige Wahrheit. Ein kleines Hilfsprogramm liest sie und erzeugt daraus automatisch die passenden Dateien für die Webseite, für die iPhone-App und für die Android-App. Jede dieser Plattformen braucht ein eigenes Format, bekommt aber garantiert dieselben Werte.

In der Praxis arbeitet man mit mehreren Ebenen. Die unterste Ebene enthält nur rohe Werte mit neutralen Namen, etwa « blau-500 ». Darüber liegt eine Ebene, die diesen Werten eine Bedeutung gibt: « farbe-primaer » verweist auf « blau-500 ». Das klingt umständlich, ist aber der eigentliche Trick. Man kann die Bedeutung umhängen, ohne die Grundfarben anzufassen.

Genau so entsteht auch der dunkle Modus, den viele Apps anbieten. Es gibt zwei Sätze von Bedeutungen: im hellen Modus zeigt « farbe-hintergrund » auf Weiß, im dunklen auf ein sehr dunkles Grau. Der Programmcode bleibt unverändert, weil dort ohnehin nur der Name steht. Ein typischer Irrtum ist übrigens, Tokens für einzelne Bauteile anzulegen, etwa « blau-fuer-den-login-button ». Solche Namen wachsen ins Unendliche und lösen das Problem nicht mehr.

Wo Tokens im Alltag auftauchen

Design Tokens sind fester Bestandteil sogenannter Designsysteme. Das sind Baukästen aus Regeln und fertigen Bausteinen, die Unternehmen wie Google, IBM oder die Deutsche Bahn öffentlich bereitstellen. Wer sich Material Design von Google ansieht, findet dort genau solche Listen aus benannten Farben und Abständen.

Auch in Werkzeugen begegnet man ihnen direkt. Im Designprogramm Figma lassen sich Farben und Schriftgrößen als Variablen anlegen, die anschließend an Entwicklerteams weitergegeben werden. Seit 2024 gibt es zudem ein offizielles Standardformat, damit Tokens zwischen verschiedenen Programmen wandern können, ohne von Hand übersetzt zu werden.

Ein Hinweis zur Abgrenzung: Der Begriff Token bedeutet in der KI etwas völlig anderes. Dort ist ein Token ein Textbaustein, in den ein Sprachmodell Sätze zerlegt. Mit Gestaltung hat das nichts zu tun, die Wörter sind nur zufällig gleich. In Stellenanzeigen und Produktmeldungen aus dem Bereich Benutzeroberflächen ist fast immer der gestalterische Sinn gemeint.