Webontwikkeling

Semantische theme-tokens: één plek om je hele huisstijl te sturen

2 juli 2026

Met semantische theme-tokens leg je kleuren, maten en radii één keer vast en gebruik je ze overal via een betekenisvolle naam. Zo pas je je hele huisstijl centraal aan.

Semantische theme-tokens: één plek om je hele huisstijl te sturen

Een consistente huisstijl over tientallen pagina's houd je niet vol door overal losse waarden in te typen. Semantische theme-tokens lossen dat op: je legt een waarde één keer vast onder een betekenisvolle naam, en gebruikt die naam overal.

Wat is een token?

Een token is een benoemde ontwerpwaarde — een kleur, een maat, een hoekafronding. In plaats van #38bdf8 of 64rem te herhalen, verwijs je naar accent of contentWidth. De waarde staat op één centrale plek in het thema.

Waarom “semantisch”?

Een semantische naam beschrijft de rol, niet de waarde. accent zegt “dit is de accentkleur”, niet “dit is blauw”. Wil je later een andere accentkleur? Je wijzigt één token en de hele site verandert mee — zonder één pagina aan te raken.

Voordelen op een rij

  • Consistentie — overal exact dezelfde waarden.
  • Onderhoud — één wijziging werkt overal door.
  • Leesbaarheid — de code vertelt wat iets betekent.

In de praktijk

Op deze site staat de contentbreedte in één token, contentWidth. Alle pagina's verwijzen ernaar, dus één aanpassing verzet de breedte overal tegelijk — precies waar tokens voor bedoeld zijn.

Veelgestelde vragen


© 2026 Ster Software BV · KvK 75474913