Do establish visual hierarchy with the
$darkerGray color variables.
Don't use lighter grayscale variables (like
$lightGray) against white backgrounds. These will fail accessibility tests.
Each app should override
$secondaryColor with its primary brand colors.
Do supplement color with text and icons to differentiate data or call out a UI element.
Don't attempt to communicate something to users with only a change in color. This is inaccessible to color-blind users.
When building a feature that allows users to add labels to their data, use this color palette for the suggested presets.
Use this color range to provide a value judgment (ranging from “bad” to “good”) on user-generated information.