Context
BI Group’s platform lacked scalability and consistency in its color system — colors were hard-coded, theming was manual, and accessibility wasn’t achievable. The goal was to rebuild the system from the ground up to support a dark theme and create a scalable token foundation for all future products.
Process
I collaborated closely with the Frontend Team Lead to align on both design and technical structure. Together, we defined a token architecture that bridged Figma and code.
I rebuilt the color library from scratch — establishing a clear base palette (blue accents, grayscale scale, utility tones) and a semantic layer (background, surface, text, icon, action). Each layer became a tokenized system ready for light and dark themes.
When testing the dark theme, I found several accessibility challenges: accent colors failed contrast tests and inputs lacked visibility.
Through iterative testing, I refined an adaptive accent system that balanced brand identity with WCAG 2.2 standards.
Implementation
- 50+ semantic tokens covering all interface states
- One-click theme switching without page reload
- Fully WCAG 2.2–compliant contrast ratios
- Cross-project token reusability and easier maintenance
Outcome
The redesigned system now ensures visual consistency, simplifies development, and supports premium product styling across BI Group’s ecosystem. The dark mode reduces eye strain, enhances accessibility, and delivers a modern, polished experience that aligns with the company’s design maturity goals.
Reflection
This project deepened my appreciation for accessibility-first design and early engineering collaboration. I learned that scalable systems emerge when design and development share a single visual language — built not from colors, but from logic and structure.