Refreshing Clio Design System
The new visual theme for Clio Design System captures our distinctive personality and voice, drawing inspiration from Clio's refreshed design principles to create a cohesive and modern identity.
Introduction
In late 2022, the design team was tasked with envisioning the future of the Clio Design System. As part of the visual design working group, I played a key role in defining the new direction for the Clio Design System. This included establishing the updated color palette, redesigning key components, and ensuring smooth communication between designers and front end engineers.
Color as the foundation
A thoughtful colour palette serves as the visual foundation of a design system. The previous colour system was in a state of disarray. There was no consistency between the core colours and several extended palettes were introduced over the years. It was important to revamp our colour system to establish a solid foundation for the design system.
Bold new colours
To unify and standardize our colours, I created nine palettes with an algorithm, encompassing the full spectrum. Each palette underwent subsequent tweaks to ensure particular colour combinations would adhere WCAG Success Criterion 1.4.3 for contrast ratios.
Each generated color palette underwent an accessibility audit to ensure that the color combinations met contrast guidelines. By overlaying foreground colors on background colors within this chart, I identified which combinations to prioritize. During this process, several palettes were adjusted to ensure they performed well across various components and surfaces.