Help Centerchevron_rightWebsiteschevron_rightBuild and editchevron_rightHow to change colors and fonts by hand
auto_awesome

How to change colors and fonts by hand

Websites / Build and editschedule2 min readmenu_bookArticle 9 of 10 in Build and edit
open_in_newOpen Websites in Genayaarrow_outward

Asking Genaya AI in the site's chat, or pressing Edit and styling the text or the section you click, are the other two ways to change how a site looks. This is the third: the whole site at once, by hand, from the top bar.

Open Look

On a desktop, with the site open in the Preview view and the Websites edit permission, click the palette icon in the top bar. A panel titled "Look" opens with the line "Colors, fonts and shape for the whole site."

Quick looks

Round swatches across the top of the panel are the eight quick looks every site can take - Trust, Warm, Calm, Bold, Night, Forest, Slate, Ember. Tap one and it saves at once; every preset already reads at a safe contrast, so a quick look is never refused.

Colors, font, shape and motion

Primary
Buttons and links.
Accent
Highlights.
Background
The page.
Cards
Panels and cards.
Text
Body text.

Each color role is a swatch (a real color picker) and a hex box - type a value like #1d4ed8. Below them: Font pair, Radius (Square / Soft / Round), Density (Compact / Comfortable / Spacious), Motion (None / Subtle / Lively) and Mode (Light / Dark / Follow the visitor).

infoA site built with an art direction keeps it - the panel changes the colors and the fonts inside that direction, never away from it.

Saving, refusals and Undo

  1. 1
    Every change saves as you go

    The foot of the panel reads "Saved as you go", then "Saving", then "Saved" as you type or click - there is nothing to press to save it.

  2. 2
    A failing pair is refused, not saved

    A text-and-background pair under 4.5:1 prints "<Pair> reads at <ratio>:1; the site needs 4.5:1." and a primary color no button label can read on prints "Neither white nor dark text reads on this primary (<ratio>:1); a button label needs 4.5:1. Pick a darker or lighter primary." A half-typed hex prints "<Role>: use a hex color like #1d4ed8." Nothing saves until the sentence clears.

  3. 3
    Undo

    Press Undo to put back the look the site had the moment you opened the panel - not a running history, just that one snapshot.

lightbulbThe live site changes on the next Publish, exactly like every other edit.

Frequently asked

Was this article helpful?