Blue and maize are our primary colors, and teal is frequently used for link text and other interactions.

We also provide a neutral gray and a set of secondary colors: orange, pink, indigo, and green. Keep in mind that for websites, secondary colors should only be used in special cases, such as in a warning state or as an accent color.

Across all colors, 400-level is the primary shade.

See our full color table and contact the Design System team with questions about appropriate color choices.

Text color

Headers and body text are neutral-400.

Links are teal-400 and underlined.

Use white text when the text is on a dark background. For example, teal-400 and pink-400 buttons must use white text. View our Figma Guidelines for more examples.

Learn more about how to use these colors as design tokens when building a user interface.


Be sure to use the colors in accessible combinations that meet WCAG 2.1 AA accessibility standards:

  • Small and regular text must have a contrast ratio of 4.5:1.
  • Large text, as well as graphics and interface controls, must have a contrast ratio of 3:1.

You can use the WebAIM Contrast Checker and reference WCAG 2.1 Understanding Success Criterion 1.4.3: Contrast (Minimum) to make decisions and ensure the color combinations meet accessibility standards. If you are designing in Figma, you can use the Color contrast plugin to check your work.

In some situations — like with slide deck templates — it can be helpful to provide a variety of contrasting color options for background and text. This supports accessibility (especially considering eye strain and vision impairments), as well as use in a variety of contexts.

Full color table

Use design tokens or hex color codes.


  1. var(--color-blue-100) #F7F8F9
  2. var(--color-blue-200) #B2BEC9
  3. var(--color-blue-300) #4C6781
  4. var(--color-blue-400) #00274C
  5. var(--color-blue-500) #001324


  1. var(--color-maize-100) #FFF9E6
  2. var(--color-maize-200) #FFEA9B
  3. var(--color-maize-300) #FFDA50
  4. var(--color-maize-400) #FFCB05
  5. var(--color-maize-500) #EABA02


  1. var(--color-neutral-100) #E5E9ED
  2. var(--color-neutral-200) #8A96A1
  3. var(--color-neutral-300) #637381
  4. var(--color-neutral-400) #212B36
  5. var(--color-neutral-500) #06080A


  1. var(--color-teal-100) #E9F2F5
  2. var(--color-teal-200) #A7CDDB
  3. var(--color-teal-300) #65A8BF
  4. var(--color-teal-400) #1D7491
  5. var(--color-teal-500) #106684


  1. var(--color-orange-100) #FFF1EB
  2. var(--color-orange-200) #FFB899
  3. var(--color-orange-300) #FF8A58
  4. var(--color-orange-400) #F25F1F
  5. var(--color-orange-500) #C74E1A


  1. var(--color-pink-100) #FCEBEB
  2. var(--color-pink-200) #F29D9D
  3. var(--color-pink-300) #EC6969
  4. var(--color-pink-400) #D93838
  5. var(--color-pink-500) #BF3232


  1. var(--color-indigo-100) #EEF1F9
  2. var(--color-indigo-200) #AAB9E3
  3. var(--color-indigo-300) #7C93D4
  4. var(--color-indigo-400) #506FC5
  5. var(--color-indigo-500) #274391


  1. var(--color-green-100) #EAF8EE
  2. var(--color-green-200) #96DBAA
  3. var(--color-green-300) #57BC75
  4. var(--color-green-400) #20A848
  5. var(--color-green-500) #198539