Skip to main content

Colors

Color palette​

Original palette​

The original color palette describes most colors semantically, communicating what the colors are intended to represent in our system.

info

The main and invert colors will vary depending on the color scheme. For example, in a light color scheme main = black and invert = white, but in a dark color scheme main = white and invert = black. Use black or white for elements that should be black or white regardless of the color scheme.

Updated palette​

A new color palette is being developed. It provides names that describe the color instead of describing its semantic usage, and uses a numeric scale to represent how light or dark a color is.

Text colors​

Construct text color utility classes with .color--[enum]. For example, .color--gray-1 applies the gray-1 color.

Background colors​

Construct background color utility classes with .bg-color--[enum]. For example, .bg-color--gray-1 applies the gray-1 color.

Border colors​

Construct border color utility classes with .b-color--[enum]. For example, .b-color--gray-1 applies the gray-1 color.