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.
Icons
Icons provide visual cues in the user experience and improve recognition by conveying information in a compact and easily recognizable form. Use of color in icons should coordinate with the space they occupy and any text.
General principles
- Use neutral Black as default
- Color icons can be paired with text of same emphasis or neutral (strong)
- Avoid pairing icon emphasis or colors with text or backgrounds of different colors
- Icons should be singular solid color
Neutral
Use to express default and less-opinionated UI elements such as background colors, icons, and text elements.
| Color | Emphasis | Description |
|---|---|---|
Gray | medium | Icon color indicating empty states for icons (ex: empty star rating") |
White | inverse | Icon color on medium or strong emphasis backgrounds and colored surfaces (also used on medium and strong colored surfaces) |
Black | default | Default icon color on neutral surfaces |
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 | Description |
|---|---|---|
Blue 600 | strong | Icon color primary on 100-level blue surfaces or paired with text of same color value |
Blue | default | Icon color on a default neutral surface |
Blue 500 | medium | Icon color primary on default neutral surfaces or paired with text of same color value |
| Color | Emphasis | Description |
|---|---|---|
Indigo 600 | strong | Icon color guidance on 100-level indigo surfaces or paired with text of same color value |
Indigo | default | Icon color on a default neutral surface |
Indigo 500 | medium | Icon color guidance on default neutral surfaces or paired with text of same color value |
Accents
Use as a subtle background for accent purposes.
| Color | Emphasis | Description |
|---|---|---|
Purple | default | Icon color on a default neutral surface |
Success, finance and ratings
Use for positive monetary moments, like income patterns, discounts, savings, and revenue growth.
| Color | Emphasis | Description |
|---|---|---|
Green 600 | strong | Icon color success on 100-level green surfaces or paired with text of same color value (ex: savings, discounts, revenue growth, etc) |
Green 500 | medium | Icon color success on default neutral surfaces or paired with text of same color value (ex: savings, discounts, revenue growth, etc) |
Green | default | Icon color on a default neutral surface (ex: savings, discounts, revenue growth, etc) |
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 | Description |
|---|---|---|
Red 600 | strong | Icon color alert on 100-level red surfaces or paired with text of same color value (ex: revenue loss) |
Red | default | Icon color on a default neutral surface (ex: revenue loss) |
Red 500 | medium | Icon color alert on default neutral surfaces or paired with text of same color value (ex: revenue loss) |
Caution
Use for moments that are trending in a negative direction, but don't require the user to take immediate action.
| Color | Emphasis | Description |
|---|---|---|
Black | strong | Icon color caution on 100-level neutral surfaces or paired with text of same color value (ex: downward trends) |
Yellow | default | Icon color on a default neutral surface (ex: downward trends) |
Yellow 600 | medium | Icon color caution on default neutral surfaces or paired with text of same color value (ex: downward trends) |
