Client: None – Solo Project Role: Founder
During a career break, I was looking for an opportunity to showcase my post-NDA design system work. I stumbled across TradeCentric and decided to do a pass on their design system for practice.
To make an accessible color palette, all content colors need to pass at least AA over any surface colors they could appear against. Following this principle, I expanded TradeCentric’s lighter greys into a set of surface colors while also darkening their content colors to have enough contrast over those surfaces.
I used Figma tokens both to make the color system robust and easy to make changes to, and to allow for easy toggling between light and dark mode. The light/dark mode toggling even feeds into any dev annotations that reference color.
I used Poppins to keep in line with TradeCentric’s existing brand guidelines, and I established a full type ramp with line height at the golden ratio (1.5x font size).
I finished by building a set of robust reusable components that can handle resizing and state changes.
