Themes

The theme determines the look of your entire site. Below are the parts you configure — each with the prompt underneath.

Colours

Give the site a purple accent colour.

Typeface

Use an elegant serif typeface for the headings.

Buttons

Make the buttons rounder and in the accent colour.

Light or dark

Switch the site to a dark style.

Why consistency matters more than any single choice

Individually, an accent colour or a typeface choice is a minor decision. Together, applied consistently across every page, they are what makes a site feel professionally designed instead of assembled piece by piece.

A common use case: a rebrand. Change the accent colour and typeface once in the theme, and every button, heading and component across the site updates with it — no need to hunt down every place a colour was used.

If you run more than one website, each can have its own theme, so a shared brand can still look distinct per site or location.

Practical tip: pick a dark or light mode early. Retrofitting dark mode onto a site designed only for light backgrounds usually takes more work than starting with both in mind.

Choosing tokens instead of one-off colours

A theme built from a small set of named tokens — an accent colour, a background, a text colour — is far easier to adjust later than one where colours were picked individually on each page. If a rebrand ever changes your accent colour, a token-based theme updates everywhere at once; a page built with one-off colour choices needs every instance found and changed by hand.

The same applies to typography. Picking one display typeface for headings and one body typeface for everything else, and sticking to that pairing everywhere, reads as more deliberate than mixing fonts page by page based on whatever felt right at the time. Icons should follow the same token, too — see the icon block for how icon colour ties into the same accent token as buttons and links, rather than being set individually per icon.

Themes across different kinds of brands

A creative studio or agency can lean into a bolder, more distinctive palette and typography pairing, since standing out is often the point. A professional services firm — legal, financial, medical — usually benefits from a more restrained palette, where trust and clarity matter more than visual excitement. A consumer product brand often sits in between, distinctive enough to be memorable but still easy to read and navigate.

Whichever direction fits, consistency matters more than the specific choice — a slightly conservative palette applied consistently reads as more professional than a bold one applied inconsistently.

Common mistakes with theming

The most common mistake is choosing an accent colour with too little contrast against the background, which quietly hurts readability and accessibility even when it looks fine to the person who picked it. Check that body text and buttons remain clearly legible, not just visually appealing in isolation.

The second is designing only for light mode and treating dark mode as an afterthought, if it's used at all. If both matter to your audience, verify contrast and legibility in both from the start, rather than retrofitting one after the other is already built out across every page. A theme's button styling carries through automatically to a site's forms as well, so a consistent accent colour makes submit buttons feel like part of the same system rather than a separate element bolted on.

For the technical detail of how colour and type choices are stored and applied site-wide, see themes with tokens in the knowledge base.