BACK
The Problem
When we started building the Foundations for the TBCx Design system, one of our the challenges was reimagining the color system. Although some attractive colors were used across the products, I realized they lacked proper structure, scalability, and accessibility to support our rapidly growing multi-brand design system.
new color system had to be
Accessible – Color scales in the new system needed to be accessible, with consistent contrast jumps between steps, allowing designers to have confidence in the contrast between colors when using them in UI.
Structured and scalable – Since TBCX is a multi-brand design system with a growing number of products and brands, the system needed to have a defined process for adding new brand colors and generating consistent scales.
Versatile but not overwhelming – Colors needed to have enough variations to cover all the use cases without having an overwhelming number of choices.
Built around the main brand color – The system also needed to be centered around the main brand color, ensuring that the hues complemented it well and neutral colors had a subtle touch of the brand’s color influence.
Key Technical Solutions
To build a system that was both logical and beautiful, we moved away from basic color-picking and took a more systematic approach:
switched to hsluv color space
To build a system that was both logical and beautiful, we moved away from basic color-picking and took a more systematic approach:
Math-Based Generation
We took our main brand hue and mathematically divided the color wheel to generate 19 harmonious supporting colors, creating a reliable 10-step scale for each.
Brand Integration
We mapped our exact TBC brand hex codes into these new scales by matching them to the closest mathematical lightness value.
Adjusting for the Abney Effect
Mathematical colors can sometimes look artificial in a real UI. We made manual, optical adjustments to the hues (like shifting lighter greens towards yellow) so they look natural to the human eye.
Results
– Delivered a robust system supporting all TBC digital products with 5 brand palettes and 9 extended color scales.
– Achieved built-in accessibility with consistent, predictable contrast jumps across the whole system.
– Created clear governance and rules for future expansion.
– Laid a solid, structural foundation for our upcoming design token system.
Read more