Theme
Your workspace theme engine. Colors, fonts, spacing, radius. Visual pickers, live preview, your colors suggested in the fields.
Overview
Theme is the design system engine. Each workspace has its tokens. Pages, Blog, member app, transactional emails, invoices: everything consumes these tokens.
Visual pickers (colors, fonts, spacing, radius), live preview of your site, your settings suggested in style fields and 5 starter sections ready to clone.
The idea: define your brand once, it propagates everywhere. When you change your primary color, your site, invoices, booking confirmation email all change.
What the module does
Design system wizard (5 steps)
The brand wizard walks you through it in one go: pick a vibe (6 styles: Modern Pro, Playful Tech, Editorial, Bold Startup, Minimal Zen, Custom), a primary color with a live contrast check, a typography pairing (8 Google Fonts pairings), a radius (sharp, rounded, pill) and a density (compact, comfortable, airy). The preview next to it shows a real mini site. Everything applies right away to your public site and your member area.
Tokens
Exposed CSS variables: --color-primary, --color-accent, --font-display, --radius-lg, --space-4, etc. Resolved per workspace.
Visual pickers
Color picker with contrast check (WCAG AA), font picker (Geist, Inter, Manrope, etc.), spacing scale, radii.
In-place iframe
Live preview in the /theme page. You change a color, the iframe refreshes the preview of your site on your domain.
Token autocomplete
When you enter custom CSS in a Pages block, the editor autocompletes your tokens. No hard-coded hex.
Starter sections
5 pre-styled sections (hero, features, pricing, FAQ, footer) in draft, available to clone.
Cross-module branding
Logo, palette, fonts, tone: all resolved per workspace. Member app, emails, Counsel invoices: all inherit.
How to use it
- 01
Setup brand
/theme, pick your colors, type, spacings.
- 02
Preview
In-place iframe on the right shows your live site with the new tokens.
- 03
Save
You click Save. Your settings apply everywhere.
- 04
See it
Your site, invoices, emails: all aligned.