Style guide, charte graphique, design system : quelles différences

Charte graphique — Le document fondateur : logo, couleurs, typographie, règles d’utilisation. Orienté print et marque (voir notre guide dédié)
Style guide — Extension digitale de la charte : composants UI, patterns d’interaction, ton de voix, règles de contenu. Orienté produit digital
Design system — Le style guide implémenté en code : composants React/Vue réutilisables, tokens CSS, documentation interactive. Orienté équipe de développement

Ce guide couvre le style guide — le pont entre la charte graphique statique et le design system codé. C’est le document que vous partagez avec votre équipe, vos freelances et vos clients pour garantir la cohérence visuelle de votre produit digital.

Structure d’un style guide digital complet

1. Principes de design

3-5 principes qui guident toutes les décisions de design. Ils servent de filtré quand il y a un doute. Exemples pour ITSkillsCenter :

Clarté avant tout — L’information doit être comprise en un coup d’œil. Pas de jargon, pas d’ambiguïté
Mobile natif — Chaque design est conçu pour mobile d’abord, puis étendu au desktop
Accessible par défaut — WCAG AA minimum. Si quelqu’un ne peut pas utiliser notre produit, c’est notre faute
Cohérence > créativité — Un composant existant réutilisé est toujours préférable à un nouveau composant créé

2. Design Tokens

/* Couleurs */
:root {
  /* Primitives */
  --blue-50: #EFF6FF;   --blue-500: #3B82F6;   --blue-900: #1E3A8A;
  --gray-50: #F9FAFB;   --gray-500: #6B7280;   --gray-900: #111827;
  --green-500: #10B981;  --red-500: #EF4444;    --yellow-500: #F59E0B;

  /* Semantic (rôles) */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-500);
  --color-bg: #FFFFFF;
  --color-bg-subtle: var(--gray-50);
  --color-border: #E5E7EB;
  --color-success: var(--green-500);
  --color-error: var(--red-500);
  --color-warning: var(--yellow-500);

  /* Spacing (multiples de 4) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* Border radius */
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 16px; --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Cabinet Grotesk', var(--font-sans);
}

3. Composants UI documentés

Chaque composant dans votre style guide doit inclure :

Visuel — Tous les états (default, hover, activé, disabled, error, loading)
Spécifications — Dimensions, padding, couleurs, typographie exacte
Usage — Quand utiliser ce composant, et quand NE PAS l’utiliser
Do / Don’t — Exemples de bon et mauvais usage avec explications
Code — Snippet HTML/CSS prêt à copier (ou lien vers Storybook)

Composants essentiels à documenter :

Boutons (primary, secondary, ghost, danger, sizes SM/MD/LG)
Inputs (text, email, tel, select, textarea, checkbox, radio)
Cards (product, blog, testimonial, pricing)
Navigation (header, sidebar, breadcrumbs, tabs)
Feedback (alerts, toasts, badges, progress bars)
Layout (grille, spacing, containers, sections)

4. Iconographie

Bibliothèque choisie : Lucide Icons (ou Phosphor, Heroicons) — une seule bibliothèque, jamais de mélange
Style : Outline, stroke-width 1.5px
Tailles : 16px (inline), 20px (UI), 24px (navigation), 32px+ (features)
Couleur : currentColor par défaut (hérite de la couleur du texte parent)

5. Ton de voix et contenu

Vouvoiement en français standard, tutoiement acceptable dans les contenus éducatifs et réseaux sociaux
Phrases courtes — Maximum 20 mots par phrase dans l’interface. Le français peut être verbeux — combattez cette tendance
Verbes d’action — « Créer un compte » > « Création de compte ». « Voir les formations » > « Formations disponibles »
Messages d’erreur — Problème + solution. « Adresse email invalide. Vérifiez le format : nom@exemple.com » > « Erreur »
Vide states — Toujours un message utile + CTA. « Aucune formation trouvée. Essayez d’autres filtres ou explorez toutes nos formations. »

Outils pour créer et maintenir votre style guide

Figma — Créez votre style guide comme bibliothèque partagée. Composants, styles de couleur, styles de texte. Gratuit pour les équipes jusqu’à 3 personnes
Storybook — Documentation interactive de composants codés (React, Vue, Angular). Le composant live + sa documentation côte à côte. Open source et gratuit
Zeroheight — Synchronise automatiquement avec Figma et le code. Génère un site de documentation. Plan gratuit disponible
Notion — Pour les petites équipes : organisez votre style guide en pages avec des embeds Figma. Simple et collaboratif. Gratuit
Supernova — Convertit votre design system Figma en tokens de code et documentation. Automatisé

