Colours, fonts and branding

Set your website's colour palette, typography, corner style and logo, plus what each plan allows.

Colour, typography and shape are set once for the whole website, in the sidebar with nothing selected. Every section follows them, so a website cannot end up with five different blues.

Colour presets

Under Colors there are curated palettes: Theme default, Ocean, Forest, Sunset, Plum and Slate. Applying one changes the whole website at once, and they are available on every plan.

Custom colours

Six colours can be set individually:

Primary (buttons & links)The colour of buttons and links.
AccentA supporting colour used for emphasis.
Page backgroundThe background behind the whole page.
Card backgroundThe background of cards and panels.
TextThe main text colour.
Muted textSecondary text: captions, supporting lines.

Each has a reset control that returns it to the design's own value, and the whole set can be reset at once.

Typography

Under Typography you choose the heading and body fonts, or apply one of 5 ready-made pairings.

Corner rounding and spacing

Corner rounding (Sharp, Soft or Round) and Spacing density (Compact, Balanced or Spacious) apply across the website. They are the fastest way to change how a website feels without touching a single colour.

The Logo controls sit in the sidebar. Every plan can use a text logo (your business name, set in your heading font). Its size can be Small, Medium or Large.

Icons

Sections that use icons draw from a catalogue of 287 icons, grouped by subject. Click an icon on the page to change it. Icons take their colour from your palette, so they never clash with the rest of the website.

Contrast is checked for you

Colour choices are checked against your text colours, and a combination that would make text hard to read is flagged before you publish. It is a warning rather than a block (you can publish anyway), but it is usually worth acting on.

Before you settle on a palette

  • Your primary colour is dark enough against your page background for button text to read clearly.
  • Your logo reads at Small on a phone, not only at Large on a desktop.
  • You have looked at one full page after changing a palette, not just the hero.
Colours, fonts and branding | Instantsite Docs