Design Tokens

Design Tokens are the central settings that determine the look of your entire website. These include: • Colors – Primary, secondary, accent, background, text • Fonts – Heading font and body font • Spacing – Distances between sections • Border radius – How rounded buttons and cards are • Shadows – Default shadow style for cards and elements When you change a design token, the entire site updates automatically. You don't need to adjust each block individually.

Go to Design → Colors. You'll see the following color fields: • Primary – Your brand's main color (buttons, links, accents) • Secondary – A second accent color • Accent – Extra highlight color for emphasis • Background – The page background color • Surface – Background color for cards and sections • Text – Default text color • Text muted – Color for subtexts and placeholders Click a color field to open the color picker. You can enter a HEX code or select a color visually.

Enable Dark Mode via the toggle at the bottom of the Colors panel. You can set separate colors for dark mode: • Primary (dark) – Often a lighter variant of your primary color • Background (dark) – Dark background (e.g. #1a1a2e) • Text (dark) – Light text color for readability When dark mode is enabled, visitors see a sun/moon toggle on your website. Their preference is remembered.

Go to Design → Fonts. You can set two fonts: • Heading font – Used for all headings (H1 through H6) • Body font – Used for paragraphs and other text Choose from hundreds of Google Fonts. Type the font name to search. The font is automatically loaded on your website.

Go to Design → Spacing. Here you set the default distances: • Section spacing – Vertical space between sections (e.g. 64px, 80px, 96px) • Content padding – Inner space within sections These values apply as defaults for all sections. You can still override per block via the inspector.

Go to Design → Border radius. This determines how rounded elements are: • None (0px) – Sharp corners, corporate look • Small (4-8px) – Subtly rounded • Medium (12-16px) – Modern and friendly • Large (24px+) – Strongly rounded, playful The border radius applies to buttons, cards, input fields and images.

Go to Design → Shadows. Shadows add depth to cards and elements. Choose a preset: • None – Flat design, no shadow • Subtle – Light shadow, modern • Medium – Clear shadow, cards lift up • Strong – Prominent shadow, lots of depth The shadow setting applies to all card-like elements on your site.

Click 'Save' to save your design tokens. Changes are immediately visible on your live website after saving. • Reset all – Resets all tokens to their default values • Lock – Lock individual colors so they won't be overwritten during AI generation or template import Note: Design tokens are saved per site. Each site has its own set of tokens.