What is a color system in UX design?
A color system is a defined collection of colors organized by their role and relationship within an interface. Rather than selecting colors individually for each design decision, a color system establishes a palette of colors, names them semantically according to their purpose, and defines rules for how they are used. A typical color system includes primary colors for key actions and brand elements, secondary colors for supporting actions, neutral colors for backgrounds, borders, and text, semantic colors for feedback states such as error, warning, success, and information, and surface colors for backgrounds at different levels of elevation.
How does a color system support accessibility?
A well-designed color system bakes color contrast compliance into the system itself rather than treating it as an afterthought. By defining color combinations as named token pairs, such as text.primary on surface.background, and verifying that each pair meets WCAG contrast requirements during system design, teams ensure that any interface built from the system is accessible by default. This is more reliable than checking individual color combinations at the component level, where it is easy to introduce non-compliant combinations through ad-hoc color choices that fall outside the defined system.
How does a color system relate to design tokens?
Color systems are typically implemented through design tokens. Global color tokens store raw color values: blue-500 stores a specific hex code. Semantic color tokens reference global tokens and communicate intended use: color.action.primary references blue-500. Component tokens may reference semantic tokens: button.background.primary references color.action.primary. This three-layer structure means that changing the primary brand color from blue to green requires updating only the global token, which cascades through all semantic and component tokens automatically, maintaining consistency across the entire interface.