Customizing Your Brand

A fine-dining room and a burger counter shouldn’t have the same website. The Design Studio at Website → Design is where you set the look, with a live preview of your real site beside the controls.

Three tabs divide the work:

• Design: brand assets, colors, fonts, geometry.
• Structure: which sections make up each page, covered in building your pages.
• Looks: whole-site styles and the theme gallery.

Note: Everything you do here is a private draft. Your live site doesn’t change until you publish, so experiment freely.

Start from a Look, don’t build from scratch

They do different things, and the distinction matters:

• Switch Theme replaces your site’s whole layout structure. Your content is kept, but the frame around it changes.
• Pick a look applies a coordinated bundle of colors, fonts, and shape without touching layout.

Starting from a Look and adjusting is far faster than assembling a palette yourself.

The Design tab

• Brand Assets: logo, cover image, dark-mode logo, favicon.
• Header Layout: logo position and navigation arrangement.
• Color Palette. Five colors: Background (the page behind everything), Surface / Cards (panels sitting above it), Text, Primary / Brand (buttons and highlights), and Accent (secondary highlights).
• Appearance: light, dark, or auto.
• Typography: heading and body fonts.
• UI Geometry: corner rounding and spacing. Sharp reads modern and editorial; rounded reads warm.
• Footer Settings: visibility and links.

Light and dark are two separate palettes

This is the part that confuses people most, and it’s worth getting straight.

Appearance decides what visitors see: light, dark, or auto, which follows each visitor’s own device setting and therefore uses both your palettes.

The Light / Dark tabs inside Color Palette do something different. They don’t change what visitors see; they only choose which palette you’re currently editing. So if Appearance is set to auto, you need to configure both, or half your visitors get colors you never looked at.

If Appearance is fixed to a single mode, only that palette is configurable: the studio hides the other rather than letting you tune something nobody will see.

Watch the contrast warning

Set text and background too close together and a Low contrast warning appears, suggesting a ratio of at least 4.5:1.

Don’t dismiss it. A pale-grey-on-white palette that looks refined on your desktop becomes unreadable on a phone in sunlight, which is exactly where most people read a restaurant menu. The warning is the only automated check standing between a stylish palette and one your customers can’t use.

Publishing

The preview always shows your draft. The footer tells you where you stand: Unpublished draft or Published.

• Undo / redo step through your changes.
• Review changes lists what’s pending, marked Added, Removed, or Edited.
• View live site opens what’s actually public, for comparison.
• Discard throws the draft away.

Click Publish and everything goes live at once. See reviewing and publishing changes for the full flow.

After publishing, open your site on a phone as well as a desktop. Layouts that work on a wide screen often want a small adjustment on mobile.