Colors
Overview
Color is a core part of the visual language and plays a critical role in brand recognition, hierarchy, and usability. While the system includes a full color palette, a small set of primary brand colors should be used first and most often.
Color should always be applied intentionally — reinforcing meaning, guiding attention, and maintaining accessibility across all interfaces.
Guidelines
Dos
- Use primary brand colors before introducing secondary or neutral colors.
- Apply color to reinforce hierarchy, meaning, or state.
- Ensure sufficient contrast between text and background colors.
- Use color consistently across similar components and interactions.
- Consider the context in which color appears (UI, marketing, feedback, data).
Don’ts
- Don’t introduce custom or off-palette colors.
- Don’t overuse accent or secondary colors.
- Don’t rely on color alone to convey meaning or status.
- Don’t use low-contrast color combinations.
- Don’t apply brand colors decoratively without purpose.
Related Pages
Palette - Full listing of colors