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. Each card says what kind of business it suits, like "Landscapers, garden centers, farms". The preview shows your own site in that design. Nothing changes yet.
3. Above the preview, leave Use its colors, fonts and footer too checked to see the design the way it was drawn: its palette, fonts, corners, header and footer. Uncheck it to keep your own. If you made your own colors, it starts unchecked.
4. Click Use and the design's name, like Use Grove, 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.

Your current design is marked Your design. Classic suits most businesses; the others are drawn for one kind of business, from cafés and salons to roofers, gyms and nightclubs.

Make your own colors

The top of Colors is a palette generator. It shows your five main colors, each with a job: Background, Main (buttons, links and brand bands), Accent (small labels, stars and badges), Dark (dark bands and the footer) and Text.

1. Click Theme in the left menu.
2. Under Colors, click Generate. New colors show in the preview right away.
3. Keep pressing the space bar (or Generate) until you see colors you like.
4. Like one color but not the rest? Click its lock. Locked colors stay put while the others change.
5. Went past a good one? Click Undo, or click it in the row of small palettes you've tried.

To choose a color yourself, click it. You can pick it with the color picker, type its code (like #2F5D46), or click a lighter or darker shade. Your logo's colors are a good start: lock them, then press Generate to fill in the rest.

Two lists narrow what Generate makes:

• Colors that go: how the accent relates to the main color. Opposite and Split stand out, Neighbor is calm and matching, One color uses shades of your main color, and Quiet + pop pairs a quiet main color with one bright accent.
• Feel: Calm, Bold, Earthy, Fresh, Elegant or Playful.

More colors shows the quieter colors worked out from your five: the soft fill behind tinted sections, gray text, lines, and the words on buttons and dark bands. You can change these too.

Found colors you might come back to? Click Save these colors. You can keep up to 8, and click one to use it again.

Pick a ready-made palette

1. Click Theme in the left menu.
2. Under Colors, find Or start from 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. The first six work with any design:

• 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

After those come two for each design: the one it was drawn with, and one marked "Second palette for the" design's name. You can use any palette with any design.

A ready-made palette is also a good place to start your own: pick one, then lock the colors you want to keep and press Generate, or click a color to change it. If you pick a ready-made palette after making your own colors, Your colors appears first in the list so you can go back.

How we keep text readable

Every palette the generator makes is checked so all words are easy to read against what's behind them, at the contrast level accessibility guidelines ask for. Why these colors work lists each pairing and how it measures.

If a color you choose or lock is too light or too dark for its job:

• The editor moves it just enough, keeping the same hue, and tells you: "We made it a little darker so words stay easy to read."
• Light main colors, like yellow or sky blue, can keep their brightness on buttons. The button words turn 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 your main and accent colors would look alike to visitors with color blindness (green and orange often do), the editor says so, so you can pick a lighter or darker accent.

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)

After those come the pairings each design was drawn with, like Garden (soft and earthy) for Grove. Each card shows a sample of both fonts. 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 an icon style

The small icons on your site, like the phone, text and check marks, the language globe and the photo arrows, all come in one style. Under Icon style, pick:

• Regular: clean outlines.
• Light: thin and airy.
• Bold: thick and friendly.
• Sharp: square ends and crisp corners.
• Duotone: outlines with a soft tint inside.

Each style works with every design and color. The play and pause buttons stay solid so they're easy to spot.

Choose a header layout

The header is the strip at the top of every page, with your logo, menu, phone number and button. Under Header, pick a layout:

• Logo left: your logo on the left, your menu and button on the right.
• Logo above menu: your logo in the middle, with the menu in a row of its own underneath.
• Logo in the middle: half your menu on each side of a centered logo, with a thin strip of contact details above. Suits a long menu on a wide screen.

On phones, every layout becomes the same menu button. To change what's in the menu or the header's button, see Change your menu and footer links.

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.