Design system
Un design system est une bibliothèque vivante de composants, de tokens et de règles d’usage qui garantit la cohérence visuelle et fonctionnelle d’un produit numérique à travers toutes ses pages et tous ses canaux.
Qu'est-ce que design system ?
Un design system contient typiquement trois couches : les design tokens (couleurs, espacements, typographies en variables), les composants UI (boutons, cards, modals, navs) et la documentation d’usage (quand utiliser quoi, exemples, anti-patterns). Il sert d’interface entre le design et le code.
Les design systems célèbres incluent Material Design (Google), Polaris (Shopify), Carbon (IBM), Lightning (Salesforce). Ces systèmes sont open source et servent de référence à l’industrie. À plus petite échelle, une startup commence souvent par un design system minimal — 5 couleurs, 4 tailles de texte, 8 composants — qui grandit avec le produit.
L’intérêt d’un design system est triple : cohérence visuelle (la marque reste reconnaissable), vitesse de production (on assemble plutôt qu’on redessine), et qualité (les composants testés se réutilisent sans bug). Sans design system, un produit dérive en quelques mois.
Le design system de Vercel (Geist UI) propose une cinquantaine de composants React publics, des tokens partagés, et une doc Storybook — c’est ce qui permet à Vercel de livrer des produits visuellement cohérents en quelques jours.
On parle de design system en UX/UI, en product design, en design ops et dès qu’un produit dépasse une dizaine d’écrans.
Mettre ce concept en pratique avec Eufya
Eufya applique ces principes automatiquement dans son pipeline 5-agents. Brief, scoring, génération, audit qualité. 3 crédits gratuits à l'inscription.