Design-Tokens erklärt: mach deine Marke zu Daten

Design-Tokens sind die einzelnen visuellen Entscheidungen, die eine Marke ausmachen — eine Farbe, eine Schriftgröße, ein Abstandsschritt, ein Eckenradius — gespeichert als benannte, strukturierte Daten, statt in eine Design-Datei oder ein PDF gezeichnet zu werden. Statt #FF450B an fünfzig verschiedenen Stellen zu schreiben, definierst du einmal einen Token namens colour.brand.primary, und jeder Button, jeder Link und jede Überschrift zeigt darauf. Ändere den Token und alles, was ihn nutzt, ändert sich mit. Das ist die ganze Idee: Marke als Daten, nicht Marke als Bild.

Dieser Beitrag erklärt, was Tokens sind, zeigt ein konkretes Beispiel, stellt Tokens dem klassischen Markenrichtlinien-PDF gegenüber und beschreibt, wie das Erfassen einer Marke als Tokens plus Regeln die Arbeit jedes Kunden konsistent hält — und Komponenten (und KI) standardmäßig markengerecht bauen lässt.

Was sind Design-Tokens?

Ein Design-Token ist die kleinste wiederverwendbare Einheit einer Design-Entscheidung, versehen mit einem Namen und einem Wert. Stell es dir vor wie eine Variable in einem Dokument statt einer Zahl, die überall eingetippt ist. space.md = 16px ist ein Token. radius.card = 16px ist ein Token. colour.text.body = #242424 ist ein Token.

Einzeln sehen sie trivial aus. Die Kraft liegt in dem, was passiert, wenn alles Nachgelagerte auf den Namen verweist statt auf den Wert:

• Eine Designerin wählt “Brand Primary” aus einer Palette — sie wählt einen Token, nicht das Erinnern an einen Hex-Code.
• Das Stylesheet einer Komponente liest colour.brand.primary — es codiert das Rot nie fest ein.
• Ein Rebranding wird zu einer Bearbeitung einer Handvoll Werte, nicht zu einem Suchen-und-Ersetzen quer durch eine ganze Codebasis.

Tokens werden meist in ein paar klare Kategorien organisiert. Hier eine typische Karte:

Kategorie	Was sie enthält	Beispiel-Token → Wert
Farbe	Marken-, Flächen-, Text- und Zustandsfarben	colour.brand.primary → #FF450B
Typografie	Schriftfamilien, -größen, -stärken, Zeilenhöhe	font.display → Inter 800
Abstand	die Abstandsskala für Ränder und Innenabstände	space.md → 16px
Radius	wie stark Ecken gerundet sind	radius.card → 16px
Elevation	Schatten und Ebenen	shadow.card → 0 14px 28px …

Wie sieht ein Design-Token aus?

Weil Tokens einfach Daten sind, werden sie meist in einem maschinenlesbaren Format wie JSON geschrieben. Ein winziger Ausschnitt einer Token-Datei könnte so lauten:

{
  "colour": {
    "brand": {
      "primary": { "value": "#FF450B" },
      "ink":     { "value": "#242424" },
      "surface": { "value": "#F5F5F5" }
    }
  },
  "space": {
    "sm": { "value": "8px" },
    "md": { "value": "16px" },
    "lg": { "value": "24px" }
  },
  "radius": {
    "control": { "value": "10px" },
    "card":    { "value": "16px" }
  }
}

Das ist der ganze Trick. Es ist absichtlich langweilig. Weil die Datei strukturiert und benannt ist, können ein Stylesheet, ein Design-Tool, ein Build-Skript und ein KI-Assistent alle dieselbe Quelle der Wahrheit lesen. Niemand muss ein Farbfeld mit dem Auge abschätzen und hoffen, das richtige Rot getroffen zu haben.

Tokens sind außerdem menschenlesbar. Wer diese Datei öffnet, sieht die Entscheidungen der Marke auf einen Blick, und eine Regel neben den Tokens kann in Klartext sagen: “Primäre Aktionen nutzen colour.brand.primary mit weißem Text.” Die Werte speisen die Maschinen; die Namen und Regeln halten die Menschen orientiert.

Warum nicht einfach ein Markenrichtlinien-PDF?

Ein Marken-PDF ist eine Beschreibung deiner Regeln. Design-Tokens sind die Regeln in einer Form, die Software tatsächlich ausführen kann. Dieser Unterschied ist das ganze Argument, und er zeigt sich auf fünf praktische Arten:

	Marken-PDF	Design-Tokens
Format	Ein Bild der Regeln	Die Regeln als Daten
Gelesen von	Menschen, gelegentlich	Code, Tools und KI, bei jedem Build
Angewendet	Von Hand kopiert	Automatisch konsumiert
Synchron gehalten	Manuell, wenn überhaupt	Eine Bearbeitung aktualisiert alles
Abdriften über Zeit	Unvermeidlich	Strukturell verhindert

Der Fehlermodus eines PDFs ist jeder Agentur vertraut. Die Richtlinien sagen, das Rot sei #FF450B. Sechs Monate und drei Freelancer später hat die Live-Site vier leicht verschiedene Rottöne, weil niemand ein PDF zur Bauzeit liest und ein von Hand kopierter Hex-Code ein Hex-Code ist, der irgendwann falsch kopiert wird.

