These colors have been structured into tokens that represent specific values. These tokens will be arranged in a package to enable referencing and importing it into editor files for use. The tokens are grouped into categories to represent the ones that are directly usable in designs and those that are to be aliased by tokens used in designs. This makes for proper structure and consistent usage of color across all proposed and implemented designs. The only exception for usage of primitive tokens might be when applying color to illustrations.

Primitive Category

Since this category will not be used directly in designs, it does not have any role descriptions.

Brand Colors

Brand colors

Greyscale Colors

Greyscale colors

Function Colors

Function colors

Semantic Category

The semantic category has been sub-categorized into background, text, brand, border, and functions. Possibility for a few more categories exists as the need arises.

Background Colors

Background colors

Text Colors

Text colors

Border Colors

Border colors

Component Colors

Tokens here are component specific and must be used only for the component that they are referencing.

Border colors