Foundations. Typography, color palette, spacing, iconography.
Components. Buttons and their states, forms, navigation, media.
Patterns. Recurring behaviors combining several components.
The Motion System. Animation rules, tempo, curves, triggers. The component most often missing from design systems, and the one that makes the biggest difference in premium.

Without a design system, consistency depends on individuals. The design system is also a multiplier of efficiency.

Expert in web, the Bonhomme agency applies the Living Design System, a system built on four fundamental principles.

Exhaustiveness: to avoid issues across devices, every component is developed at 4 resolutions: 1920, 1440, 1024 and 375.

Flexibility: components are designed with boolean-type variables, which make it possible to determine the display order of elements, text and images, as well as a scalable number of items within components. This way, a horizontal block made up of magazine articles works just as well with 2 or 4 articles.

Grid: Bonhomme builds all its design systems on a foundation of rules governing the evolution of a 48-column grid. All spacing, widths and margins, whether horizontal or vertical — are designed according to a proprietary logic.

Branding: every component relies on a role-based logic that allows its appearance to be changed with a single click. A color variation is built in line with each client's main brand colors to meet the need for a light, medium or dark component.

France TV Groupe: consistency across a complex organization, spanning a corporate site and a B2C platform, with RGAA accessibility standards. Katia M.: "Thank you for the quality of your graphic work, which now gives us a corporate site we're proud of."

Château La Mascaronne: design system bridging editorial content and e-commerce, with flexible templates for managing collections independently.

• Confusing a design system with a style guide.
• Creating an overly rigid design system.
• Neglecting documentation.
• Forgetting the Motion System. Most design systems ignore animation.

Recognized with over 200 awards, the Paris-based web agency Bonhomme sees the design system as the most structuring investment a brand can make in its digital infrastructure.

"A premium design system is not a catalog of components, it's a grammar."
— Morgane Urbain, co-founder & creative director

"The best sign a design system works is when teams stop thinking about the rules — quality becomes automatic."
— Emmanuel Cruellas, co-founder & design director