Theme tokens

Theme tokens are site-wide design variables. Changing a token updates every component that uses it — you don’t need to restyle individual blocks.

Open the theme panel

1. Click Settings in the topbar.
2. Click Theme in the dropdown menu.
3. The Site Settings modal opens to the theme editor, which has five tabs: Colors, Typography, Layout, Animation, and Advanced.

Theme settings open inside the Site Settings modal.

Colors

The Colors tab has four sections:

• Default Color Mode — sets whether the site loads in System (follows the visitor’s OS preference), Light, or Dark mode.
• Theme Colors — assign semantic roles (Primary, Secondary, Background, Text, etc.) to shades from the base palette. These drive utilities like bg-primary and text-default across every component.
• Dark Mode Colors — override semantic colors for dark mode. These values are used when the exported site resolves to dark mode.
• Base Colors — override individual Tailwind color shades (e.g. change what blue-500 looks like globally).

Change a color

1. Open the Colors tab.
2. To change a semantic role (e.g. Primary, Background): find it in Theme Colors and choose a shade from the dropdown.
3. To edit a raw palette color (e.g. blue-500): scroll to Base Colors, click the swatch, and pick a color or enter a hex / CSS value.
4. Click Save in the modal footer.

Use the Colors tab to map semantic roles to palette shades.

Typography

The Typography tab controls:

Setting	What it controls
Font family (sans / serif / mono)	Base font for body text, headings, and code
Font size scale (xs → 9xl)	The responsive type scale used by all text components
Font weights	Available weight steps (light → bold)
Line height	Tight / normal / relaxed variants

To use a custom or Google Font, add it in Settings → Fonts first, then select it here.

Typography tokens centralize font families, scale, weights, and line heights.

Layout

• Spacing Scale — the base spacing unit used by spacing utilities
• Border Radius — named radius values used by rounded-corner utilities
• Shadows — named shadow values used by cards, pop-ups, and dropdowns

Layout tokens are direct inputs for spacing, radius, and shadow values.

Animation

Site-wide animation defaults. See the Animation guide for details.

For element-level dark-mode overrides and the visitor-facing dark/light switch, see the Dark mode guide.

Advanced

For advanced users: paste custom design rules here to extend or override anything not available through the UI panels above.

Common issues

Color change doesn’t appear on the canvas — make sure you clicked Save. Changes are not applied live; they take effect after saving.

Custom font not available in the font family picker — add the font via Settings → Fonts first, then reopen Settings → Theme and select it in the Typography tab.