Colors & Fonts
Your site's look comes from two independent choices: a Color Preset (the palette) and a Font Pair (the typefaces). Changing one never touches the other, so you can mix and match freely.
Color Presets
A Color Preset is a coordinated 5-color palette — Primary, Secondary, Accent, Background, and Text — that applies across your whole site.
To pick one, open the Color Preset panel and choose a card. Each card shows its name and a horizontal swatch bar previewing the five colors. Presets are grouped into categories like Salon, Bold Accent, Cool & Moody, Earth & Clay, Editorial, Light & Airy, Nature, Neutral & Quiet, Retro, and Tropical. The active preset is marked with a checkmark. Some presets carry a Light + Dark badge, meaning they include a matched dark variant.
Customizing colors
Want your own palette? At the top of the picker, click Customize colors… to open the editor.
The editor seeds from your current palette and lets you set each of the five colors:
| Color | Used for |
|---|---|
| Primary | Main brand color (links, key accents) |
| Secondary | Supporting color |
| Accent | Highlights |
| Background | Page background |
| Text | Body text |
Adjust each color with the swatch picker or by typing a hex value. The remaining supporting tones (borders, hover, secondary text/background) are derived automatically. Give your palette a Name, then click Save & apply — it's saved under a Your Presets section at the top of the picker so you can reuse it on any site.
Per-Section Background Color
You don't have to use the palette's background everywhere. Each section can override its own background color.
In a section's settings, the background preset card shows swatches drawn from your active theme colors. Click a swatch to apply it, page through the available options with the arrows, or choose the checkerboard transparent option to let the section below show through. The active background is highlighted with a red ring.
Font Pairs
A Font Pair sets a heading typeface and a body typeface for your whole site, independent of your colors.
Open the Font Pair selector and choose a card. Pairs are grouped by category:
- Sans-Serif — clean, modern
- Mixed — a serif heading with a sans body (or vice versa)
- Serif — classic, editorial
Each card previews the pair's name in its heading font and lists the typefaces below it (for example, Playfair Display + Satoshi). When a pair uses the same font for headings and body, only one name is shown. The active pair is marked with a checkmark.
Going Live
Color, font, and section-background changes save as you make them. When you leave edit mode — Stop Editing in the top bar, or the Preview pencil icon in the floating toolbar — the cache clears so your changes go live on your published site.