Colours

Open the styling editor

1. Go to Site content → Page editor.
2. Select the Site Styling & Colors tab.
3. Make your changes. A preview of your site sits alongside, so you can see the effect as you go.
4. Select Save Styling when you’re happy.

Core palette

Three colours in the Core Theme Palette card anchor your whole site:

Colour	What it drives
Foreground color	Body text, headings, secondary text and other high-contrast elements
Background color	The page background across your public site
Accent color	Buttons, links, the active menu item, hover states and the footer band

Almost every other colour on your site follows one of these three unless you change it. For most people, setting just these three is enough.

Contrast check

Under the palette, the Live Contrast & Readability Preview shows a sample heading, text, link and button in your colours. It also shows a Text Contrast and Accent Contrast ratio, and tells you whether they’re easy enough to read.

Tip

If the contrast check warns you, try a darker foreground or accent on a light background (or the other way round). Readable text helps every visitor, especially on phones outdoors.

Contextual overrides

Below the palette, Contextual Overrides let you fine-tune colours for specific parts of your site. Use the buttons at the top to expand or collapse all the sections at once.

Section	What you can change
Text & Links	Body text, secondary text (dates, subheadings) and link colours
Navigation Bar	Menu bar background and links, active link, the mobile menu and its icon, bar height and padding
Buttons & CTAs	Main call-to-action buttons, the footer band (Primary accent color), hover colours, footer contact buttons and secondary buttons
Accordions & Cards	Expandable sections’ background, text and hover colours
Booking Widget	Colours for selected and unselected days, time slots and location cards
Form Fields	Background, text, placeholder and border of form boxes on contact, booking and event enquiry forms
Client Portal & Login	The login pop-up’s backdrop, card, text, inputs and buttons
Markdown Tables	Table header, alternate rows and borders

The Booking Widget and Client Portal & Login sections have Preview Booking Page and Preview Login Page buttons, so you can check those screens in the preview pane.

How inheritance works

Each override shows which colour it follows, such as “Inherited from Accent”. As long as you leave it alone, it changes automatically when you change the colour it tracks.

Once you pick your own colour, it stops following. To make it follow again, select the re-inherit button next to it.

Note

The Primary accent color is the background of your footer band, which holds the contact section. If you change it, check the Footer CTA button color and Form field background still stand out against it.