Colors are a pivotal element of brand identity, yet they are challenging

to translate into a tokenized system. When creating a color scheme, it's essential to consider factors like accessibility, harmony, balance, and consistency. A tokenized system demands a comprehensive approach to color selection, going beyond the traditional limited color palettes.

Many products used to rely on a handful of handpicked colors. This approach falls short in terms of accessibility and is not

capable of advanced features like theme management.

A tokenized color system typically involves three layers:

1. Base layer: Includes all unique colors, each

with a generic identifier, such as color-primary-100.

2. Semantic layer: References the base layer with more

meaningful identifiers to convey their purpose, such as color-background-primary-strong.

3. Component-level layer: References semantic tokens for

specific components, like button-primary-hover-background.

In the next section, I'll introduce the framework we use in

Once UI to define colors.

This system is designed to be:
-> Easy to adapt
-> Consistent
-> Scalable
-> Simple

This framework isn't the best solution, but one that effectively balances the complexities of a comprehensive color system with the need for practical application.