# Choose colours and fonts

The Theme panel: colour schemes, font pairs, corners and spacing for the whole website.

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.

Walkthrough: The Theme panel and what it controls (The Theme panel)

1. **Colour schemes**: Complete palettes with a main colour, an accent and backgrounds tuned to work together.
2. **Font pairs**: Eight tested pairings of a heading font and a body font, from Modern to Editorial.
3. **Surfaces and buttons**: Solid, outline or soft; main colour or accent. The style that every section borrows from.

1. Open Design and glance through the panel before changing anything.
2. Change the colour scheme first; it moves the most.
3. Then 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.

Walkthrough: Fine-tuning the palette, and the contrast read-out (The Theme panel)

1. **Start from a scheme**: A scheme is a whole set changed together, which is why it is the first thing to try.
2. **Then fine-tune**: Every token of the palette, from the main colour to the card surfaces, adjustable by hand.
3. **Watch the read-out**: If it says text contrast is getting low, the pair is wrong whatever the mood board says.

Warning: 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.

Walkthrough: Fonts, corners and spacing (The Theme panel)

1. **Fonts**: Pick a pair, or choose fonts one by one, including uploading your own for the heading, body or accent.
2. **Corners**: Square to Pill changes every card, field and button together, so the site keeps one voice.
3. **Spacing**: Compact, Comfortable or Spacious. Comfortable suits most sites; Spacious suits photography.

Note: 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.

## 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

- [Brand ideas](/help/brand-and-design/brand-ideas)
- [Change a section look](/help/editor/change-a-section-look)
---

CubeSites is a trading name of Cube Systems Limited, part of Crushed Ice Group. Registered in England and Wales, company number 17220899. Registered office: Unit 11, Olney Business Park, Osier Way, Olney, Buckinghamshire, MK46 5FP. ICO registration number ZC216972.

Contact: hello@cubesites.co.uk | 01234 672 617 | https://cubesites.co.uk/contact