Tokens entfernen den Kopierschritt komplett. Der Button kennt das Markenrot nicht — er liest colour.brand.primary. Es gibt keine zweite Stelle, an der der Wert leben und langsam von der ersten abweichen könnte.

Wie halten Tokens jeden Kunden konsistent?

Für eine Agentur ist die interessante Frage nicht eine Marke, sondern viele. Genau hier verdient das Modell seinen Lohn.

sSystms Design-System-Modul erfasst die Marke eines Kunden als genau das: strukturierte Design-Tokens — Farbe, Typo, Abstand, Radius — plus Regeln, sowohl menschen- als auch maschinenlesbar. Entscheidend: Es gibt ein Design-System pro Kunde. Jeder Kunde bekommt seinen eigenen Satz Tokens; das Werkzeug um diese Tokens herum ändert sich nie. Typo und Form unterscheiden sich von Kunde zu Kunde — eine Marke ist eine scharfe Serife mit engen Ecken, eine andere eine gerundete Grotesk mit vollen Pillen — aber die Maschinerie, die die Tokens liest und anwendet, ist jedes Mal identisch.

Die Konsistenz kommt aus einer simplen Regel: Komponenten und Wireframes stylen sich aus den Tokens, welches Kunden gerade aktiv sind. Du stylst einen Button nicht für jede Marke neu. Der Button liest die Tokens; wechsle den aktiven Kunden und derselbe Button ist jetzt korrekt markengerecht für den neuen. Alles bleibt standardmäßig konsistent, weil “markengerecht” eine Eigenschaft der Daten ist, nicht etwas, an dessen Anwendung sich ein Mensch erinnern muss.

Das ist ein deutlich anderes Versprechen als “hier sind die Richtlinien, bitte befolgt sie.” Mit Tokens ist es der Weg des geringsten Widerstands, der Marke zu folgen, statt ein Akt der Disziplin.

Tokens plus Regeln: die Marke als ausführbare Daten

Tokens allein erfassen die Werte. Regeln erfassen die Beziehungen — die Dos und Don’ts, die ein Hex-Code allein nicht ausdrücken kann. Neben den Tokens gehalten und so geschrieben, dass sie von Menschen und Maschinen gelesen werden, könnte ein Regelsatz sagen:

• Primäre Aktionen nutzen colour.brand.primary mit weißem Text.
• Fließtext bleibt auf surface, mit einem Mindestkontrast von AA.
• Platziere gedämpften Text nie auf der sekundären Fläche.
• Keine Verläufe auf interaktiven Flächen.

Weil diese Regeln als Daten neben den Tokens leben — nicht als Absatz in einem PDF, das niemand öffnet — können sie automatisch geprüft, angewendet und berücksichtigt werden. Die Marke hört auf, ein Dokument zu sein, das man nachschlägt, und wird zu einer Spezifikation, gegen die die Arbeit gebaut wird.

Wie KI aus Tokens markengerecht baut

Das Token-Modell zählt mehr, nicht weniger, sobald KI in den Workspace kommt. Ein KI-Assistent, der gebeten wird, eine Oberfläche zu bauen, produziert irgendetwas — aber ohne die Marke als Input rät er bei deinen Farben und Abständen. Füttere ihn mit strukturierten Tokens und Regeln, und die Marke wird zu etwas, das das Modell lesen und berücksichtigen kann, statt zu einem Bild, das es nicht sehen kann.

Das ist dasselbe Prinzip hinter KI, die baut, ohne dich einzusperren: Der Assistent arbeitet aus deinen Daten — deinen Tokens, deinen Regeln, deinem Workspace — statt aus Annahmen, die in das Tool von jemand anderem eingebacken sind. Markengerechte Ausgabe wird zum Standard, weil die Marke ein echter Input ist, ausgedrückt in einer Form, die die Maschine konsumieren kann.

Wo das Design-System-Modul hineinpasst

Ein Design-System ist ein Modul in einem größeren Bild. sSystm ist ein All-in-one-Agentur-Betriebssystem — CRM, Projekte, Abrechnung, Dokumente — bei dem du nur die Module einschaltest, die du brauchst. Das Design-System ist ein Premium-Modul für Agenturen, die mehrere Marken verwalten und jede einmal erfassen wollen, als Daten, und überall ohne Abdriften anwenden.

Wenn deine Marke derzeit in einem PDF, einem geteilten Laufwerk und dem kollektiven Gedächtnis dessen lebt, der am längsten dabei ist, ist der Umstieg auf Tokens der Umstieg vom Hoffen, dass Dinge konsistent bleiben, zum Wissen, dass sie es tun. Mach die Marke zu Daten, und Konsistenz hört auf, eine lästige Pflicht zu sein, und wird zum Standard.

Erkunde das Design-System-Modul, um zu sehen, wie eine Marke als Tokens, Regeln und Systeme pro Kunde erfasst wird — oder durchstöbere den vollen Modulkatalog, um zu sehen, wo es im weiteren Agentur-OS sitzt.