Module 4 · 4.2

English ▾

Branding: logo, colours, fonts and menu

Module 4: Pages, look and features · Reading time: 8 minutes

Learning objective: After this lesson you can set up your name and logo, favicon, style, menu design, colours, fonts, dark mode and motion in the Branding panel, and you can check that the text on your site is easy to read.

Key concepts: branding, style (look), logo, logo mark, wordmark, favicon, menu bar, main colour, contrast, contrast ratio, WCAG, web licence, dark mode, motion

Why branding is more than looking nice

Branding is the fixed combination of logo, colours and fonts that people recognise you by. On a website it makes you recognisable (the same colours on your van, your quotes and your site), and it has to stay readable: light grey text on white looks calm, but many visitors struggle to read it, especially on a phone in the sun.

Everything in the Branding panel is free and shows up straight away in the preview. Only when you click Save does it become a new version (lesson 3.5). Want to go back? Click Revert or restore an older version.

The House style panel with style, colours, fonts and the menu — Everything in House style shows up straight away in the preview and costs no edits.

The panel has these blocks: Style, Colours, Fonts, Menu bar, Name and logo, Images, Shape and spacing, Type and sizes, Dark mode and Motion.

Name, logo and favicon

Name and logo holds the name of your site as it appears in the header and footer. Below it is the logo:

Upload your own logo: PNG with a transparent background, SVG, JPG or WebP, up to 2 MB. A landscape logo works best in a menu bar.
If you don't have a logo, the builder has made a wordmark: your name in your own font and colours. It adjusts automatically when you change those.
Let AI design a logo: briefly describe your business and the feel you want ("painting company in a village, traditional craft and reliable") and click Design three logos. You get three logo marks (a symbol without text) in your colours, with your name next to them in your font. Together that costs 1 edit. Pick one with Use, or write what could be better ("the first one, but rounder") and click Design three new logos; that is another round of 1 edit.
Display in menu and footer: Logo and name, Logo only or Name only, and the Size (Small, Normal, Large).

The builder warns you if a logo has thin lines or little contrast with your menu bar: shown small in the bar, it may then disappear.

Check an AI logo yourself: does it look too much like another company's logo?

The favicon is the little icon in the browser tab and next to bookmarks. Choose Automatic: first letter in your colours, Your logo or Own file (square, PNG, SVG or ICO, up to 512 KB).

Style and menu bar

A style (also called look in the builder) sets fonts, shapes, buttons, cards, menu and decoration in one click. There are twelve, such as Fresh, Warm, Business, Nature, Atelier and Night. Your own colours stay when you switch style; if you also want the style's colours, click Also use the colours of this style. The Night style is always dark.

Under Menu bar you choose the shape of the bar at the top of every page, from fifteen designs: full width, centred, split, two rows, colour bar, outlined, pill, with top bar, transparent, minimal, floating, categories, segment, full screen and side menu. The content of the menu (lesson 4.1) stays the same. A few points to watch, taken from the explanations in the builder itself:

Transparent only looks good if every page has a dark hero or a photo hero.
Minimal shows only your name and one button; the page links then sit in the footer.
With top bar puts your phone number and opening hours in a narrow bar above it. Is that phone number correct?

Under Colour of the menu bar you choose Automatic (follows the style), White, Light grey, Dark or Accent colour. For a different colour, ask in the chat.

Colours and contrast

Under Colours you set the main colour (buttons, accents), a second colour for gradients, and the background (white, cream, cool, grey or a tint of your colour, or your own choice). With Buttons with a colour gradient, all main buttons get a gradient from one colour to the other.

This is where contrast comes in: the difference in brightness between text and background. We express it as a contrast ratio, from 1:1 (no difference) to 21:1 (black on white). The international guideline for accessible websites, WCAG from the W3C, asks at level AA for at least 4.5:1 for normal text and 3:1 for large text (roughly 18 point, or 14 point bold). Buttons and other controls must reach at least 3:1 against their surroundings.

The builder keeps an eye on this for you. If you pick a colour that text doesn't read well on, it adjusts it and tells you what changed, for example: "The text colour ... has become ..., because otherwise text doesn't read well on it." If you want to keep exactly your own colours, turn on Keep exactly these colours: your colours stay, and the text on them automatically gets a readable colour. Even in sections the AI creates with its own layout, the builder corrects text colours that fall below 4.5:1 (3:1 for large text).

What the builder does not check: text inside a photo or in your logo, and a heading over a busy photo. Look at those yourself, on a phone. Unsure about a colour pair? Enter the two colour codes in a contrast checker (see Further reading).

Pitfall: a brand colour from your printer or your van (bright yellow, for example) is rarely suitable as a text colour. Use it as an accent or a block of colour, and keep the text dark.

Fonts and your own font

Under Fonts you choose one font for the Headings and one for the Body text. The fonts are stored as files on your own site; no connection is made to someone else's font service. Under Type and sizes you use sliders to set, for the whole site: line spacing and letter spacing of text and headings, characters per line, content width and heading weight. Like the style resets a slider. Under Text size you choose Normal, Large or Extra large; you can also do that in the chat ("make the text bigger").

You can also use your own font: upload it under Fonts or with the paperclip in the chat, as .woff2, .woff, .ttf or .otf, up to 2 MB per file (several weights are allowed). Then choose what it's for: headings, text or both. It costs nothing. A font from a service such as Adobe Fonts can't be used.

