Themes, colours and typography
Your site's look comes from its active theme. A theme combines a heading font, a body font, a base text size, and a full colour palette for both light and dark mode. Every block takes its styling from the theme, so one change restyles the whole site.
All styling controls live in the ribbon at the top of Design. The artboard updates live as you change them.
Themes
The theme menu on the left of the ribbon shows the active theme's name. A dot beside the name means the theme has unsaved changes.
- Select a theme from the list to apply it.
- Save as new theme... keeps your current styling as a new theme.
- Revert changes discards unsaved changes to the active theme.
- Rename or Delete a theme from its row in the list. The last remaining theme cannot be deleted.
To save your current styling under a new name, you can also use the save icon at the end of the ribbon, enter a Theme name, and select Save theme.
Themes belong to the project and are saved with it when you select Save.
Typography
Open the typography control to choose fonts:
- Heading Font (Primary) and Body Font (Secondary).
- Pair fonts automatically: when on, choosing a heading font picks a body font that suits it.
Available fonts: Geist, Inter, Inter Tight, Plus Jakarta Sans, Manrope, DM Sans, Outfit, Space Grotesk, Bricolage Grotesque, Instrument Serif, Newsreader, Playfair Display, Fraunces, Lora, Geist Mono, JetBrains Mono, Fira Code, Space Mono, Sora and Syne.
Base text size
Sets the size of body text across the site, and scales the rest of the type with it: Compact (14px), Standard (16px) or Spacious (18px).
Page animation
The Page animation button in the ribbon opens Block entrance animation, which makes each block fade in and float up as it scrolls into view on the published site.
- Off, All at once, or One by one.
- Speed: how long each block's animation takes, from 100 to 2000 ms.
- Rise: how far each block travels, from 0 to 120 px.
- Interval: the gap between blocks when animating one by one, from 0 to 500 ms.
- Replay runs the animation again on the artboard, so you can see your changes.
Colours
The swatch strip in the ribbon shows the six colour roles of the palette. Select it to open Palette calibration.
Colour roles
| Role | Used for |
|---|---|
| Brand | Buttons, links and accents |
| Canvas | The page background |
| Card | Cards and raised surfaces |
| Subtle | Quiet backgrounds and bands |
| Text | Body text |
| Border | Dividers and outlines |
For each role you can pick a colour, type a hex value, and see its contrast ratio. Lock a role to keep it fixed when you roll new colours.
Light and dark
Each theme has a light palette and a dark palette. Palette calibration edits the palette for the mode you are previewing; switch modes with Preview theme in the ribbon.
Derive Dark from Light (or Derive Light from Dark) builds the other mode's palette from the one you have, keeping your brand hue and readable contrast. The AI can do this too.
Roll harmony
Roll harmony (the dice button, or press Space when you are not typing)
generates a fresh colour harmony across every unlocked role. In Palette
calibration the same action is Re-roll Harmony.
Page background
At the bottom of Palette calibration, choose the page background:
- Solid: the Canvas colour.
- Linear gradient: set the colour stops, the angle in degrees, and the behaviour: Stay put (the gradient stays fixed while the page scrolls) or Scroll with page.
Block colours
Some blocks let you override their container background in the Inspector. Those colours have a light and a dark value, so the block reads well in both modes. See Blocks and the Inspector.