Design-Token, im Tech-Kontext.
Design-Token sind benannte Werte für Farbe, Abstand und Typografie. Eine einzige Quelle, aus der Entwurfswerkzeug und Code dieselben Werte beziehen.
Ein Design-Token ist ein benannter Gestaltungswert, etwa eine Farbe, ein Abstand, ein Radius oder eine Schriftgröße, der einmal festgelegt und überall referenziert wird. Statt eines Farbwerts im Bauteil steht dort der Name des Tokens. Der Nutzen zeigt sich bei Änderungen: eine neue Markenfarbe oder eine zweite Fassung für dunkle Oberflächen wird an einer Stelle gepflegt statt in hundert Dateien. Umgesetzt wird das meist als CSS-Custom-Properties, bei Tailwind über die Theme-Konfiguration. Der Aufwand lohnt ab dem Punkt, an dem mehrere Seitentypen oder mehrere Personen an derselben Oberfläche arbeiten. Bei einer einzelnen Landing-Page ist es Überbau.
Beispiele aus dem Mittelstand
- Ein Markenwechsel tauscht drei Farbwerte in einer Datei, und die gesamte Website zieht nach.
- Helle und dunkle Fassung teilen sich dieselben Bauteile, weil nur die Werte hinter den Namen wechseln.
:root {
--farbe-akzent: 43 74% 52%;
--abstand-sektion: 6rem;
--radius-karte: 1rem;
}
:root[data-theme="dark"] {
--farbe-flaeche: 0 0% 7%;
}
.karte {
border-radius: var(--radius-karte);
padding: var(--abstand-sektion);
}Folge-Fragen
Ab welcher Projektgröße lohnen Token?
Sobald es mehrere Seitentypen oder mehrere beteiligte Personen gibt. Bei einer einzelnen Seite überwiegt der Aufwand.
Wie benenne ich Token sinnvoll?
Nach Funktion statt nach Aussehen. akzent-primaer bleibt gültig, gold-hell wird beim nächsten Markenwechsel falsch.
Wie kommen Token aus dem Entwurfswerkzeug in den Code?
Entweder per Export aus Figma in eine Token-Datei oder als gepflegte Einzelquelle im Repository, auf die beide Seiten schauen.
Haben Token einen Einfluss auf die Ladezeit?
Kaum direkt. Indirekt schon, weil ein konsistentes System weniger Sonderfälle und damit weniger CSS erzeugt.
Design-Token in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
UX, Struktur und Copy