2 min read
Themes with semantic tokens
Set your site's colours and typefaces once — every page, button and card adapts automatically.
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 rôle: 'accent colour', 'background', 'text', 'border'. Change what the accent colour is in the theme, and all buttons, links and icons using that rôle 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.
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.