Das System hat drei Stufen: Grundwerte (eine Farbe, eine Zahl), Rollen („Text“, „Rahmen“, „Hintergrund“) und Klassen (was du vergibst). Geaendert wird immer auf der untersten Stufe.
Die drei Stufen am Beispiel
| Stufe | Beispiel | Wer aendert das |
|---|---|---|
| 1. Grundwert | --neutral-900 = #362f2e |
ich, sehr selten |
| 2. Rolle | --text-primary zeigt auf --neutral-800 |
ich, bei Bedarf |
| 3. Klasse | t-text--m nutzt --text-primary |
niemand — du vergibst sie nur |
Warum das so gebaut ist
Es gibt eine Grundfarbe für alle Grautoene: --neutral-900. Alle anderen Stufen werden daraus berechnet — --neutral-500 ist „50 % dieser Farbe, gemischt mit Weiß“.
Der Nutzen zeigt sich beim Ändern: Wird aus dem warmen Braunton ein kühles Grau, ändert sich ein Wert — und die gesamte Grauskala zieht mit, ohne dass ein Verhältnis kippt. Neun einzeln gepflegte Grautoene würden dabei auseinanderlaufen.
Was die Stufe 2 leistet
Die Rollen-Ebene beantwortet die Frage „wofür ist diese Farbe da?“. Statt „nimm neutral-800“ heißt es „nimm die Farbe für Haupttext“.
Das klingt nach Umweg, ist aber der Grund, warum Anpassungen klein bleiben: Soll Haupttext künftig dunkler sein, zeigt --text-primary eben auf --neutral-900. Kein Suchen in Klassen, kein Risiko, eine Stelle zu vergessen.
Was das für dich bedeutet
Du arbeitest ausschließlich auf Stufe 3 — du vergibst Klassen. Die beiden unteren Stufen sind der Grund, warum das reicht: Eine Klasse trägt bereits die Entscheidung, welche Farbe, welche Größe und welcher Abstand richtig sind.
Umgekehrt gilt: Ein Wert, den du in die lokale Klasse schreibst, hängt an keiner der drei Stufen. Er ist die einzige Stelle, die bei einer Systemänderung nicht mitzieht — und weil er in der Rangfolge über allem steht, fällt das erst auf, wenn die Änderung schon durch ist.
--koi-500 oder --amber-500. Diese Namen beschreiben die Farbe, nicht den Zweck. Verwende sie nie direkt — nimm die Rolle (--border-interactive) oder besser gleich die Klasse.