Theme

SaaS theme engine, pickers, iframe in-place, autocomplete tokens.

The per-workspace theme engine. Colors, fonts, spacings, radii. Visual pickers, in-place iframe, token autocomplete. V1+V2 shipped.

What it does for you

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.

How it works

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.

/settings/brand

Accent

Mode

Radius

Page template Published

Your next engagement

One set of tokens, reused by the site, the member app and invoices.

Change the accent, mode or radius: the preview repaints live.

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.