Color Guidelines

Color is a powerful tool in UI design. When used thoughtfully, it can aid navigation, convey meaning, and improve accessibility. The following guidelines will help you use color effectively and consistently within our system.

1. Use System Colors

Always use colors from the design system palette. This ensures a consistent brand presence and makes future design changes easier to implement.

2. Convey Meaning with Color

Primary actions (such as main buttons) should use the primary brand color.
Success, error, and warning states should use their designated semantic colors.
Don't use color as the only way to convey information—supplement with icons, text, or shape when possible.

3. Maintain Accessibility

Text and backgrounds must meet WCAG minimum contrast ratios:
- Regular text: 4.5:1
- Large text: 3:1
Avoid color combinations that can cause confusion for users with color blindness (such as red and green together).
Use accessible color pairs from the system palette.

4. Use Color Sparingly

Limit the number of colors in any given interface to reduce cognitive load.
Use accent colors to highlight or draw attention—don’t overuse them, as this reduces their effectiveness.

5. Thematic Consistency

Honor theming and dark/light modes by using tokens or variables instead of hard-coded colors.
Test your UI with both light and dark backgrounds.

6. States and Interactivity

Ensure hover, focus, and active states are noticeably distinct from the default state without relying solely on color.
Disabled states should use a neutral color with sufficient contrast to be legible but indicate inaction.

For more information, see our Color Tokens page.