Les startups reportent souvent le design system à "quand on sera gros". C'est une erreur. À l'échelle où vous voulez être, c'est trop tard : la dette visuelle s'est accumulée, les incohérences bloquent les refontes, et chaque nouvelle feature rallonge le temps de design.
À retenir
- Un design system minimal se construit en 3 à 5 jours au lancement
- Il divise le temps de design par 2-3 dès la 4e feature
- Il évite les refontes complètes qui coûtent 20 à 50 k€ à 18 mois
- Stack standard 2026 : Figma + Tailwind + shadcn/ui + Storybook
Qu'est-ce qu'un design system ?
Un design system est composé de 4 couches, de la plus abstraite à la plus concrète :
- Principes — la philosophie visuelle ("épuré, professionnel, warm")
- Tokens — les valeurs primitives (couleurs, tailles, espacements)
- Composants — les briques réutilisables (Button, Input, Card, Modal)
- Documentation — quand/comment les utiliser
Le minimum viable : les "10 composants d'or"
Pas besoin de commencer avec 80 composants. Un design system minimal couvre 90 % des besoins avec :
- Button (primary, secondary, ghost, tailles)
- Input (text, email, password, states)
- Select / Combobox
- Checkbox / Radio / Switch
- Card
- Modal / Dialog
- Toast / Notification
- Tooltip
- Tabs
- Table / Data grid
Chacun avec ses états : default, hover, focus, disabled, loading, error.
Les tokens — la couche la plus importante
Tokens de couleur
Ne définissez jamais une couleur directement dans un composant. Toujours passer par un token sémantique :
/* Brut — à éviter */
color: #4E3321;
/* Tokens — à privilégier */
color: var(--color-text-primary);
background: var(--color-surface);
border-color: var(--color-border-subtle);Cette discipline permet de :
- Changer le thème (dark mode) en modifiant uniquement les tokens
- Garantir que chaque couleur utilisée est validée pour le contraste WCAG
- Éviter les 47 variantes de gris qu'on trouve dans les projets sans système
Tokens typographiques, espacements, radii
Même logique : des échelles discrètes (pas 200 tailles différentes).
- Typographie : xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl
- Espacements : multiples de 4px (ou 8px selon votre système)
- Radii : none, sm, md, lg, full
- Ombres : sm, md, lg, xl
La stack 2026
Design : Figma
Standard incontesté. Utilisez les variables Figma pour les tokens, les components pour les composants, les variants pour les états.
Code : Tailwind CSS + shadcn/ui
Tailwind CSS pour les tokens et la stylisation utilitaire. shadcn/ui pour des composants React primitifs, accessibles (basés sur Radix), copiables dans votre code (pas un package npm à mettre à jour).
Documentation : Storybook
Chaque composant documenté avec ses props, ses variants, ses do/don't. Déployable en staging pour que toute l'équipe voie l'état du système.
Alternative minimaliste : CSS custom properties
Pour un site vitrine simple, un fichier de tokens CSS (comme colors_and_type.css de ce site) suffit. Pas besoin de Tailwind ni de Storybook.
Les pièges à éviter
1. Construire le design system avant le produit
Ne passez pas 3 semaines sur un design system théorique. Au lancement : 5 jours de setup. Puis itérez au fur et à mesure des besoins réels du produit.
2. Trop de composants
Un design system avec 120 composants dont 80 utilisés 1 fois par an est ingérable. Règle : un composant n'entre au système qu'après 3 usages dans le produit.
3. Incohérence design / code
Si Figma dit "bouton primaire #4E3321" et le code dit "bouton #523A28", le système est cassé. Synchroniser via Figma Variables → code (Style Dictionary, tokens-studio, ou export manuel).
4. Pas de propriétaire
Sans owner, le design system dérive. Désigner une personne (designer lead ou dev lead) responsable de sa cohérence, des reviews d'ajouts, et de l'onboarding.
Le ROI mesurable
| Métrique | Sans DS | Avec DS |
|---|---|---|
| Temps de design d'une feature | 3-5 jours | 1-2 jours |
| Temps de dev front (UI) | 2-4 jours | 1-2 jours |
| Cohérence visuelle (audit) | 60 % | 90 %+ |
| Dette UI après 12 mois | Élevée | Faible |
| Coût refonte à 18 mois | 20-50 k€ | 3-8 k€ |
Le plan 5 jours pour poser votre design system
- Jour 1 — Audit de l'existant + palette + typographie + échelle d'espacement
- Jour 2 — Tokens Figma + tokens CSS, composants Button + Input + Card
- Jour 3 — Composants Modal + Toast + Tooltip + Tabs
- Jour 4 — Storybook ou doc Notion, premier audit d'usage dans le produit
- Jour 5 — Migration d'une page complète vers le système, ajustements
Un design system, c'est une hygiène, pas un projet. Commencez petit, faites grossir avec le produit. Ne le lancez jamais comme une refonte "big bang".
Exemples de design systems publics à étudier
- Vercel Geist — minimal, sombre, excellent pour inspiration tech
- Linear — précis, opinionated, cohérent
- Shopify Polaris — documentation exhaustive, e-commerce
- GOV.UK Design System — accessibilité irréprochable, public
- IBM Carbon — enterprise-grade, exhaustif
Poser votre design system en 5 jours ?
On livre tokens + 10 composants + Storybook + onboarding équipe, prêts à produire.
Démarrer le projet →