Semantische und primitive Design-Tokens
Ein semantisches Token ist ein Design-Token, das nach seiner Aufgabe benannt ist und nicht nach seinem Wert - etwa --color-text-danger statt --color-red-600. Es verweist meist auf ein primitives Token, wodurch sich der zugrunde liegende Wert ändern lässt, ohne irgendetwas umzubenennen, das ihn verwendet.
Die zwei Ebenen
Die meisten ausgereiften Token-Systeme haben mindestens zwei Ebenen.
Primitive Tokens (auch Raw-, Global- oder Core-Tokens genannt) halten die tatsächlichen Werte. Sie werden beschreibend benannt:
--red-600: #DC2626;
--blue-500: #2563EB;
--space-4: 16px;Semantische Tokens halten Entscheidungen darüber, wo diese Werte eingesetzt werden. Sie werden nach ihrer Rolle benannt:
--color-text-danger: var(--red-600);
--color-action-primary: var(--blue-500);
--space-card-padding: var(--space-4);Komponenten referenzieren die semantische Ebene. Fast nichts sollte direkt auf ein Primitiv zugreifen.
Warum sich die Indirektion lohnt
Ein Rebranding hört auf, eine Neuschreibung zu sein. Ändere, worauf --color-action-primary zeigt, und alle Buttons folgen. Referenzierten Komponenten --blue-500, müsstest du jede einzelne anfassen - und diejenigen, die Blau aus einem ganz anderen Grund als "Aktion" nutzen, gingen dabei kaputt.
Themes werden überhaupt erst möglich. Dark Mode sind dieselben semantischen Namen, die auf andere Primitive zeigen. Ohne semantische Ebene gibt es nichts umzuhängen.
Der Code sagt, was er meint. --color-text-danger erklärt Lesenden, warum der Wert dort steht. --red-600 sagt ihnen nichts - und das wiegt am schwersten, wenn jemand entscheiden muss, ob eine Änderung ungefährlich ist.
Der übliche Fehler
Teams überspringen die semantische Ebene, weil sie am ersten Tag nach Bürokratie aussieht: Es gibt elf Farben, und alle wissen noch, wofür sie da sind.
Die Rechnung kommt beim ersten Rebranding, beim ersten Dark Mode oder beim ersten Accessibility-Durchgang - und bis dahin sind die Primitive an hunderten Stellen referenziert. Eine semantische Ebene nachzurüsten ist mechanische, aber zähe Arbeit, die niemand einplant.
Eine dritte Ebene
Größere Systeme ergänzen Tokens auf Komponentenebene: --button-primary-background zeigt auf --color-action-primary, das auf --blue-500 zeigt.
Das hilft, wenn eine Komponente wirklich abweichen muss, und kostet Indirektion, wenn nicht. Zwei Ebenen sind die richtige Voreinstellung; die dritte kommt dazu, wenn ein echter Fall auftritt, nicht vorsorglich.
Wo Flash DSM hier steht
Erzeugte Systeme bringen beide Ebenen bereits mit: primitive Skalen und semantische Rollen für Text, Hintergrund, Rahmen und Status, die darauf verweisen - in Hell und Dunkel.