Theme
Le moteur de theme par workspace. Couleurs, fonts, spacings, radii. Pickers visuels, iframe in-place, autocomplete des tokens. V1+V2 livrés.
Vue d'ensemble
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 livrés 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'idée: tu définis ton brand une fois, ça propage partout. Quand tu changes ta couleur primaire, ton site, tes factures, ton email de confirmation booking, tout change.
Ce que le module fait
Wizard design system (5 étapes)
/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 densité (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 immédiatement sur ton site public et ton app membre.
Tokens
Variables CSS exposées: --color-primary, --color-accent, --font-display, --radius-lg, --space-4, etc. Résolues 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 rafraîchit l'aperçu du site sur ton domaine.
Autocomplete tokens
Quand tu rentres du CSS custom dans un bloc Pages, l'éditeur autocomplete tes tokens. Pas de hex code dur.
Sections starter
5 sections déjà stylées (hero, features, pricing, FAQ, footer) en draft, dispo pour clone.
Branding cross-module
Logo, palette, fonts, ton: tous résolus par workspace. L'app membre, les emails, les factures Counsel: tout héritage.
Comment on l'utilise
- 01
Setup brand
/theme, tu choisis tes couleurs, ta typo, tes spacings.
- 02
Prévisualise
Iframe in-place sur la droite affiche ton site live avec les nouveaux tokens.
- 03
Valide
Tu cliques Save. Les tokens sont commit en DB, propagés partout.
- 04
Constate
Ton site, tes factures, tes emails: tout est en accord.
Apercu
