Color
Colors when accurately applied can be a potent tool that enables designers and developers to implement solutions with speed and efficiency. Here are a couple of things to keep in mind.
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
Greyscale 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
Text Colors
Border Colors
Component Colors
Tokens here are component specific and must be used only for the component that they are referencing.