Skip to main content
A theme sets a landing page’s colours, fonts, corner radius and button shape. You can pick one ready-made, change any part of it, or describe what you want and have AI write it. The theme is saved into the page’s Custom CSS, and anything you’ve written there yourself is kept. Open a page in the editor and click an empty part of the canvas, or click Styles in the toolbar. Theme is at the top of the panel.

​
Pick a theme

Click the theme menu (it says No theme yet on a page that doesn’t have one) to see all 20 themes, each with its colours and fonts.
  • Type in Search themes… to find one by name.
  • Use All, Light and Dark to filter.
  • Click the shuffle button to try a random theme.
Clicking a theme applies it straight away: the page’s colours, fonts and buttons change on the canvas. If your workspace has a brand colour in Brand, a page the AI generates uses it in place of the theme’s accent.

​
Change the colours, fonts and shape

Below the theme menu are four tabs. Every change shows on the canvas as you make it. Colours: set each colour with the picker or type a hex code. A warning appears under Text or Secondary text when it’s hard to read against the background, with the current contrast ratio. Text needs at least 7:1 and secondary text 4.5:1. Use brand colours sets the accent to your workspace’s brand colour, and the second accent to its secondary colour when that shows up against the background. Type: choose the Headline font and Body font, and set the Headline weight and Headline letter spacing. Instrument Serif comes in one weight only, so the weight slider is off when it’s the headline font. Shape: set the Corner radius of cards, images and panels (0 to 32 px), and the Button shape: Pill or Rounded. When you change a ready-made theme, its name shows as customised, for example “Aurora, customised”. Click Reset to Aurora to go back to the original.

​
Generate a theme with AI

On the Generate tab, describe the look you want, for example “warm and earthy with a serif headline” or “fresh Scandinavian, sand background, deep green buttons”. You can also click Image to attach a screenshot or design to take colours and type from (PNG, JPEG or WebP, up to 5 MB). Then click Generate theme. The AI starts from your current theme and changes what your description asks for. It only chooses colours, fonts and shapes, so the result is always a theme you can keep editing on the other tabs. If text comes back too faint to read, it is darkened or lightened until it’s readable. Each generation counts toward your plan’s AI text generations.

​
Use a theme on a page you built yourself

A theme styles blocks that carry the theme’s classes. Pages made with AI Generate already have them. A page you built block by block doesn’t, so the theme menu shows This page’s blocks don’t use the theme yet. Click Style this page’s blocks and:
  • each container at the top of the page becomes a section, with alternating backgrounds
  • blocks placed straight on the page, with no container around them, are grouped into a new section
  • headings get the size for their level (H1, H2 or H3)
  • buttons become primary buttons in the accent colour, and keep their alignment
  • containers inside columns become cards
  • links take the accent colour and dividers the border colour
  • fixed text colours are cleared so text follows the theme
The page also switches to Fluid width, because themed sections paint their background edge to edge and keep their content at a readable width themselves. To undo it, press Undo (⌘Z) once.

​
Blocks you add later

On a themed page, new blocks take the theme as you add them. A new button is a primary button in the accent colour, a heading gets its level’s size, a container added at the top of the page becomes a section, and links and dividers use the theme’s colours. Snippets and pasted blocks that already carry style classes keep them. If some buttons, headings, links or dividers were added before the page had a theme, the theme panel shows Style N unstyled blocks. Click it to bring them in line.

​
Where the theme is saved

The theme is written into the page’s Custom CSS (on the Styles tab), in two marked parts: the theme’s colours and fonts, then the rules that style sections, cards and buttons. Picking or editing a theme replaces those two parts only. Anything you write after them is kept.
Don’t edit between the theme’s markers in Custom CSS. Your edits there are replaced the next time the theme changes, and the theme panel shows a warning when it finds them. Put your own rules after the design system instead.
Pages that already existed look exactly as before until you pick a theme or click Style this page’s blocks.

​
Troubleshooting

  • The theme changes nothing on my page: the page’s blocks don’t have the theme’s classes yet. Click Style this page’s blocks.
  • One button or heading doesn’t match: it was added before the theme. Click Style N unstyled blocks, or pick a style for it in the block’s CSS Class field.
  • A button ignores its alignment: open the page in the editor once. Pages saved with an older version of the theme’s rules are brought up to date when they’re opened.