Ein UI wirkt oft „inkonsistent“, obwohl einzelne Screens gut gestaltet sind: Buttons sind mal 44 px hoch, mal 48 px, Grautöne wechseln leicht, und Überschriften springen zwischen Größen. Das Problem ist selten fehlendes Talent – meist fehlt eine gemeinsame Grundlage. Genau hier helfen Design Tokens: kleine, benannte Werte wie Farbe, Abstand oder Schriftgröße, die überall gleich verwendet werden.
Tokens sind keine Design-Deko, sondern ein Übersetzungssystem zwischen Design und Entwicklung. Statt „nimm ein helles Grau“ gibt es einen konkreten Wert wie Farb-Tokens (z. B. color.text.secondary) oder Spacing Tokens (z. B. space.16). Dadurch werden Änderungen planbar: Ein Wert wird angepasst, und die UI folgt konsistent.
Was Design Tokens sind – und was nicht
Einfach erklärt: benannte Werte statt Bauchgefühl
Ein Token ist ein benannter Designwert. Beispiele: „Primärfarbe“, „Textfarbe“, „Abstand klein“, „Radius mittel“, „Schriftgröße Body“. Wichtig ist nicht der technische Speicherort, sondern die Eindeutigkeit: Alle im Team meinen dasselbe, wenn sie denselben Namen nutzen.
Tokens sind nicht gleichbedeutend mit einem Designsystem. Ein Designsystem kann Tokens enthalten, aber Tokens funktionieren auch in kleineren Projekten. Ebenso sind Tokens nicht „nur für große Teams“: Gerade kleine Teams profitieren, weil weniger diskutiert und weniger nachgebessert wird.
Warum Tokens in der Praxis Zeit sparen
-
Konsistenz: Gleiche Abstände, gleiche Hierarchien, weniger „krumme“ Einzelfälle.
-
Änderbarkeit: Rebranding oder Dark Mode wird einfacher, weil Werte zentral definiert sind.
-
Kommunikation: Design und Entwicklung sprechen über Namen statt über Screenshots.
-
Qualität: UI-Checks werden schneller, weil Abweichungen klarer auffallen.
Welche Token-Typen ein Web-UI wirklich braucht
Farben: weniger Töne, klarere Rollen
Ein häufiger Fehler: Farben werden als „Blau 1, Blau 2, Blau 3“ gesammelt. Das ist schwer zu pflegen, weil niemand weiß, wann welcher Ton eingesetzt werden soll. Besser sind Rollen (wofür eine Farbe gedacht ist). Typische Rollen sind Text, Hintergrund, Rahmen, Akzente, Status (Erfolg/Warnung/Fehler).
Praktisch bedeutet das: Eine Sekundärtextfarbe ist als Rolle definiert und kann später angepasst werden, ohne dass jede Stelle im UI manuell gesucht wird.
Abstände: ein kleines Raster als Standard
Abstände entstehen oft zufällig durch „Pixel-Schubsen“. Das wirkt sich massiv auf den Gesamteindruck aus. Ein Token-Set für Abstände sollte überschaubar bleiben und sich an einem nachvollziehbaren Schrittmaß orientieren (z. B. in 4er- oder 8er-Schritten). Wichtig: Nicht jeden Abstand der Welt als Token anlegen, sondern die häufigen Abstände, die Layouts tragen.
Abstände lassen sich gut als Zahlenreihe benennen (space.4, space.8, space.16 …). Dadurch bleibt die Auswahl schnell und Missverständnisse werden selten.
Typografie: Hierarchie statt „30 verschiedene Schriftgrößen“
Für Typografie sind Rollen besonders hilfreich: Body, Caption, H1/H2/H3, Button, Label. Entscheidend ist, dass die UI-Schrift nicht pro Komponente neu „erfunden“ wird. Tokens helfen außerdem, responsive Varianten vorzubereiten, ohne die Typografie in jedem Screen einzeln anzupassen.
Wenn das Thema Schrift im System gerade aufgebaut wird, passt als Ergänzung: Designsystem-Typografie im Web – konsistente Schriften planen.
Token-Namen, die Menschen verstehen (und Code überlebt)
Rollenbasiert vs. wertbasiert: so bleibt es flexibel
Grundidee: Tokens sollten möglichst beschreiben, wofür ein Wert genutzt wird, nicht wie er aussieht. „color.blue.500“ beschreibt den Ton, „color.brand.primary“ beschreibt die Rolle. Rollen gewinnen fast immer, weil sie Rebranding, Dark Mode und neue Themes leichter machen.
In der Praxis hat sich eine Kombination bewährt:
-
Ein „Basis“-Bereich (wertbasiert): konkrete Farben oder Maße (z. B. base.blue.500).
-
Ein „Semantik“-Bereich (rollenbasiert): Verwendungen im UI (z. B. color.brand.primary), die auf Basiswerte zeigen.
Beispiel für eine klare Token-Struktur
| Token | Bedeutung | Beispiel-Einsatz |
|---|---|---|
| color.text.primary | Haupttextfarbe | Fließtext, Headline |
| color.surface.default | Standard-Fläche | Cards, Seitenhintergrund |
| color.border.subtle | dezente Linie | Trenner, Input-Rahmen |
| space.16 | Standard-Abstand | Padding in Cards |
| radius.12 | mittlere Rundung | Buttons, Cards |
| type.body.size | Body-Schriftgröße | Text in Listen, Absätzen |
So werden Tokens in Figma und CSS alltagstauglich
Figma: Tokens als zentrale Quelle für Styles
In Figma lassen sich Farben und Textstile bereits als „Styles“ pflegen. Für Tokens ist wichtig, dass diese Styles nicht nur existieren, sondern nach einer logischen Struktur benannt sind (z. B. „Text/Primary“, „Surface/Default“, „Space/16“ als Dokumentationslogik). So wird die Auswahl im Design schneller und die Übergabe an Entwicklung klarer.
Wenn Komponenten systematisch aufgebaut werden, lohnt zusätzlich ein Blick auf: UI-Design-System in Figma aufbauen – Komponenten mit Plan.
CSS: Tokens als Custom Properties nutzen
Im Web landen Tokens häufig als CSS Custom Properties (CSS-Variablen). Das Prinzip ist simpel: Im Root werden die Werte definiert, und Komponenten verwenden nur noch die Variablen. Damit lassen sich Themes (z. B. Dark Mode) sauber überschreiben, ohne jede Komponente anzufassen.
Beispiel (nur als Konzept, ohne Code hier): Statt „border-color: #E5E7EB“ wird „border-color: var(–color-border-subtle)“ genutzt. Der Vorteil: Der Wert kann später zentral angepasst werden, und die Bedeutung bleibt lesbar.
Stolperfallen: so bleiben Tokens schlank und nutzbar
Zu viele Tokens machen alles langsamer
Ein Token pro Ausnahme ist verlockend („space.18“, „space.22“), führt aber schnell zu einem unübersichtlichen Set. Besser: zuerst eine kleine Standardpalette festlegen und Ausnahmen bewusst als Ausnahme behandeln (und später prüfen, ob sie wirklich nötig sind).
Semantik darf nicht raten lassen
Rollen sollten eindeutig sein. „color.primary“ ist oft zu vage, wenn unklar bleibt, ob das für Buttons, Links oder Brand-Akzente gedacht ist. „color.action.primary“ oder „color.brand.primary“ ist verständlicher.
Tokens ohne Komponenten sind halbe Miete
Tokens wirken am stärksten, wenn sie in Komponenten konsequent angewendet werden. Sonst existieren zwar Regeln, aber die UI nutzt sie nicht. Wer bereits komponentenbasiert arbeitet, kann Tokens gezielt in die Bausteine ziehen. Passender Kontext: Komponentenbasiertes Webdesign – UI-Bibliotheken strukturiert aufbauen.
So geht’s: Token-Set in 60–90 Minuten starten
-
Bestehende UI-Screens sammeln und die häufigsten Farben, Abstände, Schriftstile markieren.
-
Ein kleines Set definieren: Text (2–3 Rollen), Flächen (2–3 Rollen), Rahmen (1–2 Rollen), Abstände (6–10 Werte), Radius (2–4 Werte).
-
Namen rollenbasiert vergeben und eine kurze Beschreibung pro Rolle notieren (wo wird es genutzt?).
-
In Figma Styles konsolidieren (doppelte Farben/ähnliche Textstile zusammenführen).
-
Erste Kernkomponenten (Button, Input, Card) ausschließlich mit den Tokens bauen.
-
Einmal testen: einen Wert ändern (z. B. Standard-Abstand) und prüfen, ob die UI sauber „mitzieht“.
Checkliste: Token-Qualität prüfen, bevor es groß wird
-
Gibt es pro Token eine klare Rolle (Text, Fläche, Rahmen, Aktion, Status)?
-
Ist die Anzahl der Spacing-Werte überschaubar und wiederholt nutzbar?
-
Nutzen die wichtigsten Komponenten die Tokens konsequent (statt Einzelwerte)?
-
Sind die Namen verständlich für Nicht-Designer:innen (keine kryptischen Abkürzungen)?
-
Kann ein Theme (z. B. Dark Mode) durch Überschreiben weniger Werte entstehen?
FAQ zu Design Tokens im Webdesign
Wann lohnt sich der Einstieg – schon bei kleinen Projekten?
Ja, wenn mehr als ein oder zwei Seiten entstehen oder wenn mehrere Personen an Design/Code arbeiten. Schon ein kleines Token-Set für Farbe, Abstand und Typografie verhindert, dass sich „Sonderfälle“ stapeln.
Sind Tokens dasselbe wie Design Tokens in Figma-Plugins?
Plugins können helfen, Tokens zu verwalten oder zu exportieren. Entscheidend bleibt aber die inhaltliche Struktur: Rollen, Namenslogik und konsequente Nutzung. Ohne diese Grundlagen bringt auch ein Tool wenig.
Wie hängen Tokens mit Barrierefreiheit zusammen?
Tokens erleichtern das Durchziehen guter Standards: Wenn z. B. Textfarben und Flächenrollen sauber definiert sind, lassen sich kontrastkritische Bereiche leichter finden und zentral verbessern. Für die Praxis rund um Kontraste passt ergänzend: UI-Design mit Farbkontrasten optimieren – lesbare Interfaces gestalten.
Was ist der kleinste sinnvolle Token-Umfang?
Ein Startset kann sehr klein sein: 3–5 Text/Surface/Border-Farbrollen, 6–10 Abstände, 2–4 Radien und 5–8 Typografie-Rollen. Wichtig ist nicht die Menge, sondern dass die Kernkomponenten damit gebaut werden können.
