Design Tokens

Design Tokens übersetzen grundlegende Designentscheidungen wie Farben, Abstände und mehr in eine einheitliche Sprache. Entwickler und Designer nutzen diese Sprache, um ein konsistentes, skalierbares und wiederverwendbares Design in der gesamten Benutzeroberfläche sicherzustellen.

---

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

color--mittwald-blue--1000

Der Token color--mittwald-blue--1000 definiert eine spezifische Color‍. color gibt den Context an. Der Name der Farbe mittwald-blue ist die Common Unit. Die Zahl 1000 ist die Clarification, die die Abstufung der Farbe definiert und auf den genauen Farbwert #2D23E8 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-border-color

Dieser Token definiert eine Designentscheidung für eine spezifische Komponente, in diesem Fall einen Alert‍. alert liefert den Context und stellt klar, dass der Token nur für diese Komponente verwendet wird. info-border-color als Common Unit kategorisiert den Token weiter ein: Er wird für die Border-Color eines Alerts in der „Info“-Variante verwendet. Eine Clarification braucht dieser Token nicht, weil die Border-Color eines Alerts in allen States gleich bleibt.

---

Token-Ebenen

Tokens bauen in Ebenen aufeinander auf. Jede Ebene hat eine Aufgabe und darf nur bestimmte Ebenen referenzieren. Für Farben gibt es vier Ebenen:

Ebene	Aufgabe	Light und Dark	Darf referenzieren
Brand	Palette der Marke mittwald	ein Wert für beide	keine Tokens, nur feste Werte
Semantic	Farben mit einer Bedeutung	ein Wert je Theme	Brand; feste Werte nur in Ausnahmen
Variant	Farbpaare je Variante	folgt Semantic	Semantic
Component	Entscheidungen einer Komponente	folgt Semantic	Variant oder Semantic, nie Brand

Der Build der Design Tokens (build-tokens.js) setzt diese Regeln durch. Er bricht ab, sobald ein Token eine Ebene referenziert, die ihm nicht erlaubt ist.

Brand Token

Brand Tokens enthalten die Palette der Marke mittwald, wie das Brand-Team sie übergibt. Sie bestehen nur aus festen Werten, tragen keine Bedeutung und haben in Light und Dark denselben Wert. Komponenten nutzen sie nicht direkt, sondern über Semantic Tokens. Das gilt auch für Farben, die einen rein dekorativen Zweck erfüllen.

Token-Name	Wert
color--mittwald-blue--1000	#2D23E8
color--mittwald-blue--400	#9F9EEF

Semantic Token

Semantic Tokens geben einer Farbe eine Bedeutung: Fläche, Inhalt, Rahmen, Status oder Dekoration. Sie sind die einzige Ebene, die zwischen Light und Dark unterscheidet. Ein Semantic Token referenziert je Theme einen Brand Token, oft eine andere Abstufung. Feste Werte besitzen nur Farben, die Flow selbst festlegt, z. B. die Categorical Colors‍. Welche Rollen es gibt, zeigt die Seite Color‍.

Token-Name	Light	Dark
primary--color--strong--100	color--mittwald-blue--1000	color--mittwald-blue--400
content--color--inverse	color--mittwald-neutral--100	color--mittwald-neutral--1700

Variant Token

Variant Tokens kombinieren Semantic Tokens zu Paaren für eine Variante (Solid, Soft, Plain, Outline) und einen Status oder eine Farbe. Dabei achten wir darauf, die Tokens so zu definieren, dass sie innerhalb der Variante gut harmonieren. So legen wir z. B. die Farben so fest, dass die Content-Farbe optisch zur Hintergrundfarbe passt und barrierefrei lesbar ist.

Variant Tokens referenzieren nur Semantic Tokens. Einzelne Farben wie Text, Rahmen oder Fokus brauchen kein Variant Token; Komponenten nutzen dafür direkt den Semantic Token.

Token-Name	Wert
primary-solid-background-color--default	primary--color--strong--100
primary-solid-content-color	content--color--inverse

Component Token

Diese Tokens sind speziell auf einzelne Komponenten zugeschnitten. Sie vermitteln einzigartige Designentscheidungen, die ausschließlich für eine bestimmte Komponente relevant sind. Sie enthalten den höchsten Detailgrad der Token-Struktur und referenzieren Variant oder Semantic Tokens, nie Brand Tokens. Die Seite jeder Komponente listet ihre Tokens unter „Design Tokens“.

Token-Name	Wert
button--primary-solid-background-color--default	primary-solid-background-color--default
alert--info-border-color	info-outline-border-color

Weitere Tokens

Größen, Schriften, Rahmen und andere Tokens haben kein Theme. Sie bestehen aus Basiswerten wie size-px--s und Tokens, die diese Basiswerte referenzieren. Komponenten können beide nutzen.

Token-Name	Wert
size-px--s	8px
border-width--400	size-px--s