Design system pour Claude : une IA fidèle à votre marque

Un design system pour Claude fixe votre charte graphique sous forme de règles que Claude peut lire. Il contient des tokens pour les couleurs, la typographie et les espacements, des composants avec leur mode d’emploi, et ce qui est interdit. Sans cet ensemble, Claude devine à chaque demande ; avec lui, votre site, vos présentations et vos annonces portent la marque d’une seule et même entreprise.

Nous avons créé notre propre système dans Claude Design, et il pilote notre site web, nos présentations et nos annonces. Si vous envisagez la création de site web avec l’IA, demandez à votre prestataire s’il en utilise un. Voici ce qu’il doit contenir, pourquoi Claude travaille de façon plus cohérente grâce à lui, et comment est construit notre propre système, Editorial.

Ce qu’il contient : tokens, composants et règles

Un design system utilisable compte trois couches. Les tokens sont les plus petites briques : couleurs, polices, tailles, espacements. Le groupe communautaire du W3C consacré aux design tokens les présente comme la source unique de vérité pour ces choix, et a publié en octobre 2025 un premier format stable ^[1].

Les composants sont les blocs de construction : bouton, carte, étiquette, tableau. Pour chacun, on précise quand l’utiliser et à quoi il ressemble. Les règles disent ce qui est interdit, en phrases que l’on peut vérifier.

Pourquoi Claude devient plus cohérent

Claude n’emporte rien d’une session à l’autre, sauf si vous le lui donnez. Dans Claude Code, c’est le rôle d’un CLAUDE.md : le fichier est chargé au début de chaque session ^[2]. Anthropic écrit que Claude suit les instructions de façon plus cohérente quand elles sont plus précises et plus concises ^[2].

« Utilisez notre charte graphique » fonctionne donc mal. « Jamais de canari comme couleur de texte sur le papier » fonctionne bien. Il existe deux autres façons de transmettre votre système à Claude :

• Sous forme de Skill. Un dossier avec un SKILL.md, des instructions et des fichiers que Claude ne charge que lorsqu’une tâche le demande ^[3]. Les Skills personnalisés fonctionnent dans Claude Code, l’API et claude.ai ; sur claude.ai, chaque utilisateur les charge lui-même ^[3].
• Dans Claude Design. En research preview depuis le 17 avril 2026 pour Pro, Max, Team et Enterprise. Au démarrage, il construit un design system à partir de votre codebase et de vos fichiers de design, et chaque projet suivant reprend automatiquement vos couleurs, votre typographie et vos composants ^[4].

Le principe reste le même : une seule source, lue partout. N’utilisez toutefois que des Skills d’une source de confiance, car un Skill peut aussi faire exécuter du code à Claude ^[3].

Comment Editorial est construit

Notre système s’appelle Editorial. Claude Design l’a livré en un seul paquet : un design.md avec les règles, un jeu de tokens, des composants accompagnés chacun d’une courte instruction pour Claude, un brand book en HTML et un SKILL.md. Pour les autres canaux, il contient des modèles de présentations en néerlandais et en français, de posts pour les réseaux sociaux et d’annonces animées.

Comment nous avons construit izoard.be avec ce système : lisez créer izoard.be avec Claude.

Les choix principaux :

• Une couleur de marquage et une couleur de texte. Le canari est un aplat : barres de marquage, ruban, boutons. Les accents de texte sont en or. Selon notre calcul avec la formule WCAG, le canari sur le papier atteint 1,23:1 et l’or 4,77:1. Les WCAG demandent au moins 4,5:1 pour du texte courant ^[5].
• Des tokens sémantiques pour le thème sombre. --on-kanarie reste d’un noir chaud dans les deux thèmes. Les bandes sombres restent sombres grâce à --ink-band et --on-band.
• Des couleurs d’évolution réservées aux données. Le vert, l’ambre et le rouge (--pos, --mid, --neg) ne colorent que la colonne des écarts dans les tableaux, et les signes +, ± et − restent affichés.
• Deux polices, auto-hébergées. Chakra Petch pour les titres en majuscules, JetBrains Mono pour les étiquettes. Il n’y a pas de fichier italique séparé ; c’est le navigateur qui crée l’italique.
• Des animations au défilement uniquement en CSS, sans script par page.

Ce dernier point semble un détail, mais il garde les pages légères. Pourquoi cela compte : lisez Core Web Vitals expliqués.

L’épreuve des faits : un rebranding en tokens

En juillet 2026, notre accent orange est entré en conflit avec celui de la marque mère, ClickTrust. Nous l’avons remplacé par le canari et l’or. Comme les pages utilisaient des tokens et non des codes couleur isolés, le changement s’est fait en grande partie à un seul endroit.

Les anciens noms --acc et --acc2 sont devenus des alias de l’or et du canari, pour que les anciennes règles continuent de fonctionner. Une seule feuille de style a ensuite donné les nouvelles couleurs à tout le site, dans les trois langues.

Comment démarrer votre propre design system

Pas besoin d’une équipe de designers pour commencer. Commencez petit et laissez-le grandir :

1. Partez de l’existant : votre logo, votre brand book, la page qui vous plaît le plus.
2. Donnez aux tokens un nom qui dit leur rôle, comme --on-kanarie, pas seulement leur couleur.
3. Écrivez chaque règle comme une phrase vérifiable, avec « jamais » ou « toujours ».
4. Donnez pour chaque composant un bon et un mauvais exemple.
5. Contrôlez le contraste de chaque couleur de texte sur son fond.
6. Placez-le là où Claude le lit, et gardez une seule version comme source.

Les annonces demandent la même discipline. Comment créer avec l’IA des images et des vidéos fidèles à votre marque, Clément l’explique dans de la photo produit à la pub vidéo.

Vous vous demandez si votre site actuel est construit de façon cohérente, et si les robots d’IA et Google le lisent bien ? Le scan de site gratuit fait le point.