Le design system n'est pas un livrable. C'est une infrastructure.
Quand un nouveau projet démarre, nous résistons à la tentation d'écrire la première feature. Nous figeons d'abord les fondations.
Trois jours, six éléments
Couleurs. Pas de palette de 47 nuances. Six tokens : foreground, background, surface, muted, border, accent. Plus le mode sombre. Tout le reste se déduit.
Typographie. Une famille pour le display, une pour le sans. Quatre tailles : caption, body, lead, hero. Les gens qui ajoutent une 5e taille se perdent dans la 9e en moins d'un mois.
Espacement. Une échelle géométrique 4-8-12-16-24-32-48-64-96. Tailwind nous donne ça gratuitement. Nous le respectons religieusement.
Composants atomiques. Bouton, input, badge, card, modal. Six maximum. Chacun a deux variants : primary, ghost. Pas de "btn-success-large-rounded-with-icon".
États. Loading, empty, error, success. Pour chaque écran. Sinon, l'utilisateur voit une page blanche pendant 2 secondes, et c'est perdu.
Transitions. Une seule courbe : cubic-bezier(.22,1,.36,1). Une seule durée par catégorie : 300ms (micro), 700ms (sections), 1200ms (page transitions).
Le résultat
“Nous écrivons les premières features 50 % plus vite, parce que nous ne réinventons rien.”
Chaque feature suivante hérite du système. Pas de couleur ad-hoc, pas de margin magique, pas de bouton qui s'invente une nouvelle ombre. Le code reste cohérent même quand l'équipe grandit.
Écrit par Mhd Almouchafaou
Cofondateur, Amiral Studio
