Un design system sert, sur le site d’une TPE ou d’une PME, à garder chaque nouvelle page cohérente et accessible avec les précédentes, sans redessiner à chaque ajout ce qui existe déjà. Le kiné qui ajoute une page de soin, l’artisan qui publie une nouvelle réalisation : la page suivante se monte avec les pièces de la précédente.
Pas besoin pour autant d’un système à l’échelle de Google ou de l’État. À votre taille, un petit système proportionné tient en quatre briques : des tokens, un guide de style, une dizaine de composants et quelques gabarits de pages. Ce guide s’appuie sur Nielsen Norman Group (NN/g), sur deux textes publiés sur le site du W3C et sur le dépôt officiel du DSFR.
Qu’est-ce qu’un design system ?
Un design system est un ensemble de règles et de pièces réutilisables qui fixe en un seul endroit l’apparence et le comportement d’un site. NN/g le définit comme « un ensemble de standards pour gérer le design à grande échelle, réduire la redondance et créer un langage commun et une cohérence visuelle entre les canaux » (traduit de l’anglais). Un bouton, une carte, un formulaire sont dessinés une fois, puis réutilisés partout.
L’article Design Systems 101 de Nielsen Norman Group en donne le bénéfice principal : reproduire vite des designs à partir de composants prêts, sans réinventer à chaque fois et sans incohérence involontaire.
Le Système de Design de l’État (DSFR) décrit le sien de façon plus concrète, parce qu’il parle de code. Son README le présente comme « un ensemble de composants web HTML, CSS et Javascript pour faciliter le travail des équipes projets des sites Internet publics, et créer des interfaces numériques de qualité et accessibles ». Retenez ce point : un design system n’est pas un PDF rangé dans un dossier, c’est ce avec quoi le site est réellement construit.
Pour un pro, la traduction est simple. Votre bouton « Prendre rendez-vous » a la même couleur, la même taille et le même texte sur chaque page, parce qu’il n’existe qu’une fois, à un seul endroit.
Que contient un design system ?
Un design system contient deux choses, selon NN/g : un dépôt de design et les personnes qui le gèrent. Le dépôt réunit le plus souvent un guide de style, une bibliothèque de composants et une bibliothèque de modèles, c’est-à-dire de groupes d’éléments ou de mises en page. Pour le site d’une TPE ou d’une PME, nous le ramenons à quatre briques : tokens, guide de style, une dizaine de composants, quelques gabarits.
NN/g détaille ce que dit la fiche de chaque composant : un nom unique, pour que designer et développeur parlent de la même chose ; une description de son usage ; ses attributs réglables (couleur, taille, forme, texte) ; ses états, de l’apparence par défaut à ses variations ; et l’extrait de code qui le produit.
Voici la version proportionnée à un site de pro :
| Brique | Ce qu’elle contient | Sur un site de pro |
|---|---|---|
| Tokens | Les valeurs de base, nommées : couleurs, typographie, espacements | couleur-action, texte-corps, espace-section |
| Guide de style | Les règles de marque, de ton et de mise en forme | Logo, couleurs autorisées, vouvoiement, longueur des titres |
| Composants | Une dizaine de pièces réutilisables, chacune avec sa fiche | En-tête et menu, pied de page, bouton, carte, formulaire de contact, bandeau d’avis, questions fréquentes, galerie photo, bloc horaires et adresse, fil d’Ariane |
| Gabarits | Des modèles de pages assemblés à partir des composants | Accueil, page de service ou de soin, page de réalisation, article, contact |
Deux précisions. La brique tokens vient de notre pratique et du format publié par le W3C : la page de NN/g n’emploie pas le mot. Et les gabarits correspondent à ce que NN/g range dans la bibliothèque de modèles. Quant aux personnes qui gèrent le système, sur un site de TPE, c’est le prestataire qui fait évoluer le site, et vous qui validez.
Guide de style et design system : quelle différence ?
Le guide de style est une partie du design system, pas son synonyme. Pour NN/g, il rassemble les règles de marque (couleurs, typographie, logos), les règles de contenu (ton, choix des mots) et les standards de design visuel et d’interaction. Le design system y ajoute tout ce qui se construit : les composants avec leur code, les gabarits de pages, et quelqu’un qui tient l’ensemble à jour.
Dit autrement, le guide de style décrit, le système fabrique. Votre charte graphique dit que votre marque est bleu nuit et qu’elle vouvoie. Le système dit que le bouton principal est bleu nuit, que son texte est blanc, qu’il change d’aspect au survol, et il le livre prêt à poser sur la page suivante.
La différence se paie sur la durée. NN/g observe que, quand les équipes travaillent chacune de leur côté, l’absence de système commun peut produire des expériences fragmentées, sans rapport apparent avec la marque. Sur un petit site, ces équipes s’appellent le premier designer, le prestataire suivant et vous-même un dimanche soir.
Qu’est-ce qu’un design token ?
Un design token est une décision de design rangée sous un nom lisible. Le format publié en 2025 par le Design Tokens Community Group du W3C le définit comme « une information associée à un nom lisible, au minimum une paire nom/valeur » (traduit de l’anglais). Son exemple : color-text-primary, la couleur du texte principal, vaut #000000. On ne parle plus de « ce bleu-là », on parle de couleur-action.
Ce document, version 2025.10, date du 28 octobre 2025. Précision qui compte : ce n’est pas une norme du W3C, mais le rapport final d’un groupe communautaire. Il décrit un fichier JSON (extensions .tokens ou .tokens.json recommandées) pour échanger des tokens entre outils de design et de développement, autour d’une source unique de vérité.
Pour une TPE, trois familles suffisent : les couleurs, la typographie (polices, tailles, graisses) et les espacements. Leur intérêt se voit le jour où quelque chose change. Votre couleur d’accent évolue avec votre logo : on modifie une valeur, et chaque bouton, chaque lien, chaque titre suit. Sans tokens, on cherche la couleur page par page, et il suffit d’en oublier une pour que le site paraisse bricolé.
Dans quels cas un design system vaut-il la peine, et dans quels cas non ?
Un design system vaut la peine quand votre site va grandir pendant des années, avec des pages qui se répètent et plusieurs personnes qui y touchent. NN/g l’écrit ainsi : « les design systems donnent le meilleur d’eux-mêmes quand l’entreprise prévoit des années de travail de design réplicable » (traduit de l’anglais). Pour un site de cinq pages qui ne bougera pas, ou pour un prototype, une charte et une feuille de styles bien rangée suffisent.
Les critères de NN/g sont l’échelle et la réplicabilité des projets, puis les ressources et le temps disponibles. Le cabinet raisonne à grande échelle : il part de sites et d’applications qui peuvent compter « des centaines ou des milliers de pages » (traduit de l’anglais), et décrit une équipe dédiée d’au minimum trois personnes, un designer d’interaction, un designer visuel et un développeur. Ces ordres de grandeur ne se transposent pas tels quels à une TPE. Le raisonnement, lui, se transpose.
Les limites qu’il cite valent à toutes les tailles. Un système demande du temps à créer et à entretenir ; ce n’est pas une solution qu’on pose une fois pour toutes ; il faut apprendre aux autres à s’en servir. Et pour une preuve de concept ou un premier prototype appelé à changer, NN/g doute qu’il rapporte, à court terme, ce qu’il a coûté.
Notre lecture pour un site de pro tient en trois questions. Aurez-vous de nouvelles pages dans les années qui viennent ? Ces pages se ressembleront-elles ? Plus d’une personne y touchera-t-elle ? Deux oui, et le petit système se justifie.
| Votre situation | Notre recommandation |
|---|---|
| Site vitrine de cinq pages, contenu stable | Une charte et une feuille de styles bien rangée |
| Kiné qui ajoute une page par soin au fil des ans | Un petit système : tokens, gabarit de page de soin, composants de prise de rendez-vous |
| Artisan qui publie ses réalisations chantier après chantier | Un petit système : gabarit de réalisation, galerie, bandeau d’avis |
| PME où plusieurs personnes publient (direction, rédacteur, prestataire) | Un système documenté, avec un guide écrit et un responsable nommé |
| Prototype ou page d’essai appelée à changer | Pas de système : une base existante, adoptée telle quelle |
Prenez un cabinet de kinésithérapie qui ouvre son site avec cinq pages. Deux ans plus tard, il ajoute la rééducation du sportif, puis la kiné respiratoire. Si le gabarit de page de soin existe, chaque nouvelle page reprend la même structure, le même bouton de rendez-vous, le même bloc d’adresse : le patient garde ses repères, et le travail de design est déjà fait. Pour voir à quoi ressemble un site de cabinet, voyez notre page création de site internet pour kiné.
Même logique chez un menuisier qui publie ses chantiers : la carte de réalisation, la galerie et le bandeau d’avis existent déjà. Il ne reste qu’à fournir les photos et quelques lignes de texte.
Adopter un système existant, l’adapter ou créer le sien ?
Pour le site d’une TPE ou d’une PME qui tient à son image, nous recommandons de créer un petit système à soi plutôt que d’adopter celui d’un autre. Selon NN/g, adopter un système existant coûte le moins et va le plus vite ; créer le sien coûte le plus et se justifie quand vos besoins ne sont couverts par aucun système existant. Ramené à une dizaine de composants, ce sur-mesure se confond avec la maquette qu’un site dessiné demande de toute façon.
NN/g le résume ainsi : « plus votre solution est sur mesure, plus elle demandera de temps et d’argent à mettre en place » (traduit de l’anglais). Voici comment trancher selon votre usage :
- Adopter tel quel convient à un prototype, un outil interne ou une page d’essai. C’est la voie la moins chère, et l’apparence y compte peu. Pour un site de marque, la contrepartie est de ressembler aux autres sites bâtis sur la même base.
- Adapter convient à une PME qui a déjà des développeurs et plusieurs outils à aligner : on garde la mécanique d’un système existant et on lui applique ses propres tokens. Encore faut-il que sa licence le permette, et le cas du DSFR, plus bas, montre que ce n’est pas toujours le cas.
- Créer le sien, en petit convient au site vitrine d’un pro qui va grandir. Votre identité est justement ce que le site doit montrer ; un système proportionné la fixe sans en faire un chantier d’entreprise.
Quel que soit le choix, NN/g rappelle qu’un système, même adapté d’un autre, a besoin d’un mode d’emploi. Pour une TPE, il tient en peu de pages : la fiche de chaque composant et la liste des gabarits.
Le meilleur moment pour poser ces règles reste la maquette, avant la première page. Dans notre méthode, le cadrage du premier jour fixe la hiérarchie de l’information et le ton, puis le designer décide de l’identité visuelle et de l’accessibilité pendant que design et développement avancent en parallèle. Notre création de site web part de ce principe : une identité décidée par un designer, déclinée de façon cohérente sur toutes les pages. Nos formules se comptent en pages dessinées sur mesure : le pack Pro, par exemple, en compte 12 pour 1 490 € la première année, détail sur notre offre.
Peut-on reprendre le système de design de l’État (DSFR) pour le site de son entreprise ?
Non. Le dépôt officiel du DSFR l’écrit dans sa section sur la licence et le droit d’utilisation : « Utilisation interdite en dehors des sites Internet de l’État ». Le code est bien publié sous licence Etalab 2.0, mais son utilisation est encadrée par des Modalités d’Utilisation. Le DSFR est un marqueur d’identité visuelle de l’État : une entreprise ne le reprend pas pour son site, même s’il est techniquement téléchargeable.
Le README du DSFR sur GitHub donne le motif : en raison de ce rôle de marqueur d’identité, il « ne doit pas être utilisé par des entités extérieures à l’administration », et sa réplicabilité est limitée en dehors d’un nom de domaine en .gouv.fr. Il ajoute qu’en cas d’usage trompeur ou frauduleux, l’État se réserve le droit d’agir pour y mettre un terme. Même les administrations passent par une demande d’agrément, prévue aux articles 46 à 50 des Modalités d’Utilisation, et les fontes Marianne relèvent de conditions spécifiques.
Le risque se comprend vite : un site privé habillé aux couleurs de l’État peut passer pour un site public. Ce que vous pouvez en retenir, c’est la leçon d’organisation. Le dépôt sépare le code compilé, les sources des composants et des exemples de composants et de modèles de pages : à une autre échelle, ce sont les briques décrites plus haut.
Quelles règles d’accessibilité un design system aide-t-il à tenir de page en page ?
Trois critères des WCAG 2.1, tous de niveau AA, deviennent plus simples à tenir quand chaque page est montée avec les mêmes composants : 3.2.3 Navigation cohérente, 3.2.4 Identification cohérente et 1.4.3 Contraste (minimum), qui exige un rapport de contraste d’au moins 4,5:1 pour le texte. Les WCAG ne parlent pas de design system ; c’est la mécanique des composants qui rend ces règles faciles à respecter.
La traduction française des WCAG 2.1, hébergée par le W3C et dirigée par Access42, formule ainsi le critère 3.2.3 : dans un ensemble de pages web, « les mécanismes de navigation qui se répètent sur plusieurs pages web se présentent dans le même ordre relatif chaque fois qu’ils sont répétés, à moins qu’un changement soit initié par l’utilisateur ». Et le critère 3.2.4 : « les composants qui ont la même fonctionnalité sont identifiés de la même façon ».
Concrètement, sur un site de pro :
- Navigation cohérente. Le menu est un seul composant : il apparaît dans le même ordre sur la page d’accueil, sur la page de soin ajoutée l’an dernier et sur celle ajoutée demain.
- Identification cohérente. Le bouton « Prendre rendez-vous » porte le même libellé partout ; il ne devient pas « Réserver » sur une page et « Contact » sur une autre.
- Contraste minimum. On vérifie le rapport de 4,5:1, ou de 3:1 pour le texte agrandi, une seule fois, au niveau des tokens de couleur. Chaque composant qui les emploie en hérite.
Le DSFR lui-même se présente comme un outil pour « créer des interfaces numériques de qualité et accessibles ». Un système ne rend pas un site accessible à lui seul : les textes alternatifs des images, l’ordre des titres et la clarté des liens se soignent toujours page par page. Mais il évite que l’accessibilité gagnée sur la première page se perde à la dixième.
