Cas 07 · Fonction JOVION
Déclarez-le une fois.
Bâtissez avec partout.
Design System est la fonction de JOVION Pro qui donne à WordPress une source de vérité unique : couleurs, typographie et espacements déclarés à un seul endroit, audités sur la page en ligne, publiés dans les styles globaux du constructeur de pages — et appliqués chaque fois que l’agent bâtit.
- 01 // Rôle
- Conception de fonction · Ingénierie
- 02 // Produit
- JOVION Pro — extension WordPress
- 03 // Constructeurs
- Elementor v3 + v4 · Bricks
- 04 // Statut
- Offert dans JOVION Pro
A Le mandat
Les constructeurs de pages permettent de régler facilement une couleur ou une taille de police à la main — si bien que chaque page dérive un peu. Les couleurs de marque deviennent des quasi-correspondances, les titres changent de taille d’une page à l’autre, et une IA qui bâtit des pages rapidement ne fait qu’accélérer la dérive.
A.2 Ce qu’il devait faire
- 01Un seul endroit pour déclarer la marque : couleurs, typographie et espacements
- 02Montrer exactement où une page dérive — champ par champ
- 03Se lier aux styles globaux du constructeur, pas à des valeurs codées en dur
- 04Ne jamais écrire sur une page sans instantané ni contrôle de sécurité
B · Auditer et appliquer
La dérive, trouvée. Puis corrigée.
L’audit compare les titres, paragraphes et boutons d’une page au système sur cinq champs. Appliquez-le, et la section est rebâtie sur les jetons — liée aux styles globaux d’Elementor ou de Bricks. Lancez-le, ou changez de constructeur.
Couleurs 8
- primary
- secondary
- accent
- text
- heading
- bg
- link
- border
Typographie 8 niveaux
- H1Archivo 800 · 48 / 1.05
- H2Archivo 800 · 36 / 1.1
- BodyInter 400 · 17 / 1.6
- ButtonPlex Mono 500 · 13 · maj.
Espacement xs – xl
- xs
- s
- m
- l
- xl
Studio · 2026
Votre site Web, en pilote automatique.
Chaque page bâtie avec les mêmes couleurs, la même typo et les mêmes espacements — déclarés une fois, utilisés partout.
Commencer- ≠Titre · taille
44px→ 48 · H1 - ≠Titre · graisse
600→ 800 · H1 - ≠Paragraphe · interligne
1.35→ 1.6 · Body - ≠Bouton · couleur
#E0703A→ primary
4 champs en écart · 5 vérifiés par élément
C · Fonctionnalités
Ce qu’il fait.
- 01Six groupes de jetons
- Huit couleurs nommées, huit niveaux typographiques de H1 au bouton, une échelle d’espacement en cinq paliers, des largeurs de mise en page et des bordures — avec tailles tablette et mobile.
- 02Détecter, pas ressaisir
- Lit le kit Elementor, theme.json et Bricks pour remplir les jetons vides — sans jamais écraser ce que l’administrateur a déjà réglé.
- 03Importation DESIGN.md
- Importez un fichier de design au format ouvert DESIGN.md, ou partez d’un des six préréglages fournis, puis révisez avant d’enregistrer.
- 04Audit sur cinq champs
- Famille de police, taille, graisse, interligne et couleur — attendu contre trouvé, avec un compte de dérives. Les valeurs héritées ne comptent jamais comme dérive.
- 05Publier dans les styles globaux
- Les couleurs déclarées sont poussées dans la palette globale du constructeur, et leurs identifiants consignés pour que les pages suivantes s’y lient.
- 06Bâti sur le système
- Quand l’agent bâtit, les éléments sont liés aux styles globaux — références globales d’Elementor, variables CSS de Bricks — plutôt qu’à des valeurs fixes.
- 07Classes et composants
- Classes globales, variables, styles de thème et composants dans Bricks; classes et variables dans Elementor v4.
- 08Prêt pour Elementor v4
- Convertit les mises en page v3 en éléments atomiques v4 — d’abord à blanc, avec une sauvegarde prise avant tout changement.
D · Ingénierie
Comment c’est bâti.
- 01
À blanc, instantané, écriture
Chaque écriture dans les styles globaux du constructeur suit un seul chemin : un essai à blanc, un instantané dans JOVION Backups, puis le changement et une reconstruction du CSS.
- 02
Sûr à écrire — ou non
Une étape de vérification en lecture seule s’assure que la page survivra à la modification : les données d’Elementor doivent faire l’aller-retour sans perte; l’arbre de Bricks doit avoir des identifiants uniques, des parents valides et aucun cycle.
- 03
Ne contredit jamais l’intention
Les jetons remplissent ce que la demande laisse ouvert. Une valeur choisie délibérément est conservée, et les jetons vides ne sont jamais imposés à une page.
- 04
Vérifié sur de vraies versions
Les formats de stockage ont été vérifiés sur les versions actuelles d’Elementor et de Bricks, et tout ce qui n’est pas encore confirmé est consigné, pas présumé.
Pile technologique
Système de marque
- Cuivre
#CA8459 - Cuivre vif
#FABA8E - Toile
#030303 - Encre
#EDE8E3
E · Impact
En chiffres.
- 6
- Groupes de jetons, déclarés une fois
- 8
- Niveaux typographiques, de H1 au bouton
- 5
- Champs vérifiés sur chaque élément
- 3
- Constructeurs : Elementor v3, v4 et Bricks