Les mêmes valeurs des deux côtés.
Un design system ne tient pas parce qu’il est documenté : il tient parce que les valeurs ont UNE source. Déposées dans le Studio du projet, elles sont ce que l’agent lit avant de choisir une couleur — plutôt que d’en inventer une proche.
CSSSCSSJSONTailwindLes étapes, dans l’ordre.
- On relève ce qui existe. Les couleurs réellement employées, les tailles réellement utilisées. Un système inventé à côté du site existant ne sera jamais appliqué.
- On nomme par le RÔLE. « Fond en relief », « texte secondaire », « accent » — jamais « gris 3 ». Un nom qui décrit la couleur empêche de changer la couleur.
- On dépose la référence dans le projet. Les jetons et le territoire de marque deviennent une création validée. Toute session de ce projet les lit, en mode Dev comme en mode Studio.
- On génère, on ne recopie pas. Les variables CSS, le fichier de configuration, les valeurs de la maquette sortent de la même source. Une recopie diverge au premier changement.
À la fin, vous avez ça.
- Les jetons déposés et validés dans le Studio du projet
- Les variables CSS et la configuration de votre cadre de travail, générées
- La page de référence qui montre chaque jeton appliqué
- Les contrastes mesurés, et ceux qui ne passent pas, nommés
Les fonctionnalités qui servent ici.
Les questions qu’on nous pose.
Et s’il en manque une, le Discord répond plus vite que cette page.
Un agent respecte-t-il vraiment ces valeurs ?
Il les LIT : ce qui est déposé et validé dans le design du projet fait autorité, et sa consigne lui dit de les lire avant d’inventer une couleur. C’est la différence entre une documentation et une référence.
Faut-il un outil dédié ?
Pas pour commencer. Une création du Studio qui porte les jetons, plus les variables générées, couvre la quasi-totalité des besoins d’une agence. Un outil dédié se justifie à partir de plusieurs produits partageant un même socle.
Et si le client a déjà une charte PDF ?
On la relève et on la transforme en valeurs utilisables : un PDF ne se lit pas par du code. C’est souvent l’occasion de découvrir que la charte dit deux choses différentes à deux pages d’écart.
Dans la même famille.
Maquettes de site
Des pages ambitieuses, bureau et mobile dans le même fichier, corrigées à la zone près.
Écrans d’application
Tableaux de bord, formulaires, parcours : les écrans d’un produit, avec tous leurs états.
Prototypes cliquables
Les écrans reliés entre eux, animés, montrés au client par un simple lien.
Parcours et wireframes
L’arborescence et les écrans en gris, pour décider des pages avant la couleur.