Building a Unified Design System
Our mandate was to develop a robust design system tailored for Stellantis’ diverse range of vehicle brands. This system had to integrate seamlessly into Figma and be implemented by the development teams through a unified tokenization system.
Project
Stellantis Design System
Duration
7 Months
Role
UI Design
The Challenge
-
Colour & hierarchy
We needed a colour system that not only distinguished interactive elements but also clarified relationships and prominence. Important components had to stand out without overwhelming the overall design.
-
Puting accessibility first
Ensuring our text, icons, and interactive elements met AA accessibility standards was crucial. We had to integrate accessibility from the outset so that all users—regardless of ability—could navigate and understand the interface
-
Using colours consistently
Inconsistent colour usage can confuse users about states like activity, error, or success. We needed a unified colour strategy that clearly conveyed each state while maintaining a cohesive look and feel.
Fulfilling the Business Goal
Much of the weight of the system falls on the ability to navigate the user towards the main goals of the website. Primary buttons draw the user’s attention to the main call to action. They stand out on a page because of their colour contrast and icon when positioned on a screen filled with content.
The Impact
The design system streamlined workflows by providing a single source of truth for design elements and patterns. It facilitated smoother collaboration between designers and developers, reduced redundancy, and ensured that each brand maintained its distinct personality while adhering to overall quality and accessibility standards. The result was increased efficiency, a more agile development process, and higher-quality digital products across the Stellantis portfolio.
