Color

System Overview

The color system uses four main base groups: Neutral, Primary, Secondary, and Tertiary plus four semantic or feedback related color groups: Success, Warning, Danger, and Info. It is highly encouraged but not inherently necessary to customize all global colors. All global color swatches are linked to every element and component within our system.

Neutral Colors

Neutral colors are used for the main interface elements on the website. Elements such as text, dividers, borders, and backgrounds use neutral colors as a foundation for primary, secondary, and tertiary colors to rest upon.

Primary Colors

Primary colors are colors that are displayed most frequently across the website and component library. The primary color is almost always the primary brand color and is the color that is used for primary and important action and navigation elements such as buttons, links, tabs, etc.

Secondary and Tertiary Colors

Secondary and tertiary colors provide more ways to accent and distinguish UI elements. Having both a secondary and tertiary color is optional and depends on a per project basis. Check your design file for full specifics. These colors should be applied sparingly to accent select parts of the interface.

Feedback Colors

Feedback colors are reserved colors used to communicate feedback to the user. They are used to indicate the state of an action. The four feedback states given colors include: Success, Warning, Danger, and Info.

Alias & Global Colors

The colors are divided again into 2 distinct groups: Alias color and Global color.

Alias colors

Alias colors are tied to specific roles using the alias of a global color. For example, bg-color-base01 is using the global swatch of Neutral 10. When linked to an alias (i.e. a class or token name), it can be re-used elsewhere on the website without having to relink it over and over again every time you want to style a particular element or component.

These colors often use the most common colors within a system such as the main primary, secondary, tertiary colors, light and dark neutral colors. They can be useful as a shorthand for when you want to apply a common background or text color but can be limiting if you want to expand past these boundaries.

Global colors

Global colors refer to the usage of the global color swatches without an alias. When you want to style something in a particular color but said color isn't under an alias, you can use the appropriate global color to style backgrounds, text, and borders.