Here you see the original messy condition of design system:

Based on the collected product references I create a range of color tokens to describe all the spectrum of colors. Tokens allows to have variety of colors and in the same time avoid multiplying of close shades. Then I linked color tokens to specific UI styles.

I collected icons from all screens of the product, compiled a list of necessary metaphors, and categorized them. To speed up the process, I used the Material Design library so that future generations of designers could easily expand the collection without changing the style of the icons.

I kept the font unchanged to meet the deadline without spending much time on approvals. I created a typographic hierarchy and created styles in Figma to every design breakpoint. I also described grids for desktop, tablet, and mobile devices.

Next stage is components design, state descriptions, and automation. Complex controls have nested components what allows to keep it easy to manage with.

Wins — The results of the project is flexible and clear component library covering the actual needs of the product. Significantly increased the speed of building new features and sections; increased the average user interface rating; Increased development speed; increased interface consistency. The next stage was the deployment of an interactive design system incorporating CSS and JS specifications.