« Un design system, c’est trop cher pour notre budget. » Phrase entendue cent fois. Et cent fois, j’ai répondu la même chose : ne pas avoir de design system, c’est encore plus cher. Vous le payez juste autrement, dilué dans chaque modification, chaque nouvelle page, chaque incohérence à corriger en urgence.
Voilà ce qu’est vraiment un design system, à quoi il sert, et pourquoi je le facture systématiquement même sur des projets de taille modeste.
Ce qu’est un design system
Pas un PDF de charte graphique. Pas une collection de logos en différentes versions. Un design system, c’est un ensemble vivant et utilisable de composants visuels et techniques qui définissent à quoi ressemble votre interface, et comment elle se comporte.
Concrètement, un design system contient une palette de couleurs définie avec des noms (couleur primaire, couleur de fond, couleur d’erreur), pas juste des codes hexadécimaux flottants. Une typographie hiérarchisée (titres H1, H2, H3, paragraphes, légendes) avec les bonnes graisses et les bons espacements. Des composants réutilisables : boutons (primaire, secondaire, danger), formulaires, tableaux, alertes, modales, cartes. Une grille de mise en page qui s’applique à toutes les pages. Un système d’espacement régulier (8 px, 16 px, 24 px, par exemple, pas n’importe quoi).
Sur le code, c’est implémenté par exemple en variables CSS, en classes Tailwind organisées, en composants React partagés, ou en bibliothèque interne. Peu importe la techno : ce qui compte, c’est qu’on s’y réfère plutôt que de tout réinventer à chaque page.
Pourquoi sans design system, ça coûte plus cher
J’ai pris une refonte fin 2025 sur un site qui n’avait pas de design system. Le site avait été construit page par page, sans cohérence de fond. Voilà ce que ça donnait : 14 styles de boutons différents sur 25 pages, 7 valeurs d’espacement vertical (12 px, 14 px, 16 px, 18 px, 20 px, 24 px, 32 px) au lieu d’un système régulier, 4 polices différentes utilisées, 9 couleurs primaires dont certaines très proches mais légèrement différentes.
Pour ajouter une nouvelle page, il fallait à chaque fois choisir : quel bouton ? quelle marge ? quelle couleur de fond ? Multiplié par cinquante pages, ça représente plusieurs jours de discussions inutiles, d’allers-retours, et de divergences progressives.
Sur un projet de 8 000 €, l’absence de design system a probablement coûté 1 200 € de temps perdu en discussions et corrections de cohérence. Plus 2 500 € quand on a fait l’audit, parce qu’il a fallu tout repenser.
Le coût d’un design system bien fait
Sur un projet de site vitrine ou e-commerce de taille moyenne, un design system propre prend entre 2 et 5 jours de travail, soit 800 à 2 500 € selon la profondeur.
C’est un coût visible. Mais il se rembourse vite.
Sur la suite du même projet, chaque nouvelle page se construit en 30 minutes au lieu de 2 heures. Sur dix pages supplémentaires, c’est 15 heures gagnées, soit environ 800 €.
Sur les évolutions ultérieures du site, chaque ajout est plus rapide, plus cohérent, moins risqué. Sur un an de vie, ça représente facilement 2 000 à 5 000 € d’économie.
Sur l’expérience utilisateur, le site est plus cohérent, plus pro, plus rassurant. La conversion en bénéficie indirectement, c’est documenté.
Le design system pour qui, à quel moment
Pour des projets de petite taille (site vitrine de cinq pages), un design system détaillé n’est pas nécessaire. Une charte graphique simple avec deux ou trois composants documentés suffit.
Pour des projets de taille moyenne (e-commerce, site institutionnel, applications internes), un design system de base est rentable. Pas une bible Figma à 2 000 composants, mais les fondations : couleurs, typographie, boutons, formulaires, espacements, composants principaux.
Pour des projets ambitieux (SaaS, multi-sites, plateformes complexes), un design system complet est non négociable. Sans, vous payerez deux fois plus en maintenance et incohérences.
La fausse bonne idée des templates payants
J’ai vu plusieurs clients essayer de remplacer le design system par l’achat d’un template Figma payant. Ça part d’une bonne intention mais ça ne marche pas. Un template, c’est une démo. Il n’est pas adapté à votre projet, à votre marque, à vos cas d’usage spécifiques.
Vous récupérez 200 composants génériques dont vous utiliserez 15 mal. Le résultat ressemble à mille autres sites construits sur le même template. Et la maintenance reste à votre charge.
Le design system, c’est l’inverse : moins de composants, plus adaptés à votre cas, et qui vous appartiennent.
Ce qui rend un design system vivant
Trois conditions.
Il est documenté quelque part (Figma, Notion, Storybook), avec des exemples d’usage. Pas dans la tête d’une seule personne.
Il est versionné comme du code, avec des évolutions tracées. Quand on ajoute un composant, on le fait délibérément, pas en douce.
Il est utilisé par tout le monde. Ça suppose une discipline : ne pas créer de bouton hors-système, ne pas inventer de nouvelle couleur, demander la création d’un composant manquant plutôt que de bricoler.
Sans ces trois conditions, le design system devient un PDF mort, et le projet retombe dans le chaos visuel.
Mon approche
Sur tout projet que je prends à plus de 5 000 €, je propose systématiquement un design system, même léger. Ça prend une à deux journées, c’est facturé séparément, et c’est ce qui fait que mes projets vieillissent bien.
Quand un client me dit que ça coûte cher, je lui propose de commencer sans, et de faire le bilan dans six mois. À chaque fois, on ajoute le design system par la suite, en payant trois fois plus pour le rétro-construire sur l’existant.
Le design system, c’est comme l’assurance auto. Tant qu’il n’y a pas d’accident, on trouve que c’est cher. Le jour où il y en a un, on regrette de ne pas en avoir pris.