Comment créer un style guide pour votre marque

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 filtre 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, active, 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 complet (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.