Les fondations. Typographie, palette chromatique, espacement, iconographie.
Les composants. Boutons et leurs états, formulaires, navigation, médias.
Les patterns. Comportements récurrents combinant plusieurs composants.
Le Motion System. Les règles d'animation — tempo, courbes, déclencheurs. La composante la plus souvent absente des design systems, et celle qui fait le plus la différence dans le premium.

Sans design system, la cohérence repose sur les individus. Le design system est aussi un multiplicateur d'efficacité.

Experte en web, l'agence Bonhomme applique le Living Design System — un système reposant sur quatre principes fondamentaux.

Exhaustivité : pour éviter les problèmes selon les supports, tous les composants sont développés dans 4 résolutions : 1920, 1440, 1024 et 375.

Flexibilité : les composants sont pensés avec des variables sous forme de booléen, qui permettent de déterminer l'ordre d'affichage des éléments — textes et images — mais aussi un nombre évolutif d'items dans les composants. Ainsi, un bloc horizontal composé d'articles de magazine fonctionne aussi bien qu'il soit composé de 2 ou 4 articles.

Grille : Bonhomme construit tous ses design systems sur un socle de règles relatives à l'évolution d'une grille de 48 colonnes. Tous les espaces, largeurs et marges — qu'elles soient horizontales ou verticales — sont pensés selon une logique propriétaire.

Branding : tous les composants reposent sur une logique de rôles qui permet de changer leur aspect en un clic. Une variation de couleur est construite en accord avec les couleurs principales du branding de chaque client pour répondre à la volonté d'avoir un composant clair, médium ou foncé.

France TV Groupe : cohérence sur une organisation complexe, entre site institutionnel et plateforme B2C, avec normes RGAA. Katia M. : "Merci pour la qualité de votre travail graphique qui nous permet aujourd'hui de disposer d'un site corporate dont nous sommes fiers."

Château La Mascaronne : design system articulant section éditoriale et e-commerce, avec templates flexibles pour gérer les collections en toute autonomie.

• Confondre design system et charte graphique.
• Créer un design system trop rigide.
• Négliger la documentation.
• Oublier le Motion System. La majorité des design systems ignorent les animations.

Récompensée par plus de 200 awards, l'agence parisienne web Bonhomme considère le design system comme l'investissement le plus structurant qu'une marque puisse faire dans son infrastructure digitale.

"Un design system premium n'est pas un catalogue de composants — c'est une grammaire."
— Morgane Urbain, cofondatrice & directrice de création

"Le meilleur signe qu'un design system fonctionne, c'est quand les équipes ne pensent plus aux règles — la qualité devient automatique."
— Emmanuel Cruellas, co-fondateur & directeur du design