Qu'est-ce qu'un design system ? Le guide pour les non-designers
Un design system, c'est la norme de dessin de votre marque : couleurs, polices, logo et modèles que tout le monde respecte. Donnez-le à Claude, et vos présentations, rapports et sites web ressembleront à votre entreprise, sans retouches.
01En bref : qu'est-ce qu'un design system
Un design system est un ensemble commun de règles et d'éléments qui définit l'apparence et le ton de votre marque : couleurs, polices, espacements, logo, icônes, composants (boutons, tableaux, cartes), ton rédactionnel et modèles de documents.
Au lieu de se demander à chaque présentation quel bleu et quelle police utiliser, les choix sont écrits une fois pour toutes, à un seul endroit. Toute personne qui produit quelque chose pour l'entreprise, Claude compris, suit les mêmes règles.
Les design tokens sont les petites valeurs précises qui se trouvent en dessous : « couleur principale = #003B71 », « police des titres = Heebo Bold », « espacement de base = 8 px ». Ce sont les chiffres du système, comme les valeurs de calcul dans un tableau de norme.
02Comme une norme de dessin, mais pour le visuel
Un bureau d'études a sa norme de dessin : quels calques, quels types et épaisseurs de traits, à quoi ressemble le cartouche et où placer les notes. Grâce à elle, tous les plans se ressemblent, quel que soit le dessinateur. Un design system, c'est exactement cela, pour les présentations, les rapports, les sites web et les affiches.
03Ce que contient un design system
Couleurs
2–3 couleurs de marque avec leur code hexadécimal exact, plus des couleurs pour les fonds, le texte, les avertissements et les messages de réussite.
Polices
Une police pour les titres et une pour le texte courant, avec des tailles fixes. Pour l'hébreu, choisissez des polices qui gèrent bien à la fois l'hébreu et l'alphabet latin.
Espacements et mise en page
Des marges, des écarts et une grille fixes, pour que les pages soient nettes et non éparpillées.
Logo et icônes
Les versions du logo (couleur, blanc, noir), sa taille minimale et ce qu'il ne faut pas en faire. Un seul jeu d'icônes cohérent.
Composants
Boutons, tableaux, cartes, en-têtes de page, encadrés de notes. Chacun est défini une fois et réutilisé partout.
Ton rédactionnel et modèles
La façon dont l'entreprise écrit (formelle ? directe ?), plus des modèles prêts à l’emploi pour un rapport, un devis, une présentation et une fiche produit.
04Comment cela fonctionne avec l'IA
- 1RassemblerLogo, couleurs, polices et un bon document type
- 2DocumenterUn seul fichier de charte graphique, source unique de référence
- 3Le donner à ClaudeSous forme de fichier, de Skill ou de design system dans Claude Design
- 4DemanderUne présentation, un rapport, une page d'atterrissage ou une affiche
- 5ObtenirUn résultat aux couleurs de votre entreprise, sans corrections manuelles
05Des design systems publics connus
Material Design
Le design system de Google, utilisé dans Android et dans de nombreuses applications. Un bon exemple de documentation claire.
Carbon
Le design system d'IBM, particulièrement adapté aux interfaces riches en données et aux tableaux de bord.
Fluent
Le design system de Microsoft, à l'origine de l'apparence de Windows et d'Office.
GOV.UK Design System
Le système du gouvernement britannique. Idéal pour apprendre la simplicité, l'accessibilité et l'écriture claire.
06Entreprise d'ingénierie : couverture de rapport et masque de diapositive
07Une page d'atterrissage à votre image
08Une fiche technique produit
09Un mini design system en 30 minutes
- 1
Rassemblez le logo
Un fichier de bonne qualité (SVG ou PNG transparent), en version couleur et en version blanche.
- 2
Choisissez 2–3 couleurs
Notez le code hexadécimal et le rôle de chacune : principale, secondaire, d'accent.
- 3
Choisissez 2 polices
Une pour les titres, une pour le texte courant, toutes deux compatibles avec l'hébreu et l'alphabet latin, et vérifiez que la licence autorise un usage commercial.
- 4
Ajoutez un document type
Le rapport ou la présentation que vous préférez. Claude y apprend la mise en page, les tableaux et le ton.
- 5
Demandez à Claude de rédiger la charte
« Rédige à partir de tout cela une courte charte graphique : couleurs, polices, espacements, tableaux, ton et exemples. » Relisez-la et corrigez-la.
- 6
Gardez-la à un seul endroit
Transformez-la en Skill, ajoutez-la à un Project ou configurez-la dans Claude Design, et utilisez-la à chaque demande.
10Que choisir pour chaque tâche
| Tâche | Élément du design system | Outil recommandé |
|---|---|---|
| Présentation client | Couleurs, polices, masque de diapositive | Claude Design, ou un modèle PowerPoint |
| Rapport d'ingénierie (PDF ou Word) | Page de couverture, tableaux, titres | Skill de marque dans Claude, ou un modèle Word |
| Page d'atterrissage ou site web | Composants, boutons, espacements | Claude Design ou un Artifact |
| Publication sur les réseaux sociaux ou affiche | Logo, couleurs, ton rédactionnel | Canva avec un Brand Kit via le connecteur |
| Interface d'application | Composants et design tokens | Bibliothèque Figma via le connecteur Figma |
| Fiche technique produit | Modèle de fiche technique, style des tableaux | Skill de marque dans Claude |
| E-mail ou devis | Ton rédactionnel, signature, logo | Skill de marque ou modèle Word |
11Pièges : à faire et à éviter
À faire
- Une source unique de référence, avec une date de version
- Des polices sous licence adaptée (par exemple Google Fonts)
- Vérifier le contraste : texte foncé sur fond clair, ou l'inverse
- Mettre à jour la Skill ou le design system dès que quelque chose change
À éviter
- Cinq fichiers « charte définitive » dans des dossiers différents
- Importer une police commerciale sans vérifier que vous en avez le droit
- Du texte gris clair sur fond blanc, difficile à lire
- Compter sur l'IA pour « se souvenir » de vos couleurs sans fichier
12Questions fréquentes
Nous sommes un petit bureau. N'est-ce pas excessif ?
Non. Une page avec un logo, 3 couleurs, 2 polices et un rapport type, c'est déjà un design system. Il fait gagner du temps dès le premier document.
Qu'est-ce que Claude Design et qui peut l'utiliser ?
Un outil d'Anthropic (en version préliminaire de recherche) qui construit un design system à partir de vos fichiers (code, présentations, PDF, logos) et l'applique à chaque projet. Il est disponible avec les offres payantes ; dans les organisations, un administrateur doit l'autoriser. Les détails évoluent, consultez donc support.claude.com.
Puis-je faire sans Claude Design ?
Oui. Un fichier de charte graphique joint à une conversation ou à un Project, ou une Skill (voir Procédures pour l'IA), suffit. Claude le lit et le respecte.
Et Canva et Figma ?
Si vous travaillez avec ces outils, les connecteurs (voir Claude rejoint vos outils) permettent à Claude d'agir dans votre compte, par exemple d'utiliser un Brand Kit Canva ou de rechercher des composants dans une bibliothèque Figma. Ce qui est disponible dépend de votre abonnement dans chaque outil.
Comment savoir si mes couleurs sont accessibles ?
Vérifiez le rapport de contraste entre le texte et le fond. Les WCAG exigent au moins 4,5:1 pour un texte de taille normale. Vous pouvez tout simplement demander à Claude de vérifier vos paires de couleurs.