Colors

How to use

There are two different ways to apply a color to a UI element, via design tokens or via CSS helper classes.

Which one to use depends on the context since both refer to the same design token values. From the design system perspective there’s no difference between the two methods (it’s more of a preference for the “consumer” codebase).

Design tokens

You can use the color design tokens directly in your CSS definitions:

.your-selector {
  color: var(--token-color-foreground-primary);
  background: var(--token-color-surface-faint);
  border: (--token-color-border-strong);
  & :hover {
    color: var(--token-color-foreground-high-contrast);
    background: var(--token-color-foreground-action-active);
  }
}

CSS helper classes

You can use one of the predefined “color” CSS helper classes:

<div class="hds-foreground-primary hds-surface-faint hds-border-strong">...</div>

To use this classes you have to import the CSS file [products|devdot]/css/helpers/colors.css from the @hashicorp/design-system-tokens package.

Semantic Tokens

Foreground

Use for text and icons.

Surface

Use for container and component backgrounds.

Border

Use for container and component borders. Neutral values can also be used for horizontal rules.

Focus

Use to indicate an element is in a focused state. Critical values for critical actions only, Action values for everything else. Notice: they're used internally by the design system to define focus states.

Page

Use for page backgrounds.

Branding Colors

Hashicorp

Boundary

Consul

Hcp

Nomad

Packer

Terraform

Vagrant

Vault

Waypoint

Core Palette

Core Palette colors should be used sparingly and only when the correct semantic mapping isn’t available for the use case.

Blue

Purple

Green

Amber

Red

Neutral

Alpha