Processus de création : 5 jours

Jour 1 : Audit visuel — Capturez tous les composants existants de votre site/app. Identifiez les incohérences (3 styles de boutons, 5 nuances de bleu…)
Jour 2 : Tokens — Définissez couleurs, typographie, spacing, radius, shadows. Créez les styles Figma
Jour 3 : Composants — Construisez les composants de base dans Figma avec variants et auto-layout
Jour 4 : Documentation — Écrivez les guidelines d’usage (do/don’t), le ton de voix, les règles de contenu
Jour 5 : Publication — Publiez la bibliothèque Figma, partagez la documentation, formez l’équipe

Maintenir le style guide vivant

Désignez un owner — Une personne responsable des mises à jour et de la cohérence
Changelog — Documentez chaque modification avec date et raison
Revue mensuelle — Vérifiez que le produit réel correspond au style guide. Identifiez les déviations
Contributions — Permettez à l’équipe de proposer de nouveaux composants via un processus clair (PR dans Figma ou GitHub)
Versioning — v1.0, v1.1, v2.0… Les changements majeurs (nouvelles couleurs, nouvelle typo) méritent une nouvelle version

Tarifs au Sénégal

Style guide basique (tokens + 10 composants + doc Notion) — 200 000 – 500 000 FCFA
Style guide pratique (bibliothèque Figma + 30 composants + guidelines) — 500 000 – 1 200 000 FCFA
Design system codé (Storybook + composants React + tokens CSS) — 1 000 000 – 3 000 000 FCFA

Un style guide n’est pas un luxe pour les grandes entreprises. Dès que deux personnes travaillent sur le même produit, la cohérence devient un défi. Investissez 5 jours dans un style guide solide, et chaque décision de design future sera plus rapide, plus cohérente, et moins sujette à débat.

Étape 1 — Auditer l’existant avant de dessiner quoi que ce soit

Un style guide qui ignore l’usage réel finit dans un tiroir. Avant d’ouvrir Figma, collectez tous les supports déjà publiés par la marque : site web, factures Wave ou Mixx by Yas, posts Instagram, fiches produit Jumia, plaquette PDF, signature email. Photographiez aussi les supports physiques — flyers distribués au marché Sandaga ou Treichville, kakémonos d’événement, packaging.

Étalez tout sur une planche Miro ou un mur blanc. Vous verrez immédiatement les écarts : trois variantes de logo, deux bleus différents, quatre polices, des marges incohérentes. Notez chaque incohérence dans un tableau à trois colonnes : élément, version actuelle, fréquence d’usage. Ce document est la fondation du style guide.

Étape 2 — Fixer la mission et les valeurs en une page

Une marque parle d’abord avant de se montrer. Rédigez, en une seule page A4, trois sections courtes : la mission (« ce que nous faisons et pour qui »), trois valeurs maximum (« ce qui ne se négocie pas »), et un manifeste de 80 à 120 mots (« pourquoi nous existons »). Pour une marque ouest-africaine, soyez explicite sur l’ancrage géographique et culturel — préférez « PME francophones d’Afrique de l’Ouest » à « TPE internationales » si c’est votre vraie cible.

Faites valider cette page par un comité de trois personnes maximum (fondateur, responsable produit, responsable communication). Tant que cette page n’est pas signée, ne passez pas à l’étape 3 : tout choix visuel ultérieur en découle.

Étape 3 — Définir la palette de couleurs et ses règles d’usage

Une palette pro tient en cinq couleurs maximum : une primaire (l’identité), une secondaire (l’accent), deux neutres (fond clair, fond sombre), une couleur d’alerte. Pour chaque couleur, notez le HEX, le RGB, le CMJN (pour l’impression chez un imprimeur Sandaga ou Treichville) et le Pantone si vous prévoyez des produits dérivés.

Primaire   #1B4D8F  RGB 27,77,143   CMJN 95,75,0,15   Pantone 287 C
Accent     #F4A261  RGB 244,162,97  CMJN 0,40,65,0    Pantone 1495 C
Neutre+    #FFFFFF  RGB 255,255,255 CMJN 0,0,0,0
Neutre-    #1A1A1A  RGB 26,26,26    CMJN 0,0,0,90
Alerte     #D62828  RGB 214,40,40   CMJN 0,90,90,15

Vérifiez le contraste avec un outil comme WebAIM Contrast Checker : tout texte sur fond doit dépasser un ratio de 4,5 pour 1 (norme WCAG AA). Si la primaire ne passe pas, prévoyez une variante « Texte » plus foncée pour les usages typographiques.

Étape 4 — Choisir et documenter la typographie

