Design Tokens

Was sind Design Tokens?

Ein Design Token (kurz: Token) besteht aus 2 Teilen: Name und Wert. Der Name eines Tokens folgt einem klaren und verständlichen Benennungsschema. Der Wert kann alles beinhalten, was zum Erstellen eines Designs notwendig ist: Eine Farbe in RGB, eine Schriftart, eine Animations-Geschwindigkeit oder einen anderen Token.

---

Vorteile

• Verringerter Wartungsaufwand: Tokens können aufeinander basieren und die Eigenschaften eines anderen Tokens erben. Dadurch wirken sich Änderungen an einem Token-Wert automatisch auf alle Stellen aus, an denen er verwendet oder referenziert wird. Das spart Zeit und reduziert Fehler.

• Verbesserte Zusammenarbeit: Design und Development nutzen mit Tokens eine gemeinsame Sprache. Dadurch lassen sich Designentscheidungen leicht verständlich ausdrücken und ebenso einfach im Code implementieren.

• Einheitliches Design: Farben, Schriften, Größen und mehr werden überall einheitlich verwendet.

• Wiederverwendbarkeit: Tokens lassen sich problemlos in mehreren Projekten und Frontends gleichzeitig verwenden.

---

Benennung von Tokens

Unsere Tokens sind leicht verständlich und nachvollziehbar benannt, um komplexe Informationen konsistent und selbsterklärend zu vermitteln.

Schema

Jeder Token-Name folgt einem dreistufigen Benennungsschema: Context, Common Unit und Clarification. Dieses Schema beginnt mit einer allgemeinen Einordnung und wird von Stufe zu Stufe immer detaillierter.

Token-Benennungsschema

Context

Der Context stellt den allgemeinsten Zusammenhang dar, auf den ein Token sich beziehen kann.

Common Unit

Die Common Unit ordnet den Token in eine spezifische Kategorie innerhalb des Context ein.

Clarification

Die Clarification ist die präziseste Ebene, die den Token klar definiert und abgrenzt.

Beispiele

hosting-blue-800

Der Token hosting-blue-800 definiert eine spezifische Color. Der Name der Farbe hosting-blue gibt den Context an. Die Zahl 800 ist die Clarification, die die Abstufung der Farbe definiert und auf den genauen Farbwert #0054F5 im Designsystem verweist.

primary-solid-background-color-default

Dieser Token definiert die primäre Hintergrundfarbe einer "Solid"-Variante. primary gibt als Context an, dass es sich um eine primäre Farbe handelt. Die Common Unit solid-background-color verdeutlicht, dass die Farbe als Hintergrundfarbe in der "Solid"-Variante verwendet wird. Die Clarification default gibt an, dass der Token für den Default-State verwendet wird.

alert-info-outline-border-color-default

Dieser Token definiert eine Designentscheidung für eine spezifische Component, in diesem Fall einen Alert. alert liefert den Context und stellt klar, dass der Token nur für diese Komponente verwendet wird. info-outline-border-color als Common Unit kategorisiert den Token weiter ein: Er wird für die Border-Color eines Alerts in der "Info"- und "Outline"-Variante verwendet. default gibt als Clarification an, dass der Token für den Default-State genutzt wird.

---

Token-Arten und Struktur

Im Benennungsschema haben wir bereits Tokens mit unterschiedlicher Komplexität betrachtet. In diesem Abschnitt erklären wir die Konzepte, die den verschiedenen Token-Arten und deren Struktur zugrunde liegen.

Global Token

Diese Tokens bilden die Grundlage des gesamten Designsystems. Sie definieren grundlegende Eigenschaften wie Farben, Schriftarten und Abstände, die überall im System verwendet werden können. Global Tokens sollten nur eingesetzt werden, wenn der Verwendung kein tieferes Konzept zugrunde liegt. Ein gutes Beispiel dafür sind Farben, die einen rein dekorativen Zweck erfüllen. Diese müssen nicht weiter definiert oder in eine Kategorie eingeordnet werden, da sie einen rein optischen Nutzen erfüllen und keiner tieferen Idee folgen.

Alias Token

Alias Tokens referenzieren andere Tokens und weisen ihnen eine spezifischere Bedeutung zu. Sie helfen dabei, allgemeine Werte in spezifischen Kontexten einzusetzen. Ein Alias Token konkretisiert z. B. bei einer Color, in welchem Zusammenhang (Primary, Accent, Danger, ...) sie genutzt werden soll. Sie beziehen sich immer auf einen Global Token und dürfen keine hard coded Werte besitzen.

Wir nutzen diese Ebene vor allem für die Definition von Tokens, die sich keiner bestimmten Variante (Solid, Soft, Outlined, Plain) zuordnen lassen, aber in eine gemeinsame Kategorie zusammengefasst werden können.

Alias Token 2

Tokens dieser Ebene besitzen einen noch höheren Detailgrad. Sie werden oft einer spezifischen Variante zugeordnet und fügen weitere Details hinzu, die über den ersten Alias Token hinausgehen. Dabei achten wir auch darauf, die Token so zu definieren, dass sie innerhalb der Variante gut harmonieren. So legen wir z. B. bei einer bestimmten Variante die Farben so fest, dass die Content-Farbe optisch zur Hintergrundfarbe passt und barrierefrei lesbar ist.

Ein Alias Token 2 darf keine hard coded Werte besitzen, sich aber sowohl auf Alias als auch Global Token beziehen.

Component Specific Token

Diese Tokens sind speziell auf einzelne Komponenten zugeschnitten. Sie vermitteln einzigartige Designentscheidungen, die ausschließlich für eine bestimmte Component relevant sind. Sie enthalten den höchsten Detailgrad der Token-Struktur und sind somit das Gegenteil eines Global Tokens.