School website handbook

14. Branding

The name, the logo and the colours the whole site is built from. Most schools set this once and never touch it again.

The Branding screen: the school's name, the logo with a Change the logo button, and three colour rows — Main, Highlight and Accent — each with a colour picker and a hex code.
One colour is enough. You may add up to three.

The name

Shown beside the logo, in the browser tab and in search results.

Press Change the logo and choose a file. A PNG with a see-through background works best — a logo with a white box around it will show that box on every page.

The colours

ColourWhere it is used
MainThe big bands, the page title band and the buttons.
HighlightThe menu item you are on, and what happens when you hover.
AccentThe menu bar, table headings and the values band.

Anything you leave out is worked out from the first colour — and so is the colour of the words on top, so nothing ever ends up unreadable.

The How it will look panel: three colour swatches with their codes and contrast ratios, above a small mock-up of a menu bar, a page title band and a button.
"How it will look" shows the real thing before you publish.

If a colour you pick would make the words hard to read, the screen tells you and explains what it will do instead. Trust it.