Limitez-vous à deux familles : une pour les titres, une pour le corps de texte. Pour un budget zéro, Google Fonts offre des paires solides — Inter (titres) + Source Sans 3 (corps) couvre 95 % des besoins. Pour une marque haut de gamme, achetez une police chez TypeMates ou Pangram Pangram (entre 100 et 400 EUR la licence, soit 65 000 à 260 000 FCFA).

Documentez ensuite, dans le guide, l’échelle typographique exacte :

H1  Inter Bold 48px / line-height 1.1
H2  Inter Bold 32px / line-height 1.2
H3  Inter SemiBold 24px / line-height 1.3
Corps  Source Sans 3 Regular 16px / line-height 1.6
Petit  Source Sans 3 Regular 14px / line-height 1.5

Vous devez voir, dans Figma, ces styles enregistrés sous le panneau « Text styles » et réutilisables en un clic. Toute personne qui crée un nouveau support n’a alors plus à choisir une taille à la main.

Étape 5 — Cadrer le logo et ses zones de protection

Préparez le logo dans cinq formats : SVG (web), PNG transparent 1024 px (réseaux sociaux), PDF vectoriel (impression), JPG fond blanc (signature email), ICO (favicon). Pour chaque format, livrez une version horizontale, une version empilée, une version monochrome.

Définissez la zone de protection : aucun élément ne doit empiéter dans un rayon égal à la hauteur de la lettre principale du logo. Indiquez la taille minimale d’utilisation (par exemple 24 px en hauteur sur écran, 12 mm sur impression) — en dessous, le logo devient illisible et abîme la marque.

Étape 6 — Écrire la charte de ton et de vocabulaire

Le ton est la signature audible de la marque. Décrivez-le en un tableau « On dit / On ne dit pas » d’une dizaine de lignes. Pour une marque B2B technique francophone : « On dit : tutoriel pas à pas. On ne dit pas : guide ultime. » « On dit : 1 EUR vaut 655,957 FCFA. On ne dit pas : conversion approximative. » « On dit : Mixx by Yas. On ne dit pas : Free Money. »

Listez aussi les termes proscrits (jargon SEO interne, anglicismes inutiles, formules condescendantes) et les emojis autorisés ou interdits selon les canaux. Plus la liste est concrète, mieux les contributeurs s’y tiendront.

Étape 7 — Construire la bibliothèque de composants Figma

Ouvrez Figma, créez un fichier « Design System v1 » partagé avec l’équipe, puis montez les composants de base : bouton primaire, bouton secondaire, champ de formulaire, carte produit, en-tête de page, pied de page, badge « Promo ». Chaque composant doit utiliser les styles couleur et typo créés aux étapes 3 et 4.

# Convention de nommage Figma
Button / Primary / Default
Button / Primary / Hover
Button / Primary / Disabled
Card / Product / Default
Card / Product / OutOfStock

Vous devez voir, dans le panneau Assets, l’arborescence complète. Publiez ensuite la bibliothèque (Menu > Libraries > Publish) et invitez l’équipe à l’activer dans leurs propres fichiers. Toute évolution future se diffuse alors automatiquement.

Étape 8 — Livrer le style guide en PDF imprimable et page web

Le style guide doit exister sous deux formes : un PDF d’une trentaine de pages pour les prestataires externes (imprimeur, agence), et une page web interne (Notion, GitBook ou un sous-domaine WordPress) pour les contributeurs réguliers. Le PDF est figé par version, la page web vit.

Structurez le PDF dans cet ordre : couverture, mission, valeurs, logo, palette, typographie, ton, composants, exemples d’application (mockup site, post Instagram, carte de visite). Exportez depuis Figma en haute résolution (vecteurs préservés) puis vérifiez sur un téléphone : si le texte n’est pas lisible à 100 % sur écran 6 pouces, retravaillez la mise en page.

Étape 9 — Gouverner les évolutions sans tout casser

Un style guide vit en moyenne deux à trois ans avant une refonte mineure. Définissez dès le départ : qui décide d’une modification, quel est le cycle de mise à jour (par exemple revue trimestrielle, version majeure annuelle), comment les changements sont communiqués à l’équipe.

Versionnez le PDF (v1.0, v1.1, v2.0) et conservez l’historique. Toute évolution majeure (changement de logo, refonte de la palette) doit être votée par le comité de l’étape 2, jamais décidée seul. Pour explorer plus loin, voyez notre guide sur l’identité visuelle d’une PME ouest-africaine ou notre tutoriel pour monter un design system dans Figma. Un bon style guide n’est pas celui qui interdit, c’est celui qui rend les bonnes décisions évidentes.

Comment créer un style guide pour votre marque