# Design-Tokens

> Design-Tokens benennen die Rollen deines Erscheinungsbilds — Hintergrund, Markenfarbe, Schrift. Warum eine Maschine ohne sie deine Marke nur erraten kann.

Synonyms: Design Token, Gestaltungstoken, DTCG

Design-Tokens sind die benannten Bausteine eines Erscheinungsbilds: Farbrollen wie Hintergrund oder Markenfarbe und Schriftrollen wie Überschrift und Fließtext. Sie machen ein Design für Maschinen lesbar.

Design-Tokens sind die benannten Bausteine eines Erscheinungsbilds. Statt eines Farbwerts, der irgendwo im Stylesheet steht, wird festgehalten, welche **Rolle** dieser Wert spielt: Hintergrund, Vordergrund, Markenfarbe, Überschriftenschrift.

Der Unterschied ist entscheidend für Maschinen. Ein Mensch sieht auf einer Website sofort, welches Grün die Marke trägt. Ein Programm sieht nur eine Liste von Werten ohne Bedeutung — es sei denn, die Rollen sind ausdrücklich benannt.

Für die Veröffentlichung gibt es ein Format: den Entwurf der **Design Tokens Community Group** (DTCG). Darin ist eine Farbe kein Hex-String, sondern ein Objekt mit Farbraum und Komponenten. Eine solche Datei kann ein Agent lesen, ohne das Stylesheet zu interpretieren.

Wichtig zur Einordnung: Kein Suchdienst bewertet solche Dateien heute. Ihr Nutzen liegt darin, dass ein System, das einen Betrieb _darstellen_ soll, eine belastbare Quelle für Farbe und Schrift hat — statt zu raten.

Wie das in der Praxis aussieht — und was eine Sonde über 18 Designsystem-Domains ergab — steht in [Warum eine KI deine Marke nicht darstellen kann](https://btlabs.dev/de/posts/marke-maschinenlesbar-design-tokens).

- [Maschinenlesbarkeit](https://btlabs.dev/de/glossary?tag=maschinenlesbarkeit)
- [Strukturierte Daten](https://btlabs.dev/de/glossary?tag=strukturierte-daten)
- [Webdesign](https://btlabs.dev/de/glossary?tag=webdesign)

## Verwandte Begriffe

- [LLMs.txt](https://btlabs.dev/de/glossary/llms-txt)
- [Strukturierte Daten](https://btlabs.dev/de/glossary/strukturierte-daten)

## Häufig gestellte Fragen.

**Was sind Design-Tokens?**

Design-Tokens sind die benannten Bausteine eines Erscheinungsbilds: Farbrollen wie Hintergrund, Vordergrund oder Markenfarbe, dazu Schriftrollen wie Überschrift und Fließtext. Statt eines Farbwerts irgendwo im Stylesheet steht dort, welche ROLLE dieser Wert spielt — und genau das kann eine Maschine lesen.

**Bringt eine Datei mit Design-Tokens heute ein besseres Ranking?**

Nein. Keine Suchmaschine bewertet sie, und wir kennen keinen Dienst, der sie heute abruft. Der Nutzen ist eine Wette auf die nächste Stufe: Sobald Assistenten Betriebe nicht nur nennen, sondern darstellen, brauchen sie eine Quelle für Farbe und Schrift. Wer dann eine hat, wird richtig dargestellt statt geraten.

**Woran erkenne ich, ob meine Marke maschinenlesbar ist?**

Öffne dein Stylesheet und frage dich, ob ein Fremder daraus ablesen könnte, welche Farbe deine Markenfarbe ist — nicht welcher Wert wo steht, sondern welche Rolle er hat. Heißt deine Markenfarbe im Code nur `--farbe-3` oder liegt sie unbenannt neben zwei gleich aussehenden Grautönen, dann kann eine Maschine sie nicht finden.

---
Source: https://btlabs.dev/de/glossary/design-tokens
Languages: [it](https://btlabs.dev/llms/it/glossary/design-token) · [en](https://btlabs.dev/llms/en/glossary/design-tokens)
See also: [llms.txt](https://btlabs.dev/llms.txt) · [ai.txt (Policy)](https://btlabs.dev/ai.txt) · [identity.json](https://btlabs.dev/identity.json)