Design System & Cohérence Visuelle

1. Ce qu'est réellement un design system

Ce n'est pas une charte graphique en PDF. C'est un ensemble de décisions codifiées et réutilisables : couleurs, espacements, typographies, composants, règles d'usage. Son objectif est simple : produire vite, sans perdre la cohérence, même quand plusieurs personnes travaillent.

Symptôme d'absence de système : chaque nouveau visuel demande de rediscuter la couleur d'un bouton.

2. Les tokens : la base

| Catégorie | Exemple de token | Valeur | | --- | --- | --- | | Couleur | color-base | #0A1424 | | Couleur | color-accent | #E10600 | | Couleur | color-surface | #F1F2F5 | | Espacement | space-4 | 16 px | | Rayon | radius-lg | 24 px | | Ombre | shadow-card | 0 8px 24px rgba(10,20,36,.08) | | Typo | font-display | Anton |

Règle absolue : aucune valeur codée en dur dans un composant. Tout passe par un token, sinon le thème devient impossible à faire évoluer.

3. Bibliothèque de composants

Commencez petit, 12 composants suffisent pour 90% des besoins : bouton, champ de saisie, carte, badge, onglets, accordéon, modale, notification, tableau, avatar, navigation, pied de page.

Pour chaque composant, documentez : les variantes, les états (repos, survol, actif, désactivé, chargement, erreur), et les cas d'usage interdits.

4. Documentation

• →Une page par composant : à quoi il sert, quand ne pas l'utiliser, exemple de code ou de fichier source.
• →Des exemples réels de la marque, pas des cas abstraits.
• →Un journal de versions : ce qui a changé, quand, pourquoi.

Un système non documenté est un système qui sera contourné.

5. Gouvernance

| Rôle | Responsabilité | | --- | --- | | Propriétaire du système | Valide les ajouts, arbitre les exceptions | | Contributeurs | Proposent des composants avec justification | | Utilisateurs | Signalent les manques |

Règle des trois usages : un nouveau composant n'entre dans le système que s'il est nécessaire dans au moins trois contextes différents.

6. Maintenance

• →Revue trimestrielle : supprimez les composants inutilisés.
• →Un composant modifié doit être vérifié sur toutes les pages qui l'utilisent.
• →Gardez une page de démonstration réunissant tous les composants : c'est votre test de non-régression visuelle.

7. Bénéfices mesurables

• →Production de visuels 2 à 3 fois plus rapide.
• →Cohérence conservée même avec des prestataires externes.
• →Refonte de thème possible en modifiant quelques tokens.
• →Onboarding d'un nouveau designer en une journée.

Checklist

• →[ ] Tokens définis pour couleurs, espacements, typographies
• →[ ] 12 composants de base documentés
• →[ ] États de chaque composant spécifiés
• →[ ] Propriétaire du système désigné
• →[ ] Revue trimestrielle planifiée