Thema's met semantic tokens

Het thema bepaalt het uiterlijk van je héle site: de kleuren, de lettertypes en de afrondingen van knoppen en kaarten. Je stelt het één keer in en elke pagina past zich automatisch aan — één wijziging werkt overal door, van de header tot de laatste knop.

Hoe dat kan: benoemde kleuren

Alle bouwstenen verwijzen niet naar een vaste kleurcode, maar naar een ról: 'accentkleur', 'achtergrond', 'tekst', 'rand'. Verander je in het thema wat de accentkleur is, dan kleuren alle knoppen, links en iconen die die rol gebruiken direct mee. Zo kan je site nooit half oud en half nieuw kleuren.

Per site een eigen gezicht

Beheer je meerdere websites, dan heeft elke site z'n eigen thema: eigen kleuren, eigen lettertypes (inclusief Google Fonts), licht of donker. Deze site gebruikt bijvoorbeeld Inter voor de tekst, Space Grotesk voor de koppen en een indigo accentkleur — allemaal met één themawijziging aan te passen.

Waarom niet gewoon losse kleurcodes?

Zonder deze aanpak zou een huisstijlwijziging betekenen dat je honderden plekken met een vaste kleurcode moet opsporen en aanpassen — foutgevoelig en tijdrovend. Doordat elk onderdeel naar een rol verwijst in plaats van naar een vaste waarde, verandert één instelling in het thema de hele site in seconden, zonder dat er ergens een verouderde kleur achterblijft.

Consistent over elk onderdeel heen

Deze aanpak werkt door tot in elk detail: een hero, een call-to-action en een FAQ-blok gebruiken allemaal dezelfde thema-tokens, dus ook nieuwe pagina's sluiten automatisch aan bij de rest van de site.

Voorbeeld

Dit zijn de themakleuren en de themaknop van deze site — verander het thema en dit voorbeeld verandert mee:

De prompt voor dit voorbeeld

Geef de site een paarsblauwe accentkleur en laat alle knoppen die kleur gebruiken.