Color Tokens

Color tokens help maintain consistent use of color throughout your app. The Horizon Design System provides palettes for theme colors as definined in the Horizon Design System Foundations guide.

Color tokens are referenced using the --terra-color-{name}-{n} CSS custom property, where {name} is the name of the palette and {n} is the numeric value of the desired swatch.

Theme Tokens

Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.

Primary

Our primary palette consists of black, white, red, and blue. These colors are used in logical ways throughout the site to highlight actions when they are important. We use a restricted palette to give attention and hierarchy to our content without distraction.

–terra-color-{name}

Extended Palette

The extended palette consists of a tint and shade for the brand colors in the primary palette. Usage of these colors varies depending on the touch point, but they come in handy to ensure that your combinations are always AAA accessible.

–terra-color-{name}

Neutrals

Neutrals have varying degrees of value that allow for the appropriate levels of contrast across the system. Typically, they are used for text and subtle backgrounds to de-emphasize a piece of secondary content.

–terra-color-carbon-{n}

Additional Colors

International Orange and Active Green are colors that are used sparingly and intentionally.

–terra-color-{name}