Picking colors by feel works fine for a single screen. It falls apart the moment you need a second theme, a dark mode, or a third brand product sharing the same system.
Semantic tokens are the answer
Define colors by their role in the interface, not their hex value. Semantic tokens like `color-primary` or `color-success` allow you to swap palettes without touching the component layer.
- Primary surface tokens
- Text color tokens
- Border and divider tokens
- Status indicator tokens
- Interactive state tokens
- Elevation and shadow tokens
References
- W3C Web Content Accessibility Guidelines (WCAG) 2.1
- Material Design Color System
- Sass color functions for theming