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.
Border colors
Borders are used in product design to visually separate or delineate elements, create hierarchy, and provide structure to the overall layout.
General principles
- Use neutral values on non-interactive moments
- Borders are not used with colored backgrounds to accentuate separation or elevation (excludes map overlays)
- Default border is Gray 300
Neutral
Use to express default and less-opinionated UI elements such as background colors, icons, and text elements.
| Color | Emphasis | Interaction | Description |
|---|---|---|---|
Black 300 | strong | Default border on medium or with strong neutral backgrounds | |
Blue | default | active | Default border on neutral active background to add emphasis to selected or active states |
Gray | medium | Default border on low or neutral backgrounds (also used with neutral backgrounds with low emphasis) | |
Gray 300 | default | Default border on neutral surfaces |
Examples