Zentrale Design-Variablen für Konsistenz über alle Plattformen.
Design Tokens halten gestalterische Grundentscheidungen wie Farben, Abstände, Schriftgrößen und Radien als benannte Variablen an einer einzigen Stelle fest. Statt eine Farbe an Dutzenden Orten hart zu hinterlegen, verweist alles auf denselben Token, sodass eine Änderung sich automatisch durchzieht. Ihre eigentliche Kraft entfalten sie als gemeinsame Quelle der Wahrheit zwischen Design und Code, oft über mehrere Plattformen hinweg. Genau deshalb entsteht gerade ein offenes Format, damit Werkzeuge Tokens verlustfrei austauschen können.
Mehr in der DokumentationWir definieren deine Marke einmal als Token-Satz und speisen daraus sowohl Figma als auch Tailwind, sodass Entwurf und Umsetzung garantiert dieselben Werte sprechen. Brauchst du einen Dark Mode oder mehrere Themes, tauschen wir nur die Token-Werte aus und der Rest folgt von selbst. Ein Rebrand wird damit zu einer Handvoll geänderter Variablen statt zu einer Suche quer durch die ganze Codebasis.
{
"color": {
"brand": { "$value": "#0a84ff", "$type": "color" },
"surface": { "$value": "{color.brand}", "$type": "color" }
}
}Gut zu wissen
Der Trick liegt in der Schichtung: rohe Werte als Basis und semantische Tokens darüber, etwa color-surface statt grey-100. So beschreibst du Bedeutung statt Aussehen, und ein Theme-Wechsel oder Rebrand bleibt eine Frage von Minuten.
Weitere Werkzeuge, mit denen wir im selben Bereich arbeiten.
Das musst du nicht entscheiden, das ist unser Job. Erzähl uns einfach von deinem Vorhaben.