How your brand looks
Your logo in its three places, what each color is for, your fonts, the kind of photos you use and how your pages are put together. Every change shows on the page as you make it.
How it looks has five parts in the Brand card: Logo, Colors, Fonts, Photos and Layout. Hover any row and the page outlines where it's used: "Buttons and links · 3 on this page".
Logo
Three slots, each shown on your site's real backgrounds:
| Slot | Where it appears |
|---|---|
| Main logo | The header on every page |
| Logo on dark backgrounds | The footer and dark sections |
| Site icon | The browser tab and a phone's home screen, previewed at 16 and 48 px |
Replace, Upload or Pick from Assets. A file you drop shows in place straight away: "Main logo replaced in the header and footer · Undo". Used in 2 places lists where. The picture shown when someone shares a link is set in Site settings › Sharing image.
Colors
Each color has a job, so you change a job, not a hex code:
- Buttons and links
- Page background
- Text
- Dark sections
- Borders and dividers
Drag a color and the whole page recolors as you drag. Let go and it's one step: "Lingonberry changed on every page · Undo". Under How you use it write a rule, like "Lingonberry only on the order button". Also in your palette lists the other colors; ones the site doesn't use can be removed.
Fonts
Headings and Text, shown in your site's own sizes with a sentence from your site. Change searches Google Fonts; hover a font and the page shows it at once. Upload font files takes your own fonts (WOFF2, WOFF, OTF or TTF). A paid font without its files is replaced by the closest free one, and the card names it.
Photos
Describe your photos in a sentence and add examples under Like this and Not like this. On this page shows the photos of the page you have open. The agent and builds follow it when they pick images. Photos aren't checked automatically.
Layout
How your pages are put together: a sentence, your site's real buttons, and summaries of corners, spacing and motion in plain words, such as "Gentle, respects reduced motion". Edit opens the matching part of the Style guide.
Who changes the look Owners, admins and members change how the site looks. Content editors and clients can try a color or font on the page and Suggest it: the designer gets an email and a comment with Use it or Not now. Everyone can change how the brand sounds.
For designers Every color, role, text style, spacing step, corner, shadow, button and motion setting is in the Style guide: Style guide and design tokens, in depth.