Guidelines
A simple system for interfaces and illustrations
Core colors are expanded into a range of values to support varying moments within the product. The usage patterns for each value below can be found in our usage page.
Use to express default and less-opinionated UI elements such as background colors, icons, and text elements.
Backgrounds, text, iconography, shadows.
Use to drive focus and immediate attention to primary product moments. Overuse of this color is discouraged, so we can focus on the moments that matter.
Buttons, links, information, progress, promotional moments, brand moments, selected states.
Use as a secondary color to guide users through onboarding, user assistance, map overlays, and data visualizations.
Data visualizations, informational moments, user assistance.
Use as a subtle background for accent purposes.
Data visualizations, informational moments, user assistance.
Use for ratings or to express growth, upward trends, financial moments (cost figures, savings, discounts, etc..), and positive feedback.
Positive moments, savings, discounts, upward trends, growth, ratings.
Use sparingly to not deter from important moments that require the user’s immediate attention.
Feedback moments, alerts, negative impact, cancellations, deletions and urgency.
Use to bring additional energy to the ux and provide cautionary moments of user feedback.
Feedback with a subtle sense of caution. Commonly used in alerts and toasts.