Donne du style à tes supports : crée ton design system

Niveau de difficulté : ✯☆☆

Préambule

Fais le test, il est amusant.

Prends un texte que tu as écrit ou généré, et demande à quatre IA différentes d’en faire un diaporama. Pose-leur la même question, par exemple :

« À partir de ce texte, crée un diaporama de 5 diapositives. Je veux un rendu professionnel et soigné : choisis une palette de couleurs cohérente, une typographie lisible, et une mise en page aérée. »

Puis mets les quatre résultats côte à côte.

Tu vas voir quatre styles différents. Le dégradé violet un peu trop enthousiaste de l’un. La sobriété noir et blanc, presque austère, de l’autre. Le fond crème avec cette pointe d’orange terracotta pour le troisième. Et le bleu corporate avec les icônes Fluent pour Copilot qui applique toujours le « superbe » système visuel de Microsoft.

Ce n’est pas un hasard, et ce n’est pas non plus un caprice esthétique. Chaque modèle a été entraîné sur des exemples de design différents, avec ses propres couleurs, polices et habitudes de mise en page. Et si tu ne lui dis rien, il te proposera son style par défaut.

La bonne nouvelle, c’est que tu peux lui imposer ta propre esthétique. C’est d’ailleurs à ça que sert un design system, un ensemble de règles visuelles écrites noir sur blanc, que tu fournis au modèle pour qu’il applique ton style plutôt que le sien.

Le terme sonne comme un truc d’agence de communication hors de prix. C’est en réalité l’un des outils les plus efficaces que je connaisse pour un formateur qui produit des supports. Dans sa version minimale, quelques lignes suffisent. Dans sa version complète, c’est un fichier (ou mieux dossier) structuré que tu prépares une fois, puis que tu réutilises indéfiniment. Tu le colles ou le joints à ta conversation, et ta demande devient aussi simple que : « Voici mon design system. Utilise-le pour mettre en forme ce diaporama. »

Cet article fait le tour des cinq grands acteurs, explique comment leur emprunter leur style, et, surtout, comment fabriquer le tien.

C’est quoi, un design system

Tu en connais déjà un, même si tu ne l’appelles pas comme ça.

Ton établissement a une charte graphique. Le logo va en haut à gauche. Le bleu institutionnel, c’est celui-là et pas un autre. Les titres sont dans cette police, le corps de texte dans celle-là. On ne met pas de Comic Sans sur un courrier officiel (c’est écrit quelque part, ou au moins compris de tous).

Un design system, c’est ça, mais écrit noir sur blanc et assez précis pour qu’une machine puisse l’appliquer.

Six éléments, et pas un de plus :

⚠️ Ce n’est pas une palette de couleurs
L’erreur classique consiste à croire qu’un design system se résume à trois codes hexadécimaux. Ce qui fait le travail, c’est la cohérence de l’ensemble : le même écart entre les titres, la même épaisseur de trait, la même façon de signaler une information importante. C’est cette régularité que l’œil lit comme « professionnel », bien avant les couleurs.

Pourquoi ça te concerne vraiment

Parce que sans consigne, le modèle improvise. Et son improvisation a un goût très repérable : dégradés violets, icônes rondes, gros titres centrés. Ce style existe, il a même un surnom peu flatteur dans le métier, et le problème n’est pas qu’il soit laid, c’est qu’il est reconnaissable. Un support qui ressemble à ce que produisent des millions de gens ne dit rien de ton établissement.

Parce que ça compense un manque de compétence en design, et sans complexe. Je ne suis pas graphiste. Toi non plus, probablement. Un design system, c’est exactement la béquille qui permet de produire quelque chose de propre sans savoir composer une page.

Parce que ça rend tes supports cohérents entre eux. Douze fiches produites sur six mois avec le même système se ressemblent. Douze fiches produites au fil de l’humeur, non. Et pour un apprenant adulte qui jongle entre trois modules après sa journée de travail, cette régularité n’est pas cosmétique : elle réduit la charge mentale. Il sait où chercher l’objectif, où trouver le rappel, où est l’exercice.

