Live

Theme

Le moteur de thème de ton espace. Couleurs, polices, espacements, arrondis. Sélecteurs visuels, aperçu en direct, tes couleurs suggérées dans les champs.

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.

Sélecteurs visuels (couleurs, polices, espacements, arrondis), aperçu en direct de ton site, tes réglages suggérés dans les champs de style et 5 sections de départ prêtes à cloner.

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)

L'assistant de marque te guide en une fois : choisis une ambiance (6 styles : Modern Pro, Playful Tech, Editorial, Bold Startup, Minimal Zen, Custom), une couleur principale avec vérification du contraste en direct, une typographie (8 associations Google Fonts), un arrondi (net, arrondi, pilule) et une densité (compacte, confortable, aérée). L'aperçu à côté montre un vrai mini-site. Tout s'applique aussitôt à ton site public et à ton espace 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

  1. 01

    Setup brand

    /theme, tu choisis tes couleurs, ta typo, tes spacings.

  2. 02

    Prévisualise

    Iframe in-place sur la droite affiche ton site live avec les nouveaux tokens.

  3. 03

    Valide

    Tu cliques sur Enregistrer. Tes réglages s'appliquent partout.

  4. 04

    Constate

    Ton site, tes factures, tes emails: tout est en accord.