Docs / Building a Site

2.6

Design System & Components

Apply brand colors and fonts everywhere at once, and reuse header/footer.

On this page

Design System (branding)

The Design System is the set of brand rules applied across the whole site. Define colors, fonts, and spacing in one place and they apply consistently to every page.

There are two places to configure it:

  • Organization defaults — Organization settings → Design System. Colours, fonts and spacing applied to every site in the workspace (see Organization Settings).
  • Per-site overrides — Each site's Design System tab. A site that has its own values uses them; otherwise it inherits the organization defaults.

What you can set:

  • Primary / secondary colors and other brand colors
  • Fonts (typography)
  • Spacing, corner radius, and other base styles

Changing a color or font updates every page that uses it at once. You don't need to change each page individually. Inside the editor, the same values appear in the left Variables panel.

Design System on a draft site

On a site with an unpublished draft plan, the Design System tab edits the draft's variables — the colors and font chosen in the AI Site Builder's Design step land here. A badge shows whether they are Published or Not published. Click Publish variables to push only the variables to the live site while the rest of the plan stays a draft. Publishing the whole plan (Publish in the banner) also carries them over.

If the site already has live pages and the draft's variables differ, the banner warns Variables changed but not published — live pages keep the old values with a Publish variables link.

Reusable components

Components are parts reused identically across many pages — most commonly the header and footer.

  • Manage them in the site's Components tab. Layout Components lists the header and footer; below it, Components lists the site's other reusable components.
  • Use Bind to Header / Bind to Footer (and Unbind from Header / Unbind from Footer) to choose which component is the site's active header or footer. Unbinding does not delete the component.
  • Open a component to edit it in the editor. Editing the component updates every page that uses it.
  • Reusable components with content also appear in the page editor under Template Blocks, so you can drop them onto any page.
  • On the site's Pages canvas, the header and footer sit in their own column beside the page tree. On a draft site, click one to edit its brief, Generate its content and Publish component.

For example, changing the phone number in the footer updates it on every page that includes the footer.

Upload your logo in Organization settings → Profile → Logo (a square 1:1 image). It is used across your published sites and is available in the editor as the {{logo}} context value. You can also upload images to the Assets library and use them in the header and elsewhere.