Welcome to our advent calendar! Today, we're exploring a crucial step in product quality: the adoption of a Design SystemOften reduced to a simple component library, it is actually a a living and strategic tool For Design and Tech teams. In a context of continuous iteration, a Design System must become an engine ensuring perfect alignment between user experience, best technical practices, and production speed. Discover how to transform this tool to guarantee its long-term viability.

What is the true measure of a design system's success? It lies in its widespread adoption by design and tech teams. This article shares the concrete steps and essential best practices for creating a system that is not only beautiful, but above all easy to use, thus ensuring its long-term viability.

The real challenge: adoption, not creation

Creating a design system is a significant undertaking. However, the real challenge is not in building it, but in ensuring that it is used and maintained by everyone.

Too often, design systems fail. Developers don't find what they need. Designers end up bending the rules. The main reason is simple: a design system has been seen as a deliverable, and not as a tool.

The design system is a living toolIt's not a project. It requires clear governance and regular updates. Its success is measured by the reduction of inconsistencies and the speed of production teams. It helps to reduce technical and visual debt by defining best practice standards. Such a system must therefore be designed from the outset for the scalability and everyday use.

A key step: auditing the raw materials

A design system is rarely built from scratch. The work begins with the analysis and rationalization of the existing system.

Audit the existing

Before creating the first component, you need to analyze the existing website or set of websites and digital services to know where to start. I recommend taking screenshots and compiling them on a single board (method of Design Inventory).

You will quickly notice the number of unnecessary variations of the same element. Take the time to identify duplicates and visual contradictions.

Identify the components and inconsistencies

This step involves listing, and then categorizing, all existing building blocks:

• Colours: How many different shades of blue are used across all screens?

• Typography: How many distinct text sizes are present for the same semantic level (e.g., an H3 title)?

• Buttons: identify the styles (primary, secondary, tertiary) and ensure that their states (active, hovered, disabled) are consistent.

• Icons: Are they consistent in their style, size, and use?

• Grids and spacing: Do the margins and paddings follow a grid system based on a common unit?

This inconsistency-hunting stage is the best argument to justify the investment and the time saved in the future.

Co-creation and clear documentation to facilitate adoption

Once the inventory has been completed, the creation phase should be geared towards ease of adoption.

Co-construction and quick wins

The best way to convince is to demonstrate effectiveness quickly. My advice is to choose the most frequently used and most inconsistent component (identified during the audit).

Often, it's the button or the form input field. If you can standardize this element, you'll demonstrate an immediate time saving for both designers and developers.

The design system is a bridge between design and code. It cannot be the work of a single team. I emphasize the necessity of the co-constructionDesigners must work with developers to ensure that the technical and visual documentation is consistent. This approach guarantees alignment between the designer's intent and the technical implementation.

The common language of tokens

Tokens are variables (colors, spacing, typography, shadows) used both in design tools and in code. These tokens are the glue of consistency because they are the unique and shared reference.

For each component, you must link the tokens used. For example, a button uses the tokens $token-button-primary-surface-default, $token-button-primary-text-default, $token-button-primary-icon-default, $token-button-radius, $token-button-padding.

Rules of use: the anti-drift user manual

An undocumented component is a half-delivered component. Its documentation must answer the question: when and how to use it (and especially, how not to use it)? This is the most important part to avoid misuse and misinterpretations. It contains the "Do's and Don'ts"It specifies the ideal context of use and the permitted combinations.

For example, if you have a main button, clearly state that there should only be one per primary call to action on a screen. This guidance is essential to maintain a high-quality user experience.

Focus on Accessibility by Design

Accessibility is too often seen as a task to be carried out at the end of a project, when it is not simply forgotten. This is a fundamental and costly mistake.

Accessibility is a prerequisite for quality and must be integrated from the design stageEach tested and validated component propagates accessibility to hundreds of potential screens.

Here are the criteria to systematically check in each component before validation:

• Color contrast: The conformity of the contrast ratio is an absolute rule for text, but also for interface elements.

• Information conveyed solely through color: Information should not be conveyed solely through color; there must be another way to access that information.

• Visible focus: The focus state for keyboard navigation should be clear and easy to spot.

• Text transcription: Multimedia elements such as complex images (infographics) must have an accessible text transcription.

And once the component is developed:

• HTML Semantics: use of appropriate tags (<button>, <a>, <hn>) for assistive technologies.

• ARIA role management: only when necessary, the correct and minimal use of ARIA attributes to describe the interface to screen readers.

Conclusion

Creating a design system is a marathon, not a sprint. Its success lies not in the beauty of its components, but in its ability to be adopted and to simplify the lives of teams.

The three pillars for achieving this are: Auditing for legitimacy, co-construction for buy-in, and rigorous documentation for daily use.

The design system is the ongoing investment that transforms the design and development of your digital service, ensuring consistency, speed, and quality.

Christel Agier, Senior UX Designer at UX-Republic