Guidelines
Usage
Defining how we apply color to user interfaces
The use of color plays a key role in how we convey emotions, establish brand identity, and guide user interactions. Consistent and thoughtful color choices also improve usability, highlight important elements, and create a cohesive design language across the product.
Background colors
Backgrounds foundational determine color usage hierarchically. Text, borders, and icon color usage will vary depending on the background surface color.
To build a sense of elevation, backgrounds can also be layered on top of one another. For example, a pill within a card can use color to build a visual indexing importance that can be dictated by color.
Levels of emphasis can also be used to further accentuate the importance of specific areas of the UI. By default, toasts use a high emphasis background to drive impact to meaningful and timely moments.
General principles
- Use neutral values for pages/views
- Core Primary color (Blue 400) is reserved for interactive elements (ex: Button)
- Colors designated for feedback should be used sparingly
- Avoid mixing color surfaces
Neutral
Use to express default and less-opinionated UI elements such as background colors, icons, and text elements.
| Color | Emphasis | Interaction | Description |
|---|---|---|---|
Blue | medium | active | Selected or active neutral backgrounds in smaller spaces (ex: Calendar days) |
Gray 300 | medium | Medium emphasis with no intention for color or feedback (ex: Messenger reply bubble) | |
Blue 100 | default | active | Selected or active neutral backgrounds over default neutral backgrounds |
Blue 100 | default | hover | Interactive moments when hovering over default neutral backgrounds |
Black | strong | Highly important messaging with no intention for color or feedback (ex: Toast) | |
Gray 200 | low | Subtle awareness with no intention for color or feedback | |
White | default | Default background color with no meaning |
Primary and info
Use our brand color to tie in the most important user moments with how we express ourselves as an organization through our identity. You can also use these in info moments.
| Color | Emphasis | Interaction | Description |
|---|---|---|---|
Blue 300 | default | disabled | Disabled primary backgrounds |
Blue 500 | strong | Highest level of importance for primary moments | |
Blue 100 | default | Backgrounds for primary moments | |
Blue | medium | Important primary moments (ex: primary CTAs) |
| Color | Emphasis | Description |
|---|---|---|
Indigo 500 | strong | Highest level of importance for guidance moments |
Indigo 100 | default | Backgrounds for guidance moments |
Indigo | medium | Important guidance moments |
Accents
Use as a subtle background for accent purposes.
| Color | Emphasis | Description |
|---|---|---|
Purple 100 | low | Subtle background for accent purposes |
Success, finance and ratings
Use for positive monetary moments, like income patterns, discounts, savings, and revenue growth.
| Color | Emphasis | Description |
|---|---|---|
Green 500 | strong | Highest level of importance for success moments (ex: savings, discounts, revenue growth, etc) and ratings |
Green | medium | Important success moments (ex: savings, discounts, revenue growth, etc) and ratings |
Green 100 | default | Backgrounds for success moments (ex: savings, discounts, revenue growth, etc) and ratings |
Alert
Use to convey a sense of urgency, to assist in preventing potential errors or security issues, and for negative monetary moments like revenue loss.
| Color | Emphasis | Interaction | Description |
|---|---|---|---|
Red 300 | default | disabled | Disabled alert backgrounds |
Red 600 | strong | Highest level of importance for alert moments | |
Red 100 | default | Backgrounds for alert moments | |
Red | medium | Important alert moments |
Caution
Use for moments that are trending in a negative direction, but don't require the user to take immediate action.
| Color | Emphasis | Description |
|---|---|---|
Yellow 600 | strong | Highest level of importance for caution moments |
Yellow 100 | default | Backgrounds for caution moments |
Yellow | medium | Important caution moments |
