Themes with semantic tokens

The theme determines the look of your entire site: the colours, the typefaces and the rounding of buttons and cards. You set it once and every page adapts automatically — one change applies everywhere, from the header down to the last button.

How that works: named colours

All building blocks refer not to a fixed colour code but to a role: 'accent colour', 'background', 'text', 'border'. Change what the accent colour is in the theme, and all buttons, links and icons using that role recolour immediately. Your site can never end up half old and half new.

Its own face per site

If you manage multiple websites, each site has its own theme: its own colours, its own typefaces (including Google Fonts), light or dark. This site, for example, uses Inter for text, Space Grotesk for headings and an indigo accent colour — all adjustable with a single theme change.

Why not just use fixed colour codes?

Without this approach, a rebrand would mean tracking down and changing hundreds of places with a fixed colour code — error-prone and slow. Because every part refers to a role instead of a fixed value, one setting in the theme changes the whole site in seconds, with no outdated colour left behind anywhere.

Consistent across every part

This approach carries through to every detail: a hero, a call-to-action and an FAQ block all use the same theme tokens, so new pages automatically match the rest of the site too.

Example

These are this site's theme colours and theme button — change the theme and this example changes with it:

The prompt for this example

Give the site a purple-blue accent colour and make all buttons use that colour.