CubeSites Help
Brand and design

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.

Website editor

Heating and plumbing you can rely on

Get a quote
ContentDesign

Colour scheme

VioletCoralMintNight

Fonts

ModernEditorialWarmBold

Corners

SquareSubtleRoundedSoft

Surfaces and buttons

SolidOutlineSoftMain colour

Spacing between sections

CompactComfortableSpacious

Fine-tune colours

Main colourAccentBackground

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.

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

Website editor

Heating and plumbing you can rely on

Get a quote
ContentDesign

Colour scheme

VioletCoralMintNight

Fonts

ModernEditorialWarmBold

Corners

SquareSubtleRoundedSoft

Surfaces and buttons

SolidOutlineSoftMain colour

Spacing between sections

CompactComfortableSpacious

Fine-tune colours

Main colourAccentBackground

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.

Website editor

Heating and plumbing you can rely on

Get a quote
ContentDesign

Colour scheme

VioletCoralMintNight

Fonts

ModernEditorialWarmBold

Corners

SquareSubtleRoundedSoft

Surfaces and buttons

SolidOutlineSoftMain colour

Spacing between sections

CompactComfortableSpacious

Fine-tune colours

Main colourAccentBackground

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.

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.