WebsiteDesign (brand styleguide)

Design

Open it: Website → Design (your brand styleguide).

Your styleguide is the single source of truth for how your store looks. Set it once and every page, the header/footer, and the shop surfaces follow it.

The builder has a live preview and a section list on the left:

  • Presets — one-click full-styleguide templates. A Load default styleguide button fills every section with a working baseline for a new brand.
  • Typography — fonts (System, Google Fonts, Adobe Fonts, or self-hosted), roles (Body, Heading, Display, Mono, Accent), sizes, weights, and named text styles.
  • Colors — your palette with light and dark modes and focus rings.
  • Spacing & Shape — spacing scale, corner radii, borders, shadows.
  • Buttons & Links — CTA variants (Primary, Secondary, Tertiary, Ghost, Link) and link styles.
  • Forms, Components (badges, alerts, tooltips, cards), Effects (gradients, shadows, blur, animation), and Icons & Motion.

Edit and publish

Edit the live styleguide and Publish (a confirm dialog appears), or choose New draft to work on a tagged copy first, then Save draft and Publish.

Two deliberate limits keep every storefront fast: a brand uses a capped set of design tokens, and design fields are intent-based (small / medium / large) rather than raw pixel values. There’s no plan paywall inside this screen — all sections are editable.

Next: Media library.