Theme
Le moteur de theme par workspace. Couleurs, fonts, spacings, radii. Pickers visuels, iframe in-place, autocomplete des tokens. V1+V2 livres.
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 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.
Ce que le module fait
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.
Comment on l'utilise
- 01
Setup brand
/theme, tu choisis tes couleurs, ta typo, tes spacings.
- 02
Previsualise
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, propages partout.
- 04
Constate
Ton site, tes factures, tes emails: tout est en accord.
Apercu
Routes dans Kernel
- /theme
- /theme/colors
- /theme/typography
- /theme/spacing