Why should we use design tokens for colors?

• one of the first steps to a design system
• helps to keep a consistent design: no more color guessing, just apply the predefined color.
• automatic adjustments for different themes: once defined, select a token that's automatically adjusted for all themes
• easy to adjust if we ever decide to change color: instead of adjusting all text fields, we'd only need to adjust the design token.

How does it work?

1. create color primitives based on the Tailwind CSS color library
2. create color tokens and assign primitives for each theme to it
3. assign the color tokens to all content

How do I know which color token I should assign to a content piece?

• the naming convention should help to identify the use case
• additionally, you can find an overview of how to apply the new colors to existing designs here in Figma

Scope
I'd suggest we start with the most basic color styles: content-xyz, surface-xyz, and border-xyz. We can build on it as we go.

Note
I tested the colors for all themes for the most common screens and made sure they pass accessibility requirements. In case, you find a place nevertheless where the colors don't fit well, let me know :)

Resources