Colors

Color Palette#

Color Usage#

General Guide#

DoDon't
Light color as a background + corresponding text colorA dark color as background
White text + a primary color as backgroundA light color as background + white text
Text in a dark color + white background
Light color as background + corresponding dark color text

Accessibility#

Charcoal#

Use charcoal for

  • Main copy (charcoal-base).
  • Muted copy (charcoal-lighter).

Cloud#

Use cloud for

  • Default component borders (cloud-base).

Blue#

Use blue for

  • highlights/hover
  • primary buttons
  • checkmarks and radio buttons
  • highlight form fields
  • text links

Red#

Use red for

  • errors in form fields
  • destructive buttons
  • error alerts

Green#

Use green for

  • success alerts

Yellow#

Yellow is used for content that requires users to make a decision that is of a low priority. Use yellow for

  • warning alerts
  • unfulfilled status

Orange#

Orange is used for content that requires an action that is of a medium priority. Use orange for

  • overdue status

References#

Style tokens

Out of scope#

Information on colors and their usage guidelines do not consider the following:

  • Color in data visualizations (charts & bar graphs)
  • Hub navigation colors
  • Hub top bar colors
  • iQ brand colors within Hub
Last updated on by Diana Thomson