Farben, Typografie und Komponenten zentral pflegen — einmal ändern, überall konsistent.
Ein Design-System lebt von einer einzigen Quelle der Wahrheit. Statt Farbwerte, Abstände und Schriftgrößen über Dutzende Dateien zu verstreuen, beschreibt man sie einmal als Tokens — benannte Werte, unabhängig vom konkreten Bauteil, das sie später verwendet.
Ein Token ist nichts Kompliziertes: --color-primary, --space-4, --font-display. Ein Name, ein Wert, eine Bedeutung. Der Trick liegt nicht in der Technik, sondern in der Disziplin, einen Wert nie wieder direkt in eine Komponente zu schreiben.
Wer eine Farbe direkt als #1e3a5f in zwanzig Komponenten schreibt, hat zwanzig Stellen zu ändern, sobald der Ton nicht mehr passt — und übersieht garantiert eine. Wer stattdessen var(--color-primary) schreibt, ändert den Wert an einer einzigen Stelle, und jede Oberfläche zieht automatisch nach.
Derselbe Gedanke gilt für Abstände, Rundungen, Schriftgrößen und Schatten. Je konsequenter man Rohwerte durch Tokens ersetzt, desto mehr wird aus „hier und da nachbessern“ ein einziger, überschaubarer Handgriff.
Bei Tracht Digital Solutions liegen alle Tokens in einem gemeinsamen Paket, das jede Oberfläche einbindet — die Landingpage, der Blog und die internen Panels. Die Marken-Tokens stehen zentral in einem @theme-Block; geteilte Komponenten und ihre Stile kommen aus demselben Paket.
Eine Farbe, eine Schrift oder ein Komponentenstil wird also genau einmal geändert: im geteilten Paket, mit einer neuen Version. Kein Kopieren in einzelne Projekte, kein Auseinanderdriften. Die Regel ist einfach — und sie einzuhalten spart auf Dauer mehr Zeit als jedes Werkzeug.
Der eigentliche Beweis für ein sauberes Token-System ist der Dark Mode. Wenn Farben über Tokens laufen, ist ein dunkles Theme kein zweiter Satz Komponenten, sondern nur ein zweiter Satz Werte für dieselben Namen.
Wichtig ist dabei eine Unterscheidung: Strukturelle Tokens dürfen im dunklen Theme kippen — was hell der Hintergrund war, wird dunkel der Vordergrund. Flächen, die in beiden Themes bewusst dunkel bleiben sollen, brauchen dagegen eigene, feste Tokens. Wer eine kippende Farbe als festen dunklen Hintergrund missbraucht, bekommt im Dark Mode ein invertiertes Ergebnis — der klassische Fehler, den ein System mit klar benannten Tokens von vornherein vermeidet.
Über den reinen Werten stehen die geteilten Komponenten: Buttons, Karten, Statusanzeigen, Ladeindikatoren. Auch sie leben einmal im gemeinsamen Paket und werden von allen Oberflächen konsumiert, nicht pro Projekt nachgebaut.
Das hält nicht nur das Aussehen konsistent, sondern auch das Verhalten: Ein Ladespinner sieht überall gleich aus und funktioniert überall gleich. Bessert man ihn an einer Stelle nach, profitieren alle Seiten — ohne dass irgendwo eine vergessene Kopie zurückbleibt.
Damit „einmal ändern, überall konsistent“ auch praktisch trägt, wird das Token-Paket versioniert wie jede andere Abhängigkeit. Eine Änderung bekommt eine neue Versionsnummer; die Oberflächen ziehen sie beim nächsten Build. So bleibt nachvollziehbar, welcher Stand wo läuft — und ein Update lässt sich gezielt einspielen, statt heimlich zu passieren.
Der Gewinn zeigt sich selten am ersten Tag, sondern beim zehnten Änderungswunsch. Eine neue Markenfarbe, eine angepasste Schrift, ein etwas ruhigerer Schatten: Was ohne System ein Nachmittag Suchen-und-Ersetzen wäre, ist mit Tokens eine kleine, sichere Änderung an einer Stelle.
Für ein wachsendes Digitalangebot ist das kein Luxus, sondern die Voraussetzung dafür, dass es über die Jahre konsistent und pflegbar bleibt — statt bei jedem neuen Projekt ein Stück weiter auseinanderzulaufen.