Website? Jetzt anfragen!
← Zurück zum Glossar

Webdesign · Entwicklung · SEO

Design-Tokens

Design-Tokens erklärt: gemeinsame Gestaltungswerte | scinet

Redaktionell geprüft ·

Verständlich erklärt

Design-Tokens sind benannte Werte für wiederkehrende Gestaltungsentscheidungen. Dazu gehören etwa Farben, Abstände, Schriftgrößen oder Rundungen. Statt einen Farbwert immer wieder einzeln einzutragen, gibst du ihm einen Namen und eine verständliche Aufgabe.

Vielleicht kennst du das: Auf mehreren Seiten gibt es fast gleiche Buttons, aber jeder hat einen etwas anderen Abstand. Tokens können helfen, solche Entscheidungen bewusst zu vereinheitlichen. Dafür braucht es keine riesige Bibliothek. Ein kleiner, gut erklärter Satz gemeinsamer Werte ist oft der bessere Anfang.

Vom Farbwert zur Bedeutung

Ein Basiswert könnte rot-600 heißen. Ein semantischer Token wie aktion-primaer beschreibt dagegen, wofür die Farbe gedacht ist. Ein Button kann anschließend diesen semantischen Wert verwenden. Diese Ebenen sind ein mögliches Organisationsmodell, keine Pflicht für jedes Projekt.

Der Unterschied wird beim Redesign sichtbar: Die primäre Aktion darf eine andere Farbe bekommen, während eine Fehlermeldung rot bleibt. Wenn beide bisher direkt denselben Basiswert verwenden, fehlt diese Trennung. Überlege also zuerst, welche Entscheidungen tatsächlich zusammengehören.

Auf einen Blick

Basiswert: rot-600: #be1622 ist ein Farbwert.. Rolle: aktion-primaer: Benennt den Zweck der Farbe.. Komponente: Button: Verwendet die Rolle für seine Fläche.
Vom konkreten Wert zur verständlichen Aufgabe. Ein mögliches Organisationsmodell. Tokens können in CSS-Variablen übersetzt werden.Infografik in voller Größe öffnen

Wie Werte zwischen Werkzeugen wandern

Tokens können in einer strukturierten Datei gespeichert und durch Werkzeuge in plattformspezifische Werte übersetzt werden. Das Format der Design Tokens Community Group beschreibt dafür unter anderem Typen, Werte, Gruppen und Referenzen. Es ist eine Spezifikation der Community Group; daraus folgt nicht automatisch, dass jedes Designwerkzeug sie vollständig unterstützt.

Für eine Website können am Ende CSS-Variablen entstehen. Für andere Oberflächen können andere Ausgabeformate nötig sein. Prüfe den tatsächlichen Export und Import mit ein paar Beispielwerten, bevor du deine gesamte Gestaltung darauf aufbaust.

Varianten brauchen klare Regeln

Eine helle und eine dunkle Oberfläche können dieselben semantischen Namen verwenden und unterschiedliche Werte zuweisen. Das Resolver-Modul der Community Group beschreibt die Auflösung von Tokens für unterschiedliche Kontexte. Bei Farben spielen außerdem der verwendete Farbraum und seine Darstellung eine Rolle.

Für dein Projekt würde ich zuerst festhalten, wer Werte ändern darf und wie diese Änderung geprüft wird. Eine andere Textfarbe kann viele Komponenten zugleich treffen. Deshalb gehören Kontrastprüfung, echte Inhalte und die Kontrolle der betroffenen Zustände zum Ablauf. Zentral gepflegt heißt nicht automatisch risikofrei.

Passend dazu: CSS-Variablen · Tailwind CSS · Bootstrap 6 Alpha im Vergleich.

Codebeispiel aus der Praxis

CSS

Basiswert und semantische Rolle

Eigenes CSS-Beispiel für eine mögliche Token-Struktur. Dies ist kein JSON-Beispiel des Austauschformats.

:root {
  --rot-600: #be1622;
  --aktion-primaer: var(--rot-600);
}
.projekt-button {
  background-color: var(--aktion-primaer);
  color: #fff;
}

Quellen und weiterführende Informationen

  1. Dokumentation Design Tokens Format Module 2025.10 Design Tokens Community Group · Geprüft
  2. Dokumentation Resolver Module 2025.10 Design Tokens Community Group · Geprüft
  3. Dokumentation Color Module 2025.10 Design Tokens Community Group · Geprüft

Häufige Fragen

Ein Token beschreibt eine benannte Gestaltungsentscheidung. Eine CSS-Variable ist ein Mechanismus des Browsers. Tokens können als CSS-Variablen umgesetzt werden, aber auch in anderen technischen Formaten.

Oft reichen wenige gemeinsame Werte für Farben, Abstände und Schriftgrößen. Ich würde mit wiederkehrenden Entscheidungen beginnen und erst erweitern, wenn ein konkreter Bedarf entsteht.