Important: only upload a font you have a web licence for. A font is software with a licence. A licence for use on your computer (to create print materials) by no means always allows you to put the file on a website, where every visitor downloads it. Check the licence terms to see whether web use is allowed. Fonts under the SIL Open Font License may be embedded and distributed.

Dark mode and motion

Under Dark mode you choose Off (always light), Always dark or Like the device. With the last option, a visitor whose phone or computer is set to dark sees a dark version of your own colours. You can choose the background, text and main colour in dark mode yourself. There is no button for visitors to switch themselves. The preview follows your device: set your phone or computer to dark to see the dark version, and check your logo too while you're at it.

Under Motion you choose On, Calm or Off for the whole site, and an exception per page if needed. You also choose the Mouse effect on a computer (none, magnet or spotlight) here. In the preview everything stands still; with Play animation you see it once. If a visitor has set reduced motion on their device, everything stays still. Too much motion is distracting; on a page with a lot of text, Calm or Off is often better.

In the builder: how to do it

Open Branding, block Name and logo. Click Upload your own logo or Let AI design a logo.
Under Favicon, choose your logo or the automatic first letter.
Try two or three styles under Style; check Mobile too.
Under Menu bar, choose a design and a colour.
Set your main colour under Colours. Read the builder's messages.
Check what you want under Dark mode and Motion.
Click Save and put your site online again.

Summary

The Branding panel is free; Save creates a new version.
An AI logo costs 1 edit for three proposals; the builder makes the favicon itself, or you upload one.
Twelve styles and fifteen menu designs; the content of the menu stays the same.
WCAG asks for at least 4.5:1 contrast for normal text and 3:1 for large text; the builder checks this, except in photos and your logo.
Use your own font only with a web licence; set dark mode and motion to suit what your visitors need.

Quiz

1. What is the minimum contrast ratio WCAG asks for at level AA for normal text? 2:1
3:1
7:1
4.5:1

4.5:1 for normal text, 3:1 for large text. 7:1 belongs to the stricter level AAA.

2. You choose a light yellow main colour and the builder reports that a colour has been adjusted. What is the best response? Choose a different style, so the message disappears
Read the message and, to keep the yellow, use it as an accent with dark text
Put the site online without saving
Upload your own font

The builder adjusts colours because otherwise text can't be read on them. Bright brand colours work better as an accent than as a text colour.

3. What does it cost to have the AI design a logo? 1 edit for three proposals
1 edit per proposal, so 3
Nothing, branding is free
2 edits, because a new section is added

Three designs together cost 1 edit. A new round of proposals is another edit. The rest of the branding is free.

4. You bought a nice font for your print materials. May you upload it as your own font? Yes, you bought it so it's yours
No, the builder doesn't support your own fonts
Only if the licence allows web use
Only if it is a .ttf file

The builder accepts .woff2, .woff, .ttf and .otf, but you may only use a font with a web licence.

5. Under Dark mode you choose "Like the device". How do you see the dark version in the builder? With the Dark button in the top bar of the preview
By setting your own phone or computer to dark
You can't, only visitors see it
By choosing the Night style

The preview follows the setting of your device. There is no switch button, not for visitors either.

Exercise

Exercise D4.2: Your house style and contrast. Set up your branding and measure the contrast of your most important colour pairs.

Checklist:

[ ] logo uploaded or chosen from the AI proposals;
[ ] favicon set and seen in the browser tab of your live site;
[ ] style and menu design chosen, checked on Mobile;
[ ] main colour set and the builder's messages read;
[ ] contrast of text colour on background and of button text on button colour measured with a contrast checker;
[ ] dark mode and motion chosen deliberately;
[ ] branding saved and site put online again.

Questions:

Which contrast ratios did you measure for text on background and for button text on button, and do they reach 4.5:1?
Where on your site is there text over a photo, and is it easy to read on a phone?
Do you use your own font? Where in the licence does it say web use is allowed?

After "done" you'll see a sample answer: Schildersbedrijf Example measured dark grey on white at 14.5:1 and white text on the green button at 5.1:1, both above 4.5:1; the heading over the hero photo was hard to read, so they chose a darker photo; no custom font, so no licence needed.

Exercise D4.2: Your house style and contrast

You do this exercise yourself; no one checks it. Tick off what you've done and mark the exercise as done.

uploaded a logo or chose one from the AI suggestions
set a favicon and seen it in the browser tab of your live site
chose a style and menu design, checked on **Mobile**
set the main colour and read the builder's messages
measured the contrast of text colour on background and of button text on button colour with a contrast checker
made a deliberate choice for dark mode and motion
saved the house style and published the site again

Which contrast ratios did you measure for text on background and for button text on button, and do they reach 4.5:1?

Where on your site is there text over a photo, and is it easy to read on a phone?

Do you use your own font? Where in the licence does it say web use is allowed?

Also save my answers in My courses (so you can view and download them on any device). Don't include any passwords or other secrets.

Here's how you could approach this

Schildersbedrijf Example measured dark grey on white at 14.5:1 and white text on the green button at 5.1:1, both above 4.5:1. The heading over the hero photo was hard to read on a phone, so he chose a darker photo. No custom font, so no licence needed.

Your ticks and notes only stay in this browser; we don't send them anywhere. If you're signed in, we only save in My courses that you've done the exercise.

Cookies at WebOké

Cookie settings

Necessary

Marketing