Parce que ça se réutilise indéfiniment. Un design system s’écrit une fois. Ensuite, c’est un bloc de texte que tu colles dans n’importe quelle conversation avec n’importe quel modèle.

Les cinq styles

Voici ce que produisent les cinq grandes familles quand on les laisse faire, et à quoi chacune sert le mieux.

Google : le style expressif

Google fait tourner ses interfaces sur Material Design, dont la dernière évolution, présentée en mai 2025, s’appelle Material 3 Expressive. C’est le système le plus documenté du lot, et il est librement consultable.

Le mot d’ordre : expressive, justement. Là où la version précédente misait sur la personnalisation par la couleur, celle-ci mise sur le ressenti : mouvements qui obéissent à une physique, surfaces qui ont de l’épaisseur, typographie qui se permet d’être grande et affirmée. La couleur n’y est plus décorative : elle sert à diriger le regard et à signaler ce qui compte.

À quoi ça te sert : tout ce qui doit être vivant et lisible sur un écran. Supports de cours projetés, tableaux de bord, documents destinés à des apprenants qui liront sur téléphone. Google fournit des maquettes Figma et un générateur de thème qui construit une palette complète à partir d’une seule couleur, pratique pour partir de ton bleu institutionnel.

Le revers : c’est un système conçu pour des applications. Appliqué à un document imprimé, ça peut faire un peu « écran d’Android ».

Anthropic : le style éditorial

L’identité de Claude se reconnaît au premier coup d’œil, et elle tranche avec les autres.

