Waarom je dit wilt
Design tokens klinken als jargon, maar in de praktijk zijn ze vooral saai. Dat is precies waarom ze werken: één plek waar je kleuren, spacing en typografie vastlegt, en de rest van je codebase pikt het vanzelf op.
In deze basis-set staan alle tokens in :root bovenaan main.css. Wil je per project een andere primaire kleur? Pas de --color-primary aan, en de knop, hero, kaart-hover en accordion volgen automatisch.
Structuur van de tokens
We groeperen tokens in vier lagen: primitives (ruwe waarden), semantics (wat ze betekenen), components (per blok) en utilities (overrides). Die scheiding maakt het makkelijk om een thema te wisselen zonder door honderden bestanden te zoeken.
Een concreet voorbeeld: --color-primary is een semantic token. De waarde ervan (#3b5bdb in de basis-set) komt uit een primitive. Wil je voor een klant oranje? Je raakt alleen de primitive aan.
