Ce que ça fait pour toi

Theme est le moteur de design system. Chaque workspace a ses tokens. Les Pages, le Blog, l'app membre, les emails transactionnels, les factures: tout consomme ces tokens.

V1+V2 livres 2026-05-07: slices S1-S11. Pickers visuels (couleurs, fonts, spacings, radii), iframe in-place pour preview, autocomplete des tokens dans les champs custom, 5 sections starter en draft SDA.

L'idee: tu definis ton brand une fois, ca propage partout. Quand tu changes ta couleur primaire, ton site, tes factures, ton email de confirmation booking, tout change.

Comment ça marche

Wizard design system (5 etapes)

/settings/brand/wizard te fait passer un cap : choisis une vibe (6 presets : Modern Pro, Playful Tech, Editorial, Bold Startup, Minimal Zen, Custom), une couleur primaire (avec WCAG contrast check live), une typographie (8 combos curated avec Google Fonts), un radius (sharp/rounded/pill) et une densite (compact/comfortable/spacious). Live preview side-by-side avec un mini-site rendu en vrai CSS (pas un mockup IA). Sauvegarde dans workspace_theme.tokens + workspace_theme.layout, applique immediatement sur ton site public et ton app membre.

Tokens

Variables CSS exposees: --color-primary, --color-accent, --font-display, --radius-lg, --space-4, etc. Resolues par workspace.

Pickers visuels

Color picker avec contrast check (WCAG AA), font picker (Geist, Inter, Manrope, etc.), spacing scale, radii.

Iframe in-place

Preview live dans la page /theme. Tu changes une couleur, l'iframe rafraichit l'apercu du site sur ton domaine.

Autocomplete tokens

Quand tu rentres du CSS custom dans un bloc Pages, l'editeur autocomplete tes tokens. Pas de hex code dur.

Sections starter

5 sections deja stylees (hero, features, pricing, FAQ, footer) en draft, dispo pour clone.

Branding cross-module

Logo, palette, fonts, ton: tous resolus par workspace. L'app membre, les emails Resend, les factures Counsel: tout heritage.

Theme