Site styles
Site Styles changes theme, colours, fonts, buttons and spacing for the whole site. Which tabs you see depends on the template your site is built on.
For the complete documentation index, see llms.txt. This page is also available as Markdown.
Open Site Styles in the icon rail, or Brand Kit in the settings cog menu, to change settings that apply across the site instead of editing elements one by one. Everything here is undoable with CmdZ.
#Identity
At the top, Site name and a favicon with Replace favicon. A favicon address must start with https:// or be a data: image. Otherwise a message reads "Favicon URL must be https:// or a data: image." or "Favicon URL must be a valid https:// URL." The panel says identity changes apply on next publish. See Publish your site.
#The five tabs
| Tab | What it controls |
|---|---|
| Theme | A whole look at once, combining a palette and a font pairing |
| Colors | The site palette |
| Fonts | The site's font choices, from Google Fonts |
| Buttons | The shape of buttons across the site |
| Spacing | Site-wide spacing |
#Which tabs you see
A generated site is built on one of the templates, so it follows its template, not a separate rule. All five tabs show only on older projects with no template behind them.
| Template | Tabs shown |
|---|---|
| capitol, datum, fade, gloss, grove, hearth, keel, lueur, odessey, vanta | Theme, Colors, Fonts, Buttons |
| saffron, veil | Theme, Colors, Fonts |
| tempo, terrace | Fonts only. They have no palette control |
Spacing is never shown on a template site, because a template's section spacing is designed section by section. Use the Spacing presets in Section settings on a selected section instead.
#Theme
Curated themes are eight ready-made pairings of a palette and a font pairing.
| Theme | Palette | Fonts |
|---|---|---|
| Editorial Warm | Warm Sand | Editorial |
| Modernist Noir | Midnight Gold | Modern |
| Bold Display | Ember Flame | Bold Sans |
| Elegant Classic | Warm Sand | Elegant |
| Geometric Cool | Arctic Ice | Geometric |
| Instrument Soft | Terracotta | Instrument |
| Clean Tech | Electric Blue | Clean |
| Mono Modern | Monochrome | Modern |
#Colours
The palette has four roles: Primary (the accent), Secondary (the muted colour), Surface (the background) and Text. A Mode switch applies the first light or dark palette. A Seed Color, labelled Brand color, sets the accent. Color theme picks one of seven curated palettes: Midnight Gold, Arctic Ice, Ember Flame, Warm Sand, Electric Blue, Terracotta and Monochrome.
Only the roles you change are written, so changing Primary repaints the accents and the template keeps its own background, type and secondary colour. The rows show the template's own colours until you set one. Reset to template default, shown once you have chosen a palette, clears your colours. The Fonts and Buttons tabs have the same button.
#Fonts
| Pairing | Headings | Body |
|---|---|---|
| Editorial | Cormorant | Inter |
| Modern | Inter | Inter |
| Bold Sans | Syne | DM Sans |
| Elegant | Playfair Display | DM Sans |
| Geometric | Space Grotesk | Inter |
| Instrument | Instrument Serif | Inter |
| Clean | Poppins | DM Sans |
Fonts come from Google Fonts. Font files cannot be uploaded. For one element, use the Font control in the Design tab. See Edit text.
#Buttons and spacing
| Button style | Corner radius | Weight and case |
|---|---|---|
| Pill | 999px | 600 |
| Rounded | 10px | 600 |
| Sharp | 2px | 600 |
| Bold | 10px | 700, with wider letter spacing |
| Editorial | 0px | 500, uppercase, wide letter spacing |
| Spacing scale | Section padding | Gap between blocks |
|---|---|---|
| Compact | 48px | 16px |
| Cozy | 88px | 24px |
| Spacious | 140px | 32px |
Choosing a spacing scale affects new sections. Apply to all sections also updates existing ones. Per-section spacing you set by hand always wins.
#Site styles or element styles
| You want to | Use |
|---|---|
| Change the text colour everywhere | Site Styles, then Colors, the Text role |
| Change one heading's size | The Design tab on that heading |
| Change the corners of every button | Site Styles, then Buttons, where available |
| Change one button | The Design tab on that button |
#Common questions
Spacing is never shown on template sites, and generated sites are template sites. Use the Spacing presets in Section settings on a selected section instead. See The Design inspector.
They go live after you publish or update. See Publish your site.
Yes. Saved versions bring back the palette, fonts and Brand Kit with the pages. See Undo, autosave and version history.