Ein Designsystem ist keine Bibliothek, sondern eine Vereinbarung. Die lässt sich in dreißig Zeilen CSS aufschreiben.
Was ein Token ist
Ein Token ist ein benannter Wert: --space-4 statt 1rem, --color-text-muted statt #63697f. Der Gewinn ist nicht die Schreibweise, sondern dass der Name eine Absicht trägt. «Abgesetzter Fließtext» überlebt einen Farbwechsel, ein Hexwert nicht.
Eine Skala, keine Zufallswerte
Abstände sollten aus einer festen Reihe kommen, etwa 4, 8, 12, 16, 24, 32, 48, 64 Pixel. Sobald irgendwo 13px steht, ist die Reihe kaputt — und niemand weiß mehr, ob der Wert Absicht war oder ein Verrutschen.
Dasselbe gilt für Schriftgrößen. Fünf bis acht Stufen reichen für fast jeden Auftritt.
Zwei Modi kosten fast nichts
Wenn Farben ausschließlich über Tokens angesprochen werden, ist ein Dunkelmodus ein einziger zusätzlicher Block, der dieselben Namen mit anderen Werten belegt. Ohne Tokens ist er eine Suche durch die ganze Datei — und die findet nie alles.
Ein Hinweis, der Zeit spart: eine Eigenschaft darf sich nicht über var() auf sich selbst beziehen. CSS erkennt darin einen Kreis und verwirft den Wert vollständig, statt ihn zu berechnen.