Color utility classes allow you to determine the background, border, or foreground colors for your elements. Simply format a utility class using the color names shown below. For example:

• • Use .u-bg-blue-600 to set an element's background color to #1F73B7.
• • Use .u-fg-grey-800 to set an element's foreground color to #2F3941.
• • Use .u-bc-explore-blue to set an element's border color to #30AABC.

Color utilities also include special suffixes for .u-{??}-current-color, .u-{??}-transparent, and .u-{??}-inherit.

Product Colors

Primary Colors

Secondary Colors

Secondary colors are meant to be used in icons, tags, status badges, and illustrations. Each color has a light and a dark weight, and each weight has a default (bright) and muted version. Muted colors are denoted by an "M" prefix on the weight (i.e. M400).

Playground

<ul> <li><div class="u-bg-blue-100 u-p-sm u-mb-sm u-ta-center">.u-bg-blue-100</div></li> <li><div class="u-bg-kale-700 u-fg-kale-200 u-p-sm u-mb-sm u-ta-center">.u-bg-kale-700 .u-fg-kale-200</div></li> <li><div class="u-border u-bc-blue-600 u-p-sm u-ta-center">.u-bc-blue-600</div></li> </ul>