Design systems
In September 2023, I proposed the need for a more comprehensive design system for our product. Collaborating with the amazing Lead UX Designer, Cory Grunkemeyer, who had recently joined the company, we successfully convinced the team that it was time to elevate our design standards.The key drivers for this initiative were enhancing shipping speed without compromising design quality, reducing technical debt, ensuring coherent components, and leveling up our product design.
Sidenote: I want to give a shoutout to Victoria Leontieva, Principal Product Designer at Microsoft, who has mentored me over the past two years. Her guidance, especially on design systems, has been invaluable.
Defining colors tokens and text styles
Setting up color tokens to support different themes
We defined color primitives and converted them into tokens for both light and dark themes.
Documenting color usage
As some colors were updated from those in production, I created this overview to help developers understand how the new colors and naming conventions apply to components.
Defining text styles
We optimized our text styles for a calmer appearance by decreasing font weight and size, and increasing line height. For the naming convention, we stuck closely to Tailwind CSS, which is used for the implementation.
Creating components
Setting up components
In this initial iteration, our goal was to establish minimalistic and adaptable components capable of accommodating all our current use cases, with the intention of expanding them as necessary over time.
