Theme
The per-workspace theme engine. Colors, fonts, spacings, radii. Visual pickers, in-place iframe, token autocomplete. V1+V2 shipped.
Overview
Theme is the design system engine. Each workspace has its tokens. Pages, Blog, member app, transactional emails, invoices: everything consumes these tokens.
V1+V2 shipped 2026-05-07: slices S1-S11. Visual pickers (colors, fonts, spacings, radii), in-place iframe preview, token autocomplete in custom fields, 5 starter sections in SDA draft.
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)
/settings/brand/wizard walks you through a single setup: pick a vibe (6 presets: Modern Pro, Playful Tech, Editorial, Bold Startup, Minimal Zen, Custom), a primary color (with live WCAG contrast check), a typography combo (8 curated pairings with Google Fonts), a radius (sharp/rounded/pill) and a density (compact/comfortable/spacious). Live side-by-side preview using actual compiled CSS (no AI mockup). Saves to workspace_theme.tokens + workspace_theme.layout and applies immediately to your public site and member app.
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, Resend 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
Click Save. Tokens are committed to DB, propagated everywhere.
- 04
See it
Your site, invoices, emails: all aligned.
Preview
Routes in Kernel
- /theme
- /theme/colors
- /theme/typography
- /theme/spacing