Color

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

Accessibility

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.2 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.

var(--color-blue-100) #F7F8F9
var(--color-blue-200) #B2BEC9
var(--color-blue-300) #4C6781
var(--color-blue-400) #00274C
var(--color-blue-500) #001324

var(--color-maize-100) #FFF9E6
var(--color-maize-200) #FFEA9B
var(--color-maize-300) #FFDA50
var(--color-maize-400) #FFCB05
var(--color-maize-500) #EABA02

var(--color-neutral-100) #E5E9ED
var(--color-neutral-200) #8A96A1
var(--color-neutral-300) #637381
var(--color-neutral-400) #212B36
var(--color-neutral-500) #06080A

var(--color-teal-100) #E9F2F5
var(--color-teal-200) #A7CDDB
var(--color-teal-300) #65A8BF
var(--color-teal-400) #1D7491
var(--color-teal-500) #106684

var(--color-orange-100) #FFF1EB
var(--color-orange-200) #FFB899
var(--color-orange-300) #FF8A58
var(--color-orange-400) #F25F1F
var(--color-orange-500) #C74E1A

var(--color-pink-100) #FCEBEB
var(--color-pink-200) #F29D9D
var(--color-pink-300) #EC6969
var(--color-pink-400) #D93838
var(--color-pink-500) #BF3232

var(--color-indigo-100) #EEF1F9
var(--color-indigo-200) #AAB9E3
var(--color-indigo-300) #7C93D4
var(--color-indigo-400) #506FC5
var(--color-indigo-500) #274391

var(--color-green-100) #EAF8EE
var(--color-green-200) #96DBAA
var(--color-green-300) #57BC75
var(--color-green-400) #20A848
var(--color-green-500) #198539

Color

Text color

Accessibility

Full color table

blue

maize

neutral

teal

orange

pink

indigo

green