Guidelines

Overview

A simple system for interfaces and illustrations

Colors play a crucial role in communicating status, guidance, and providing visual cues. Color should be used sparingly to drive focus to moments that matter. Color should not be used to add personality or flair.

Neutral100200300400500600
Netural
Bluecore
Greencore
Yellowcore
Redcore
Indigocore
Purplecore

Color themes

Our use of color can be defined in two major types classified as brand and feedback colors.

Brand colors

These colors are used to create a consistent visual identity and evoke specific emotions or associations within a design system.

ValueDescription
neutralUse to express default and less-opinionated UI elements such as background colors, icons, and text elements.
primaryUse 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.
secondaryUse to communicate guide posts such as onboarding moments and newly introduced product features.
accentUse as a subtle background for accent purposes.

Feedback colors

These colors are used to help re-enforce important moments in the user journey that suggest or require additional guidance, gather user input, and improve the user experience.

ValueDescription
successUse for positive monetary moments, like income patterns, discounts, savings, and revenue growth.
alertUse to convey a sense of urgency, to assist in preventing potential errors or security issues, and for negative monetary moments like revenue loss.
cautionUse for moments that are trending in a negative direction, but don't require the user to take immediate action.
See all colors

Color usage

Color usage is arranged into four high-level categories background, border, text and icon. Color usage patterns are represented by their intended use case.

alt text
ValueDescription
BackgroundLowest level UI element where other UI element stack on top
BorderStroke around container element
TextWritten language intended to clarity intention of element or interaction
IconVisual support for UI element
Read more about color usage

Emphasis

Not all experiences are treated equal. To provide varying levels of importance in conjunction with the hue, we use levels of emphasis to draw the users attention. A strong emphasis is high contrast in comparison to the surface the component occupies.

alt text
ValueDescription
DefaultApproach with no variables introduced
LowVisually subdued moments
MediumIncreased level of importance in the UI
StrongHigh level of importance or impact
InverseOpposing end of default behavior

Interaction

Status such as hover, selected, disabled, and others describe how users engage with content. Not all elements are interactive, but our color usage patterns provide additional color definitions when applicable.

alt text
ValueDescription
DefaultNo user engagement has taken place
LowCursor is placed above the element
MediumEnabled state after user has pressed
StrongState of link after user has viewed href in their browser
InverseUser can no longer engage with the element