Home › Features

Set your site's colors, fonts and logo

Where your brand lives

The Design screen is a studio with seven tabs: Design, Content, Components, CMS, SEO, Compliance and Atlas. Each one explains what it is for, what you can do there and what happens next, and takes you straight to the place that does it. The starred button at the top of your left rail carries the studio's name, so the button you press and the screen you land on use the same words. Your business details, kept once and used on every site, sit under the CMS tab. To change one across every site, see changing one thing on every site.

This page is about the brand side of that studio: your colors, your fonts, your logo and your brand guidelines. For the box that builds a site from a description, see the design studio page. For the size of your text and buttons, see text size and layout.

See your colors with their codes

The Design screen shows your site's colors. Every color appears with its hex, RGB and HSL values, along with how well each text color stands out from its background and the names of the CSS variables. Those are the details a designer or a developer usually asks for.

Try a new color before you save it

The color square on the Design screen is large and tells you to click it. The three steps beside it are numbered:

1. Choose a color.
2. Preview it without changing anything. The preview shows the whole set of colors, not only the one you picked.
3. Save it with one click.

Saving runs the same checks as any edit, and until you save, your site stays as it is. If you would rather talk it through, ask the agent to change the brand color. It works out the whole palette from that one color and keeps text readable.

Choose a font pairing the same way

Fonts follow the same pattern. On the Design tab, pick a font pairing, preview it on a sample without changing anything, then save it to your site. Saving re-runs every check before anything publishes, exactly as it does for a color change.

Brands and page structures start you from a prepared set rather than a blank canvas, and whatever you pick becomes yours the moment you change anything.

Make your logo bigger or smaller

Ask the agent in the conversation, and your logo changes size in your site's header and footer together. The sizes are small, medium, large and extra large. Your logo file itself is not touched.

If you have no logo yet, your site uses a simple mark made from your business's first letter in your brand color, as its logo and as its favicon, until you add your own. If a logo file is rejected, the message tells you exactly why.

A brand guidelines file to keep

Each site card offers a brand guidelines file you can keep. It holds every color with its codes, the color scale, the measured contrast of each text color, your fonts and type sizes, spacing, and your logo. Open it in any browser, print it, or send it to a designer.

You can get the same facts in conversation. Ask the agent for your brand guidelines and it reads your site's brand back to you: each color with its code and where it is used, your heading and body fonts, your logo, and the measured contrast of each text color against the standard minimums. It is ready to hand to a designer or a printer.

Starting from a brand, then making it yours

In the design studio you can see the brands, each with a color ramp, a type pairing, spacing and rhythm, painted so you can look at it rather than read about it. You can also see the structures, which are the page shapes we build, each showing the actual order of sections it produces. Each structure preview names every section it contains, so the shapes are easy to tell apart.

When you start a new site, you pick a brand and a structure in the Design Studio, and the button opens the page where you generate the site with those choices already filled in. If you already have a site with a look you like, magic brand sync can pull your brand from it.

If you change your mind after a save, every edit keeps the previous version. Open Sites, then More, then Versions, and choose Roll back to this. The page on version history explains what to do instead of digging through old copies.

What it does not do

• A preview changes nothing. Only a save changes your site.
• Changing the logo's size does not touch your logo file.
• Custom CSS, font size and weight for a single element, and animation controls are not built yet. When you ask for one, the agent says so, offers the nearest thing that works, and offers to send your request to the team in your words.
• There is no Undo button. Rolling back a version is the way back today.

For the wider picture, see the brand customization overview and the platform overview.

Updated October 2026