Design system e‑commerce : appliquer sa marque à la boutique

Une marque peut avoir une belle identité et une boutique incohérente : trois styles de boutons, des prix qui changent de taille d'une page à l'autre, des visuels de réseaux sociaux qui semblent venir d'une autre maison. Le design system est l'outil qui évite cette dérive. Ce guide explique ce qu'il contient, comment l'appliquer à une boutique Shopify, et comment il relie la boutique aux réseaux sociaux et au packaging.

Identité visuelle et design system : deux choses différentes

L'identité visuelle, c'est le logo, la palette, les typographies, le style photographique. Elle répond à la question « à quoi ressemble la marque ? ». Notre article sur l'identité visuelle d'une boutique traite de ce point.

Le design system répond à une autre question : « comment construit-on chaque écran, chaque visuel, chaque emballage pour qu'ils ressemblent tous à la marque ? ». Il contient trois couches :

1. les fondations : couleurs, typographie, espacements, rayons, ombres, durées d'animation, sous forme de valeurs nommées ;

2. les composants : bouton, carte produit, prix, champ de formulaire, bandeau, avec leurs variantes et leurs états ;

3. les règles d'usage : quand utiliser quel composant, ce qu'on ne fait jamais, et qui valide un nouvel élément.

Une charte graphique en PDF couvre en général la première couche, partiellement. Un design system couvre les trois, et il est relié au code.

Les fondations : les jetons de design

Ce qu'est un jeton

Un jeton de design est une valeur nommée. Au lieu d'écrire #1C2B4A dans trente fichiers, on définit un jeton couleur.texte.principal, utilisé partout. Changer la valeur du jeton change tout ce qui l'utilise.

On organise généralement les jetons en trois niveaux :

Le niveau sémantique est le plus important. C'est lui qui permet de changer de palette, de créer un thème sombre ou une édition limitée sans toucher à chaque composant.

Un format standard, depuis 2025

Pendant longtemps, chaque outil avait son format de jetons. Le groupe communautaire Design Tokens du W3C a publié le 28 octobre 2025 la première version stable de sa spécification, la version 2025.10, qui comprend un module de format, un module de couleur et un module de résolution. L'annonce cite des outils qui l'implémentent déjà, comme Style Dictionary, Tokens Studio et Terrazzo. Ce n'est pas une recommandation officielle du W3C, mais ce format commun permet aux outils de design et au code de partager les mêmes fichiers.

Un jeton dans ce format ressemble à ceci :

{
  "couleur": {
    "rouge-brique-600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.62, 0.22, 0.16] } },
    "texte-principal": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.11, 0.17, 0.29] } },
    "prix-promotion": { "$type": "color", "$value": "{couleur.rouge-brique-600}" }
  },
  "espace": {
    "s": { "$type": "dimension", "$value": { "value": 8, "unit": "px" } }
  }
}

Côté design, Figma gère des variables qui jouent le même rôle et peuvent être organisées en modes, par exemple clair et sombre.

La typographie

Le système typographique d'une boutique ne se limite pas à deux polices. Il définit des rôles, chacun avec sa taille, sa graisse, son interligne et sa variante mobile :

• titres de page et de section ;

• texte courant des fiches et des pages éditoriales ;

• nom de produit dans les cartes et sur la fiche ;

• prix, ancien prix et prix unitaire, de préférence en chiffres tabulaires pour qu'ils s'alignent ;

• étiquettes : badges, mentions de stock, catégories ;

• boutons et liens.

Deux points sont propres à Shopify. Le réglage de police natif des thèmes s'appuie sur la bibliothèque de polices de Shopify, qui comprend des polices système et une sélection de Google Fonts. Si la police de votre marque n'y figure pas, le thème doit la charger lui-même depuis ses fichiers, et l'équipe ne pourra pas en changer depuis l'éditeur : c'est un choix à faire en connaissance de cause. Ensuite, vérifiez que la licence de la police couvre bien l'usage web, en plus de l'impression : ce sont souvent deux licences distinctes.

La couleur

Une palette de marque n'est pas un système de couleurs. Le système dit quelle couleur sert à quoi : fond, surface, texte, bordure, action principale, action secondaire, promotion, erreur, succès. Il fixe aussi les associations autorisées.

Ces associations se vérifient. Les WCAG demandent un contraste d'au moins 4,5:1 pour le texte courant, et de 3:1 pour les composants d'interface comme les bordures de champs ou les icônes. Un beige sur crème très élégant sur un moodboard échoue souvent à ce test. Mieux vaut le savoir au moment de définir les jetons que pendant un audit d'accessibilité.

Shopify prévoit dans ses thèmes un réglage de palette de couleurs : un ensemble de couleurs nommées, unique pour tout le thème, que l'équipe retrouve dans chaque réglage de couleur de l'éditeur (documentation). Les thèmes plus anciens utilisent des groupes de schémas de couleurs. Dans les deux cas, l'intérêt est le même : les sections ne proposent pas un sélecteur de couleur libre, mais des couleurs de la marque.

Pour le packaging et l'impression, la même couleur se définit autrement : une référence de nuancier pour l'imprimeur, une valeur pour l'écran. Le design system documente les équivalences, validées sur épreuve, pour que le carton et l'écran racontent la même chose.

Les composants de la boutique

Une boutique repose sur un nombre limité de composants, répétés partout. Les inventorier est la première étape concrète.

Les états sont la partie la plus souvent oubliée. Un bouton dessiné sans son état de focus clavier sera implémenté avec le contour par défaut du navigateur, ou pire, sans contour du tout.

Les composants dans un thème Shopify

Sur Shopify, les composants prennent la forme de sections, de blocs et de fragments de code. Les blocs de thème sont définis une fois au niveau du thème, réutilisables dans différentes sections et imbricables entre eux. C'est l'équivalent direct d'une bibliothèque de composants.

La clé est de concevoir les réglages de chaque section comme une traduction du design system. Plutôt que de proposer une couleur libre, une taille de texte en pixels et un arrondi au choix, une section bien pensée propose « style de fond : clair, surface, sombre » et « bouton : principal ou secondaire ». L'équipe compose librement ses pages, mais elle ne peut pas créer par accident un quatrième style de bouton. C'est cet équilibre entre autonomie et cohérence qui distingue un thème développé pour une marque d'un thème généraliste, et que nous détaillons dans notre comparatif sur le thème Shopify sur-mesure.

De la boutique aux réseaux sociaux et au packaging

Le design system n'est pas réservé à l'écran. Les mêmes fondations se déclinent sur chaque support, avec des règles adaptées.

Pour les réseaux sociaux, l'outil le plus utile est une série de gabarits construits avec les jetons du système : annonce de produit, citation, nouveauté, coulisses. L'équipe change l'image et le texte, la mise en forme reste celle de la marque. Pour le packaging, le système fixe l'usage du logo, les couleurs d'impression et la hiérarchie des informations, et l'unboxing prolonge la boutique. Notre article sur les erreurs de branding qui freinent les ventes revient sur ce point.

Construire le système, étape par étape

1. Inventorier l'existant

Faites des captures de toutes les pages types de la boutique, des derniers visuels publiés et des emballages. Regroupez ce qui se ressemble : vous verrez vite les cinq nuances de gris et les quatre styles de boutons qui se sont installés sans décision.

2. Définir les jetons

Partez de l'identité visuelle et fixez les primitives, puis les jetons sémantiques. Vérifiez les contrastes de chaque association autorisée dès cette étape.

3. Dessiner les composants par ordre d'usage

Commencez par ceux qui portent les ventes : carte produit, prix, bouton, sélecteur de variante, panier. Dessinez chaque état, sur mobile d'abord.

4. Documenter

Une page par composant suffit : à quoi il sert, ses variantes, ses états, ce qu'on ne fait pas avec. La documentation qu'on ne lit pas est celle qui fait vingt pages par bouton.

5. Relier au code

Les jetons alimentent les variables CSS du thème, et les composants du design correspondent aux sections et aux blocs. Quand le design change, le code change au même endroit.

6. Gouverner

Désignez qui valide un nouveau composant ou une nouvelle couleur, et versionnez le système. Une campagne qui a besoin d'un élément nouveau l'ajoute au système, au lieu de créer une exception.

Les erreurs fréquentes

• Un design system qui ne vit que dans Figma. Si le code ne s'appuie pas sur les mêmes jetons, les deux divergent dès la première modification.

• Trop de variantes. Chaque variante ajoutée est une décision de moins pour l'équipe, mais une incohérence possible de plus. Ajoutez-en quand un besoin réel apparaît.

• Des réglages de thème trop libres. Un sélecteur de couleur libre dans chaque section défait le système en quelques semaines.

• Des états oubliés. Focus, erreur, chargement, rupture de stock : ce sont eux qui font la qualité perçue d'une boutique.

• Un système refait à chaque campagne. Une édition limitée peut changer les couleurs d'accent par ses jetons sémantiques, sans redessiner les composants.

Pour aller plus loin

Le design system se construit au moment du design de la boutique, et se traduit ensuite dans le thème. C'est le cœur de notre travail en design UX/UI Shopify. Pour appliquer votre identité à votre boutique sans la diluer, écrivez-nous.