Design-Tokens: eine Quelle der Wahrheit für Farbe und Schrift

Design-Tokens sind benannte Werte für jede Designentscheidung, die eine Marke wiederholt: Farben, Schriften, Schriftgrößen, Abstände, Eckenradien, Schatten und Animationszeiten. Statt #5b21b6 in ein Stylesheet, eine Figma-Datei und eine iOS-App zu tippen, definierst du color.brand.700 einmal, in einer Datei, und erzeugst daraus das Format jeder Plattform. Änderst du das Token, aktualisiert sich jedes Produkt gleichzeitig. Diese eine Quelle der Wahrheit ist der ganze Sinn.

So sieht ein Design-Token aus

Ein Token hat einen Namen, einen Wert und einen Typ. Das Format der W3C Design Tokens Community Group schreibt sie als JSON, mit Eigenschaften, die mit einem Dollarzeichen beginnen, damit sie nicht mit Gruppennamen kollidieren.

{
  "color": {
    "violet": {
      "100": { "$type": "color", "$value": "#ede9fe" },
      "500": { "$type": "color", "$value": "#8b5cf6" },
      "700": { "$type": "color", "$value": "#6d28d9" },
      "900": { "$type": "color", "$value": "#4c1d95" }
    },
    "ink": { "$type": "color", "$value": "#14121f" },
    "paper": { "$type": "color", "$value": "#faf8ff" }
  },
  "font": {
    "heading": { "$type": "fontFamily", "$value": ["Fraunces", "Georgia", "serif"] },
    "body": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] }
  },
  "radius": {
    "control": { "$type": "dimension", "$value": { "value": 10, "unit": "px" } }
  },
  "duration": {
    "quick": { "$type": "duration", "$value": { "value": 160, "unit": "ms" } }
  }
}

Primitive, semantische und Komponententokens

Eine flache Liste von Farben ist eine Palette, kein System. Die Struktur, die über Jahre hält, hat drei Ebenen, die jeweils auf die darunter verweisen. Komponenten berühren nie Rohwerte; sie fragen nach einem Zweck.

{
  "color": {
    "action": {
      "primary": { "$type": "color", "$value": "{color.violet.700}" },
      "primary-hover": { "$type": "color", "$value": "{color.violet.900}" }
    },
    "text": {
      "default": { "$type": "color", "$value": "{color.ink}" },
      "on-action": { "$type": "color", "$value": "{color.paper}" }
    },
    "surface": {
      "page": { "$type": "color", "$value": "{color.paper}" },
      "tint": { "$type": "color", "$value": "{color.violet.100}" }
    }
  }
}

Viele Teams hören bei zwei Ebenen auf, primitiv und semantisch, und fügen Komponententokens nur dort hinzu, wo eine Komponente wirklich abweicht. So bleibt die Datei klein genug, um sie zu verstehen.

Design-Tokens so benennen, dass sie halten

Namen überleben Werte. Ein Token namens color.purple bricht an dem Tag, an dem die Marke zu Petrol wechselt; ein Token namens color.action.primary übersteht das. Benenne semantische Tokens nach ihrer Rolle und halte primitive Namen beschreibend für den Wert.

Wähle ein Muster, etwa Kategorie, dann Rolle, dann Variante, dann Zustand, und halte es in deinem Markenstyleguide fest. Einheitliche Benennung zählt mehr als die Frage, welches Muster du wählst.

Von der Token-Datei zu CSS und Apps

Die Token-Datei wird nicht so ausgeliefert, wie sie ist. Ein Build-Schritt verwandelt sie in das, was jede Plattform braucht. Style Dictionary ist das am weitesten verbreitete Open-Source-Werkzeug dafür, und andere lesen dasselbe Format. Für das Web sind das meist CSS Custom Properties.

:root {
  --color-violet-100: #ede9fe;
  --color-violet-700: #6d28d9;
  --color-violet-900: #4c1d95;
  --color-ink: #14121f;
  --color-paper: #faf8ff;

  --color-action-primary: var(--color-violet-700);
  --color-text-default: var(--color-ink);
  --color-surface-page: var(--color-paper);

  --font-heading: Fraunces, Georgia, serif;
  --radius-control: 10px;
  --duration-quick: 160ms;
}

.button {
  background: var(--color-action-primary);
  color: var(--color-paper);
  border-radius: var(--radius-control);
  transition: background var(--duration-quick) ease;
}

Nutzt du Tailwind v4, ist der @theme-Block selbst eine Token-Ebene: Jede --color-*-Variable wird zu Utilities. Tailwind Farben zeigt, wie du eine Token-Skala dort einbindest. Dieselbe Datei kann auch Swift-Konstanten und Android-Ressourcen erzeugen, und genau dort zahlen sich Tokens für Teams mit mehreren Plattformen aus.

Dark Mode und mehrere Marken

Weil Komponenten nur semantische Tokens lesen, ist ein Theme einfach ein anderes Set an Werten für diese Ebene. Der Dark Mode definiert color.text.default und color.surface.page neu; eine zweite Marke definiert color.action.primary neu. An den Komponenten ändert sich nichts.

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-default: #e9e5f5;
    --color-surface-page: #0b0a14;
    --color-action-primary: var(--color-violet-500);
  }
}

[data-brand="harbour"] {
  --color-action-primary: #0f766e;
}

Design-Tokens einführen

1. 1

   Bestand aufnehmen

   Sammle jede Farbe, Schriftgröße und jeden Abstand, die im Einsatz sind. Rechne mit Duplikaten, die sich um eine Hex-Ziffer unterscheiden.

2. 2

   Primitive definieren

   Reduziere sie auf klare Skalen. Farbskalen in OKLCH aufzubauen hält die Stufen gleichmäßig; siehe OKLCH erklärt.

3. 3

   Die semantische Ebene ergänzen

   Benenne Rollen: Text, Fläche, Rahmen, Aktion, Rückmeldung. Lass jede auf ein Primitiv zeigen.

4. 4

   Den Build automatisieren

   Erzeuge CSS und App-Ressourcen im Build aus der Datei, nie von Hand.

5. 5

   Es absichern

   Prüfe per Linter auf rohe Hex-Werte in Komponenten, damit neuer Code vom ersten Tag an Tokens nutzt.

Tokens halten das Produkt einheitlich, aber Marken driften auch in den Grafiken, die außerhalb entstehen: Beiträge, Folien, Banner. Ein Gradiently-Markenkit hält dieselben Entscheidungen fest, deine Farbpaletten, Überschrift- und Fließtextschriften, Logos und Stimme, sodass Designs aus dem Studio dazu passen. Und weil Gradiently in ChatGPT, Claude und anderen Assistenten funktioniert, die Remote-MCP-Server unterstützen, kann ein Assistent mit einem eingeschränkten API-Schlüssel markengerechte Designs aus demselben Arbeitsbereich erstellen. Markenkonsistenz behandelt die größere Gewohnheit.