Brand and design
Choose colours and fonts
The Theme panel: colour schemes, font pairs, corners and spacing for the whole website.
- 3 minute read
- 3 interactive walkthroughs
- For everyone setting up a site
One theme for the whole website#
The Theme panel holds the decisions that make a site look like itself: a colour scheme, a font pairing, the shape of corners, the style of buttons and the spacing between sections. Every section takes its look from these, which is what keeps a page coherent without policing every block.
Open it from Design on the Add rail. Changes apply across the whole website at once, and preview immediately without publishing.
Heating and plumbing you can rely on
Get a quoteColour scheme
Fonts
Corners
SquareSubtleRoundedSoftSurfaces and buttons
SolidOutlineSoftMain colourSpacing between sections
CompactComfortableSpaciousFine-tune colours
Text contrast 4.5:1 (easy to read)
Step 1 of 3
Colour schemes
Complete palettes with a main colour, an accent and backgrounds tuned to work together.
Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.
- 1Open Design and glance through the panel before changing anything.
- 2Change the colour scheme first; it moves the most.
- 3Then fonts, then corners and spacing.
Colour schemes and fine-tuning#
The scheme cards are complete palettes, each with a main colour, an accent and backgrounds tuned to work together. Choosing one reassigns every section that follows the theme; sections given a specific tone keep that tone until you change it.
Fine-tune colours opens every token of the palette, from the main colour to the headers and cards. A contrast read-out sits under the text controls: if it says the text is getting hard to read, the pair is wrong, whatever the palette says.
Heating and plumbing you can rely on
Get a quoteColour scheme
Fonts
Corners
SquareSubtleRoundedSoftSurfaces and buttons
SolidOutlineSoftMain colourSpacing between sections
CompactComfortableSpaciousFine-tune colours
Text contrast 4.5:1 (easy to read)
Step 1 of 3
Start from a scheme
A scheme is a whole set changed together, which is why it is the first thing to try.
Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.
Before you continue: Keep the splashes for decoration. The read-out exists because a colour that looks dramatic on one screen is unreadable on another.
Fonts, corners and spacing#
The font pairs are eight tested combinations of a heading font and a body font, from Modern to Editorial. Choosing fonts one by one is also possible, including uploading your own files, with heading weight and size for when the default is not the size the brand needs.
Corners run from Square to Pill and change every card, field and button together. Spacing between sections decides whether the site reads as Compact, Comfortable or Spacious; Comfortable is right for most sites, Compact for menus and price lists, Spacious for photography.
Heating and plumbing you can rely on
Get a quoteColour scheme
Fonts
Corners
SquareSubtleRoundedSoftSurfaces and buttons
SolidOutlineSoftMain colourSpacing between sections
CompactComfortableSpaciousFine-tune colours
Text contrast 4.5:1 (easy to read)
Step 1 of 3
Fonts
Pick a pair, or choose fonts one by one, including uploading your own for the heading, body or accent.
Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.
Good to know: The whole theme can be changed later without touching content, so it is safe to live with a choice for a week before deciding it is wrong.
Common questions
Can one page look different from the rest?
A section can use a tone from the palette, but the palette and fonts belong to the website. Maintaining one theme per site is deliberate.
Can I upload my brand fonts?
Yes, in the Choose fonts one by one view, for the heading, body or accent font. Check the licence covers web use before uploading.
Related guides
Something here out of date, or a step that did not match what you see? Tell us and we will correct the guide. Never send a password or an API token.