Theme and brand colors

The Theme screen sets how your whole site looks: its design, colors, fonts and corner style. Every choice is designed to work with the others, so you can try anything without making your site look broken. Changes show in the preview right away.

Pick a design

A design is the overall look of your site: where the logo and menu sit, and how headings, buttons and cards look. Your words, photos, pages and settings stay the same in every design, so you can switch at any time without losing anything.

1. Click Theme in the left menu.
2. Under Design, click a design to try it. The preview shows your own site in that design. Nothing changes yet.
3. Leave Use its colors, fonts and footer too ticked to see the design the way it was drawn, or untick it to keep your own colors, fonts and footer. If you use your own brand colors, it starts unticked.
4. Click Use and the design's name to switch, or Cancel to keep the one you have.
5. Changed your mind? Click Undo under the designs. Like any change, a new design reaches your live site when you publish.

The designs so far:

• Classic: logo on the left, soft cards and generous photos. Suits most businesses.
• Main Street: centered logo above the menu, fine lines and lettered headings, like a shop sign. Suits shops, cafés, salons and studios.

Pick a ready-made palette

1. Click Theme in the left menu.
2. Under Colors, find Or pick a ready-made palette.
3. Click a palette. A check mark shows which one is in use.

Each palette lists the kinds of businesses it suits:

• Fern: outdoors, garden, wellness
• Harbor: trades, repair, professional
• Terracotta: cafés, bakeries, restaurants
• Blush: salons, spas, boutiques
• Charcoal: studios, law, consulting
• Sunrise: fitness, kids, events

Use your own brand colors

Already have brand colors? Start from those instead.

1. Under Your brand colors, click the Main color box and choose your main color.
2. Click the Accent color box and choose a second color.
3. Your site switches to your brand colors as soon as you pick one. To switch back to them later, click the color swatch next to Your brand colors.

Your main color is used for buttons, links and bold color bands. The accent color adds a small highlight here and there.

Most color pickers let you type a color code, like #2F5D46, if you have one.

How we keep text readable

You pick two colors. The editor builds the rest of the palette from them: the background, tinted sections, dark sections and text colors.

It also checks that all text is easy to read against its background, meeting the contrast level recommended for accessibility. If one of your colors is too light for that:

• The editor darkens it slightly, keeping the same hue. You'll see the note "We darkened your colors slightly so text stays easy to read."
• Light main colors, like yellow or sky blue, can keep their brightness on buttons. The button text turns dark instead of white.

This means your exact color may look a little deeper on your site than in your logo. That's on purpose: low-contrast text is hard to read, especially on phones in bright sunlight. If you need a different result, ask for it with a work request from your dashboard.

Choose your fonts

Under Fonts, click a pairing. Each one sets a heading font and a matching body font:

• Classic: warm and established
• Modern: clean and confident
• Editorial: stylish and refined
• Elegant: graceful and calm
• Friendly: approachable and upbeat
• Sturdy: bold and dependable (headings in capital letters)

Custom fonts aren't available, which keeps your site fast.

Choose a text size

Under Text size, pick Smaller, Standard or Larger. This changes the size of all the words on your site at once, in every design.

Larger suits sites whose visitors find small print hard to read. The steps are small on purpose, so your design's layout still fits on every screen. To make one section's heading stand out instead, see Change a section's heading size and color.

Choose a corner style

Under Corners, pick Crisp, Soft or Round. This changes the corners of buttons, photos and cards across your site.

Choose a footer layout

The footer is the strip at the bottom of every page. Under Footer, pick a layout:

• Columns: your logo and tagline, then your contact details, hours and menu side by side. Best when you have opening hours and an address.
• Centered: everything stacked in the middle. Suits coaches, studios and other smaller sites.
• Compact: one short band, with your logo on one side and your menu and contact details on the other.

Whichever you pick, the footer only shows what you've filled in under Business info. No hours or phone number? Those parts are left out.

Add your logo

Your logo and browser tab icon are on the Business info screen, not the Theme screen.

1. Click Business info in the left menu.
2. Under Basics, find Logo and click Choose photo.
3. Upload your logo, or pick it from your photos.

Without a logo, your business name is shown in your heading font. A logo with a transparent background works best.

Add a browser tab icon

The Browser tab icon is the tiny square image in browser tabs and bookmarks.

1. On Business info, under Basics, find Browser tab icon.
2. Click Choose photo and upload a small square image. A simple version of your logo works well.

Without one, we use the first letter of your business name on your brand color.

Tips

• Your words and photos stay the same when you change your theme.
• Check a few pages in the phone preview after a theme change, especially sections with a Dark or Brand color background.
• Each section's background is set on the section itself. See Edit text and photos.
• Click Publish when you're happy. See Getting started.