Guide

Design Tokens, erklärt mit echten Dateien

Ein Design Token ist eine benannte Designentscheidung: eine Farbe, ein Abstand, eine Schriftgröße. Einmal gespeichert, überall genutzt, vom Designtool und vom Code.

Warum Tokens wichtig sind

Ohne Tokens steht das Blau deiner Buttons in der Designdatei, dann noch einmal im CSS, dann noch einmal in der App. Änderst du es einmal, musst du es überall suchen. Mit Tokens änderst du color.brand, und jede Stelle, die es nutzt, zieht mit.

So sieht eine Token-Datei aus

Die W3C Design Tokens Community Group definiert ein JSON-Format, in dem jedes Token einen $value und einen $type hat.

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

Dieselben Entscheidungen als CSS-Variablen, die der Browser nutzen kann:

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

So nutzt Kalka Tokens

  • Ein Ordner: Jedes Projekt hat einen Ordner design-system/ mit tokens.json im W3C-Format und tokens.css daneben.
  • Auf dem Canvas genutzt: Wählst du im Design-Panel eine Farbe oder einen Abstand, wählst du ein Token, und das CSS nutzt die Variable.
  • Mit Git versioniert: Eine Änderung deiner Markenfarbe ist ein Commit, den du reviewen kannst wie jede Codeänderung.

Kalka ist in Entwicklung und Open Source. Die Ordnerstruktur oben stammt aus unserer Produktspezifikation.