Une base crème plutôt que blanche (#faf9f5), un texte presque noir mais pas tout à fait (#141413), et un accent orange terracotta (#d97757) accompagné d’un bleu doux et d’un vert olive. Côté polices, Anthropic combine un caractère sans empattement pour les titres et un caractère à empattements pour le texte, la recette classique du livre bien fait.

Le résultat évoque le papier, la revue imprimée, la note de lecture.

À quoi ça te sert : tout ce qui se lit longtemps. Syllabus, dossiers pédagogiques, documents à imprimer, articles. Le fond crème fatigue nettement moins qu’un blanc pur sous un néon de salle de cours.

Le revers : peu de contraste franc. Pour un support projeté au fond d’une salle, il faut renforcer.

OpenAI : le style silencieux

OpenAI a refondu son identité récemment, autour d’une police maison, OpenAI Sans, et d’un motif central appelé « le point » : un cercle noir, celui du curseur, d’où part la réponse.

Le système est quasi monochrome, construit sur un noir très profond légèrement teinté, avec beaucoup de blanc et une typographie de nature éditoriale. Le mot qui revient chez les gens qui l’analysent est « retenue ». C’est un laboratoire de recherche habillé pour sortir en ville : clinique, sobre, volontairement discret.

À quoi ça te sert : tout ce qui doit avoir l’air sérieux et ne pas se faire remarquer. Rapports, notes au conseil, dossiers d’agrément, documents administratifs. Quand le contenu doit passer avant la forme, c’est le bon choix.

Le revers : en formation, un support entièrement gris peut être perçu comme froid. Prévois une couleur d’accent, une seule.

Moonshot : le style précis

Kimi, le modèle de Moonshot AI, s’appuie sur un système d’identité étonnamment abouti pour un acteur aussi récent.

Un bleu franc (#007CFF) en couleur signature, avec un cyan électrique et un violet pâle en appui. Trois polices, chacune avec un rôle assumé : une pour l’efficacité fonctionnelle, une à chasse fixe pour la précision technique, une troisième plus littéraire pour la chaleur. Et une signature visuelle maison, une texture générée par algorithme, qui traduit des données en motifs.

La formule qu’ils revendiquent : la rigueur de la technique mêlée à la nuance de l’humanisme.

À quoi ça te sert : les contenus techniques ou scientifiques. Le bleu franc structure, la police à chasse fixe rend les extraits de code et les formules parfaitement lisibles. Si tu enseignes l’informatique, la comptabilité ou les sciences, c’est un système très fonctionnel.

Le revers : le bleu électrique est assez daté « tech », à doser pour un public non technique.

Microsoft : le style corporate

Copilot s’appuie sur Fluent Design, le système visuel qui unifie Windows, Office et l’ensemble des produits Microsoft. C’est le plus institutionnel des cinq.

Un bleu corporate reconnaissable entre mille, des icônes Fluent aux lignes épurées, une typographie sobre (Segoe UI), et beaucoup de blanc. Le système mise sur la familiarité : si tes apprenants utilisent déjà Word ou PowerPoint, ils sont chez eux.

Microsoft a intégré un Brand Kit directement dans l’application Microsoft 365 Copilot. Si ton établissement dispose d’un abonnement Copilot, tu peux y téléverser tes logos, tes couleurs, tes polices et même ta charte graphique en PDF : Copilot extrait les règles et les applique ensuite à tes créations. Dans PowerPoint, un outil appelé Brand Reviewer vérifie tes diapositives et suggère des corrections pour respecter ta charte. La création d’un kit officiel est réservée aux utilisateurs désignés « brand managers » par l’administrateur, mais une fois publié, tout le monde dans l’organisation peut l’utiliser.

À quoi ça te sert : tout ce qui doit s’intégrer à l’écosystème Microsoft. Supports de cours destinés à être modifiés dans PowerPoint, documents Word, équipes qui travaillent déjà dans Teams. L’avantage : beaucoup d’enseignants y ont accès via leur compte professionnel.

Le revers : très marqué « entreprise ». Pour un public jeune ou créatif, ça peut sembler rigide.

Le tableau comparatif

💡 Une distinction à garder en tête
Ce que tu vois ci-dessus, c’est l’identité de l’entreprise. Ce que le modèle produit par défaut quand tu ne demandes rien s’en rapproche souvent, mais ce n’est pas garanti et ça bouge à chaque mise à jour.
La bonne nouvelle : n’importe quel modèle sait appliquer n’importe lequel de ces systèmes, du moment que tu le décris. Tu n’es pas obligé d’utiliser Claude pour obtenir un rendu crème.

Les outils intégrés

Certains éditeurs ont poussé la logique jusqu’au produit. Claude Design (Anthropic, avril 2026) lit tes fichiers existants, en déduit un design system, et l’applique automatiquement aux projets suivants, avec export vers Canva, PDF, PPTX ou HTML. Google Stitch génère des interfaces complètes à partir d’un prompt et gère les thèmes visuels.

Gemini passe par l’intégration Canva : tu relies ton Brand Kit, et les designs générés respectent ta charte. Le Brand Kit, c’est l’endroit où Canva stocke ton identité visuelle : logos (en plusieurs versions selon les fonds), palette de couleurs avec leurs codes exacts, polices de titres et de corps. Une fois configuré, tu n’as plus à chercher tes couleurs ni à importer ton logo : tout est accessible dans chaque création, et l’IA s’en sert pour générer des visuels cohérents. Notre ancien collègue Greg, qu’on n’oublie pas, a réalisé une vidéo qui explique comment obtenir gratuitement la licence Canva Éducation, qui donne accès au Brand Kit et à toutes les fonctionnalités premium.

Côté ChatGPT, pas d’équivalent intégré : la solution est de créer un GPT personnalisé qui embarque ton système dans ses instructions. Pour Copilot, le Brand Kit est décrit plus haut dans la section Microsoft.

Comment t’en servir, concrètement

Trois méthodes, de la plus rapide à la plus solide.

1. Nommer une ambiance dans ton prompt

Le geste des trente secondes. Tu ajoutes une phrase à ta demande :

Applique ce style : fond crème (#faf9f5), texte presque noir (#141413),
un seul accent orange terracotta (#d97757). Titres sans empattement,
corps de texte avec empattements. Beaucoup de marges. Aucun dégradé,
aucune icône décorative.

Ne demande pas « fais-le dans le style de Claude » : le modèle n’a pas forcément la même définition que toi. Décris ce que tu veux voir. Les codes couleur exacts font quatre-vingts pour cent du travail.

2. Écrire ton propre design system, une fois pour toutes

C’est la méthode qui rapporte, et elle prend une heure.

Ouvre la charte graphique de ton établissement (ou, à défaut, regarde ton site et relève ce qui s’y trouve). Puis écris un fichier texte de vingt lignes :

# Système visuel de [ton établissement]

## Couleurs
Fond : #ffffff
Texte : #1a1a1a
Accent principal : #003f7f   (bleu institutionnel)
Accent secondaire : #f2a900
Alerte : #c0392b

## Typographie
Titres : Poppins, gras
Corps : Lora, 16 px, interligne 1,6
Jamais plus de deux polices dans un document.

## Règles
Un seul accent de couleur par page.
Marges généreuses : trame de 8 px.
Coins arrondis à 8 px.
Aucun dégradé, aucune ombre portée.
Les tableaux ont une ligne d'en-tête colorée, le reste en blanc.

## Blocs récurrents
Objectifs : encadré à filet gauche, couleur accent.
À retenir : fond gris très clair, coins arrondis.
Attention : filet gauche rouge, jamais de fond rouge.

Range ce fichier dans l’espace partagé de ton équipe. Ensuite, tu le colles en tête de chaque conversation, et tous les supports produits par tous tes collègues se ressemblent, quel que soit le modèle utilisé.

💡 Pourquoi en markdown
Parce que c’est du texte : lisible par toi, lisible par n’importe quelle IA, indépendant de tout logiciel, et modifiable par un collègue qui n’y connaît rien. C’est exactement l’argument développé dans l’article sur le markdown.

3. Laisser l’outil lire ta charte

C’est ce que propose Claude Design : tu fournis tes fichiers existants, il en déduit le système et l’applique tout seul aux projets suivants. Confortable, mais réservé aux abonnements payants, et surtout, ça t’enferme chez un fournisseur.

Mon conseil : commence par la méthode 2. Un design system écrit à la main dans un fichier texte fonctionne partout, ne coûte rien, et t’appartient.

L’appliquer à tes schémas

C’est l’usage où le résultat saute le plus aux yeux, et la raison pour laquelle cet article existe.

Tu as un schéma mermaid. Il est juste, il est gris. Tu ajoutes ta palette :

flowchart TD
    A["Candidature"] --> B["Entretien d'accueil"]
    B --> C{"Prérequis validés ?"}
    C -->|Oui| D["Inscription"]
    C -->|Non| E["Module préparatoire"]

    classDef etape fill:#ffffff,stroke:#003f7f,stroke-width:2px,color:#1a1a1a
    classDef choix fill:#f2a900,stroke:#003f7f,stroke-width:2px,color:#1a1a1a
    class A,B,D,E etape
    class C choix

flowchart TD
    A["Candidature"] --> B["Entretien d'accueil"]
    B --> C{"Prérequis validés ?"}
    C -->|Oui| D["Inscription"]
    C -->|Non| E["Module préparatoire"]

    classDef etape fill:#ffffff,stroke:#003f7f,stroke-width:2px,color:#1a1a1a
    classDef choix fill:#f2a900,stroke:#003f7f,stroke-width:2px,color:#1a1a1a
    class A,B,D,E etape
    class C choix

Deux lignes de style, et le schéma est aux couleurs de ton établissement. Multiplie par les quarante schémas de ton équipe : voilà de la cohérence obtenue sans réunion.

Et si tu veux aller plus loin, demande au modèle de redessiner le même contenu en image vectorielle dans ton système. Le mermaid reste ta source de vérité, l’image est un tirage (cette distinction est développée dans l’article sur mermaid).

Les pièges

Le contraste. C’est le seul piège qui ait des conséquences réelles. Un gris clair sur fond crème, c’est joli à l’écran de ton portable et illisible pour un apprenant malvoyant, ou simplement au fond d’une salle mal éclairée. La règle admise : un rapport de contraste d’au moins 4,5 pour 1 entre le texte et son fond. Des vérificateurs gratuits en ligne te le calculent en collant deux codes couleur. Fais-le une fois pour ta palette, tu es tranquille ensuite.

L’usurpation d’identité visuelle. Tu peux t’inspirer d’un système, décrire une ambiance, reprendre une logique de composition. Tu ne peux pas utiliser le logo d’une entreprise, ni faire passer un document pour émanant d’elle. Les polices maison (OpenAI Sans, celles d’Anthropic) sont sous licence et ne sont pas à toi.

La charte de ton établissement passe avant. Si elle existe, c’est elle qui gagne. Le design system d’un modèle est une source d’inspiration, pas un remplacement. Un document officiel de ton école aux couleurs d’Anthropic, c’est une drôle d’idée.

Trop de règles tue la règle. Un système de vingt lignes qu’on applique vaut mieux qu’un manuel de trente pages qui dort dans un dossier. Commence petit : trois couleurs, deux polices, une trame d’espacement.

Les polices exotiques. Si tu choisis une police que personne n’a, ton document s’affichera dans autre chose chez tes collègues. Reste sur ce qui est disponible partout, ou sur les polices libres de Google Fonts.

Et concrètement, tu en fais quoi ?

Pour toi, tout seul. Écris tes cinq lignes (trois couleurs, deux polices) et garde-les dans une note. Colle-les dans ta prochaine demande de support. Compare avec ce que tu obtenais avant. L’écart te surprendra, et l’investissement était de cinq minutes.

Pour ton équipe ou ton établissement. Là, ça devient un vrai projet, et un projet rentable. Une heure à trois personnes suffit : ouvrir la charte graphique, en extraire les six éléments du tableau du début, écrire le fichier, le déposer dans l’espace partagé.

Ce que tu obtiens ensuite dépasse la question esthétique. Tes collègues produisent des supports cohérents sans se concerter. Un nouveau formateur trouve le fichier et s’aligne dès sa première fiche. Et le jour où l’établissement change son bleu, tu modifies une ligne au lieu de reprendre deux cents documents.

💡 L’argument qui passe en réunion
Ne parle pas de design system. Dis : « on écrit noir sur blanc nos couleurs et nos polices, dans un fichier, pour que tout ce qu’on produit avec l’IA ressemble à notre école. » C’est la même chose, et personne ne lève les yeux au ciel.

Verdict

Un design system, ce n’est pas du luxe de graphiste. C’est la mise par écrit d’un savoir tacite, celui que ton établissement possède déjà, mais que personne n’a jamais formulé assez précisément pour qu’une machine puisse l’appliquer.

Les cinq styles que je viens de décrire ne sont pas des modèles à copier : ce sont des exemples de ce que produisent les IA quand on ne leur dit rien. Le vrai objectif, c’est de construire ton système.

Et tu n’as pas besoin de partir de zéro. Demande à ton IA favorite de créer un design system à partir de ce que tu as déjà : ta charte graphique en PDF, une capture d’écran de ton site web, un document que tu trouves réussi. L’IA extraira les couleurs, les polices, les règles de mise en page, et te proposera un système structuré. Tu ajustes, tu complètes, et tu obtiens quelque chose qui te ressemble, pas un énième dégradé violet.

Le résultat peut tenir en vingt lignes si tu débutes, ou devenir un dossier complet si tu veux aller plus loin, avec tes variables de base (codes couleurs, tailles, espacements), des composants réutilisables, des modèles de pages. L’important, c’est que ce soit écrit, réutilisable, et surout à toi.

Pour les plus geeks

Tout ce qui précède fonctionne aussi avec un modèle d’IA local. Si tu fais tourner Ollama, LM Studio ou llama.cpp sur ta machine, tu peux coller ton design system dans le prompt système ou dans un fichier de contexte, exactement comme avec les modèles en ligne.

Un modèle comme Qwen 3.8 27B comprend très bien les instructions de mise en forme. Un fichier markdown avec tes couleurs, tes polices et tes règles suffit. L’avantage : tes données ne quittent jamais ton ordinateur, et tu ne paies pas à l’usage.

Pour aller plus loin

• Material Design 3 : le système de Google, documentation complète et générateur de thème
• Google Stitch : l’outil de design IA de Google, gratuit
• Claude Design : l’annonce d’Anthropic, avril 2026
• Fluent Design : le système visuel de Microsoft
• Kimi Brand Book : le système d’identité de Moonshot AI
• Google Fonts : des polices libres, gratuites et disponibles partout
• Écris une fois, publie partout : apprivoise le markdown
• Dessine tes schémas en les écrivant : découvre mermaid