Design-Token
Mit Design-Token vertraut werden
Design-Token geben bestimmten Werten einen Namen. Diese Werte beziehen sich zum Beispiel auf Farben oder Größen. Sie beschreiben, wie die jeweiligen Eigenschaften eingesetzt werden sollen, ohne dass Pixel und Hex-Codes fest eingegeben werden müssen. Das Token-System ermöglicht es, eine gemeinsame und konsistente Sprache zwischen Design und Entwicklung aufzubauen. Dadurch wird die Zusammenarbeit von Designer:innen und Entwickler:innen effizienter.
Token-Systematik für KERN
Token-Ebenen
Die Token-Systematik basiert auf einem mehrstufigen Prinzip: vom generischen Basiswert bis hin zum konkreten Anwendungsfall. Jeder Token entsteht entlang einer strukturierten Ableitungskette, die von allgemeinen Werten immer konkreter wird.
Die Systematik durchläuft dabei typischerweise drei Ebenen:
Grundwerte
Auf der untersten Ebene stehen die Basiswerte: reine Zahlen, Maßeinheiten (z. B. 24px) oder Farbdaten (z. B. LCH-Werte für Lightness, Chroma und Hue). Sie bilden das Rohmaterial des Designsystems. Die Gründe für die Trennung der Farben nach L, C und H werden hier erläutert.
Core Token
Eine Abstraktionsstufe darüber stehen die Core Token – systemweit gültige, oft stilprägende Konstanten, wie z. B. --kern-color-turquoise-050-lightness. Sie leiten sich aus den Grundwerten ab und dienen als Ausgangspunkt für die semantische Nutzung.
Semantische Token
Die oberste Ebene umfasst die semantischen Token: Sie sind die Token, die für die Erstellung von Layouts und Komponenten verwendet werden und geben aufgrund ihrer klaren Benennung Aufschluss darüber, in welchem Kontext sie verwendet werden. So wird --kern-color-feedback-success-background für die Hintergrundfarbe positiver Rückmeldungen genutzt. Damit schlagen sie die Brücke zwischen Design und Funktion.
Auch wenn die genaue Ausprägung je nach Kategorie variiert (z. B. Farben vs. Größen), bleibt das Prinzip der zunehmenden Semantik von unten nach oben erhalten. Es sorgt für Klarheit, Wartbarkeit und Skalierbarkeit im Design-System – sowohl im Code als auch in der Kommunikation zwischen Design und Entwicklung.
Benennungs-Systematik der semantischen Token
Die Benennung der Design-Token folgt dem Prinzip: „so kurz wie möglich, so lang wie nötig.“ Ziel ist es, eine klare semantische Lesbarkeit und maximale Wiederverwendbarkeit zu erreichen, ohne die Token unnötig zu verkomplizieren.
Token setzen sich aus mehreren, durch Bindestriche getrennten Segmenten zusammen. Jedes Segment konkretisiert den Nutzungsbereich. So geht es vom Groben ins Feine. Ein typisches Schema sieht so aus:
--systempräfix-typ-kontext-variante-eigenschaft-modifikator
1. Systempräfix:
Definiert den Namensraum des zugehörigen Design-Systems – hier immer: kern.
2. Typ:
Klassifiziert die generelle Kategorie des Token. KERN nutzt vier Typen – color, metric, typography, component.
3. Kontext:
Gibt den nächstgrößeren Bereich an, in dem der Token verwendet wird – z. B. space, layout, feedback, font-size, ...
4. Variante (optional):
Konkretisiert den Kontext bei Bedarf zusätzlich – z. B. lässt sich im Kontext feedback das Feedback mit success, error und info in positives, negatives und neutrales Feedback konkretisieren. Varianten werden nur bei Bedarf benannt und müssen nicht zwangsläufig für die Benamung eines Tokens gesetzt werden.
5. Eigenschaft (optional):
Lässt sich am leichtesten mit dem Begriff „Property" in der Entwicklung gleichsetzen – z. B. background, width, space. Wie Varianten müssen auch Eigenschaften nicht zwangsläufig im Tokennamen aufgenommen werden. Sie werden dann relevant, wenn die Verwendung des Tokens sonst nicht zweifelsfrei klar ist.
6. Modifikator (optional):
Beschreibt als spezifischste Ebene in der Regel eine konkrete Größe – z. B. small, x-large, oder einen bestimmten Zustand – z. B. default, hover. Auch der Modifikator wird nur bei Bedarf benannt.
Manche Token enthalten nicht alle Segmente. Wichtig ist aber die Reihenfolge.
Beispiele
Design-Token werden in den folgenden Bereichen verwendet
Bei der Anwendung der Token bietet wir in folgenden Bereichen weitere Unterstützung: