Construire un design system

Pourquoi un système, pas des pages

L'erreur classique du débutant — humain ou assisté par IA — consiste à dessiner des pages une par une. La page d'accueil est jolie, la page pricing est jolie, mais mises côte à côte, elles ne semblent pas appartenir au même produit : les bleus diffèrent légèrement, les espacements changent, les boutons n'ont pas le même arrondi. Le résultat fait amateur, même si chaque page isolée est réussie.

Un bon design n'est pas une accumulation de jolies pages, c'est un système cohérent : un petit ensemble de décisions (couleurs, typographies, espacements, rayons, ombres) prises une fois et réutilisées partout. La cohérence a un effet psychologique mesurable : elle inspire confiance. L'utilisateur sent — sans pouvoir le verbaliser — qu'un produit cohérent est un produit soigné, donc fiable. Pour une app de méditation qui demande un abonnement, cette confiance est littéralement de l'argent.

Avec l'IA, le système devient encore plus crucial : chaque nouvelle conversation repart de zéro. Si tu ne fournis pas tes décisions visuelles, le modèle improvisera des valeurs différentes à chaque génération. Le design system est ta mémoire externe : tu le colles au début de chaque prompt, et tous les écrans générés parlent la même langue.

Les design tokens : la grammaire de ton interface

Concrètement, un design system commence par des design tokens : des variables nommées qui portent chaque décision visuelle. Au lieu d'écrire #4A7C6F à quarante endroits, tu définis --color-primary: #4A7C6F une seule fois et tu références la variable partout. Le jour où le client veut un vert plus profond, tu changes une ligne et toute l'interface suit.

Les tokens couvrent typiquement cinq familles : les couleurs, la typographie (familles, tailles, graisses, hauteurs de ligne), les espacements, les rayons de bordure et les ombres. En CSS, tout cela tient dans un bloc :root d'une cinquantaine de lignes. C'est ce bloc que tu vas demander à l'IA de générer — puis que tu réinjecteras dans chaque prompt du projet.

:root {
  /* Couleurs — rôles, pas teintes */
  --color-primary: #4A7C6F;      /* vert sauge : actions principales */
  --color-primary-hover: #3D685D;
  --color-accent: #E8A87C;       /* pêche douce : highlights ponctuels */
  --color-surface: #FAF8F5;      /* fond crème chaud */
  --color-surface-raised: #FFFFFF;
  --color-text: #2D3A36;         /* contraste 11.2:1 sur surface */
  --color-text-muted: #5C6B66;   /* contraste 5.1:1 — AA ok */
  --color-success: #4A7C5F;
  --color-error: #B5544D;

  /* Typographie — échelle 1.25 (tierce majeure) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --leading-tight: 1.2;
  --leading-body: 1.6;

  /* Espacements — base 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Rayons et ombres */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 2px 12px rgba(45, 58, 54, 0.06);
  --shadow-raised: 0 8px 28px rgba(45, 58, 54, 0.10);
}

Couleurs : des rôles, pas des teintes

Remarque comment les tokens de couleur ci-dessus sont nommés : primary, surface, text-muted — des rôles fonctionnels, jamais des teintes (--vert-1, --beige). La nuance est capitale. Un rôle décrit l'usage : « la couleur des actions principales », « le fond des cartes surélevées ». Si tu changes de palette, les noms restent valides. Et surtout, l'IA comprend les rôles : « utilise --color-accent uniquement pour les highlights ponctuels » est une instruction qu'elle saura respecter écran après écran.

Côté composition, la règle empirique 60-30-10 reste un excellent garde-fou : environ 60 % de l'écran en couleur de surface, 30 % en couleurs de texte et de structure, et seulement 10 % pour la couleur d'accent. C'est ce dosage qui rend un accent percutant — une couleur utilisée partout n'accentue plus rien. Le rendu « IA générique » sature souvent l'écran de couleur ; ton système, lui, impose la retenue.

Crée un design system pour une app de méditation, ambiance calme et premium (brief : générosité d'espace, douceur colorée, typo nette) :
- 8 couleurs avec rôles fonctionnels (primary, primary-hover, accent, surface, surface-raised, text, text-muted, error) en variables CSS
- contrastes accessibles : AA minimum pour tout texte, indique le ratio de chaque combinaison texte/fond
- échelle typographique en ratio 1.25, de small à h1, avec hauteurs de ligne
- échelle d'espacement en base 4 px (4 → 96)
- 3 rayons de bordure et 2 ombres discrètes
Donne le tout dans un bloc :root { } CSS commenté, puis explique en 3 phrases les choix de couleur.

Contraste et accessibilité : non négociable

Parlons du sujet que le rendu « joli » fait trop souvent oublier : l'accessibilité. Le contraste entre un texte et son fond se mesure par un ratio allant de 1:1 (invisible) à 21:1 (noir sur blanc). Les WCAG définissent deux seuils : AA exige 4,5:1 pour le texte courant (3:1 pour les grands titres), et AAA monte à 7:1. AA est ton minimum absolu — pas un objectif, un plancher.

Pourquoi être intransigeant ? D'abord parce qu'environ une personne sur douze perçoit mal certaines couleurs, et que tout le monde lit un jour son téléphone en plein soleil. Ensuite parce que les ambiances « douces et apaisantes » — précisément ce que demande notre client — poussent naturellement vers des gris clairs sur fond crème qui tombent sous les seuils. Un design premium qui n'est pas lisible n'est pas premium : c'est un défaut de fabrication. Demande systématiquement à l'IA d'indiquer les ratios de contraste de chaque combinaison texte/fond, et fais vérifier les cas limites.

La typographie : une échelle, pas des tailles au hasard

La typographie porte à elle seule la moitié de l'impression « premium ». Deux décisions structurent tout : le choix des familles (une pour les titres, une pour le texte courant — rarement plus de deux) et l'échelle des tailles. Plutôt que de choisir chaque taille au feeling, on dérive toutes les tailles d'un ratio constant : chaque niveau est 1,25 fois plus grand que le précédent, par exemple. Ce ratio crée une harmonie mathématique que l'œil perçoit sans la comprendre — exactement comme les intervalles en musique.

Un ratio modéré (1,2 – 1,25) donne une hiérarchie douce, adaptée aux interfaces denses ; un ratio fort (1,333 – 1,5) crée des titres spectaculaires, parfaits pour une landing page où la hero doit en imposer. Pour Sereno, un 1,25 avec une serif élégante en titres (chaleur, humanité) et une sans-serif neutre en corps (lisibilité) traduit bien le « calme premium ». N'oublie pas les hauteurs de ligne : 1,5 à 1,6 pour le corps de texte, plus serré (1,1 – 1,2) pour les grands titres, sinon ils flottent.

L’espacement : le rythme invisible

L'espacement est le paramètre le plus invisible et le plus déterminant d'une interface. Une page « qui respire » et une page « tassée » utilisent souvent les mêmes composants — seuls les espaces diffèrent. Le principe : une échelle fixe en base 4 px (4, 8, 12, 16, 24, 32, 48, 64, 96) dont on ne sort jamais. Pas de marge de 17 px ou de 23 px : chaque espace est un multiple choisi dans l'échelle.

Cette contrainte produit le rythme vertical : la régularité des intervalles crée une grille invisible qui apaise l'œil. Elle exploite aussi la loi de proximité : les éléments proches sont perçus comme liés, les éléments éloignés comme distincts. Un titre doit donc être plus proche du paragraphe qu'il introduit que de la section qu'il clôt — règle simple, violée par la moitié des pages web. Enfin, sois généreux entre les sections : 96 px d'écart sur desktop n'est pas du vide, c'est de la ponctuation. Le générique tasse ; le premium respire.

Du token aux écrans : faire vivre le système

Une fois tes tokens définis, le système suit une logique d'irrigation : les tokens nourrissent des composants (boutons, cartes, champs de formulaire), et les composants assemblent des écrans. À chaque nouvelle génération, demande explicitement à l'IA de réutiliser les variables existantes plutôt que d'inventer des valeurs : « utilise exclusivement les tokens fournis ; si un besoin n'est pas couvert, propose un nouveau token au lieu d'une valeur en dur ».

flowchart TD
  T["Tokens : couleurs + typo + espacements"] --> CP["Composants : boutons, cartes, formulaires"]
  CP --> E1["Landing page"]
  CP --> E2["Page pricing"]
  CP --> E3["Écrans suivants"]

Cette dernière consigne — proposer un token plutôt qu'une valeur en dur — est précieuse : elle fait grandir ton système de façon contrôlée. Au fil du projet, tu verras apparaître des besoins que la version initiale ne couvrait pas (une couleur de bordure, un espacement intermédiaire). Chaque ajout passe par toi, est nommé, documenté, et rejoint le fichier de référence. Le système reste la source de vérité unique.