Colors

We have 8 color palettes — grouped into primary and secondary — with a range of at least 5 shades in each. You can use our design tokens when building a user interface or copy the hex color codes anytime!

Across all colors, 400-level is the primary shade. We note any important considerations for using a color along with the respective table.

Color contrast

Be sure to use the colors in accessible combinations that meet WCAG 2.1 AA standards. For example, you’ll need to use white text on dark backgrounds (generally 400-level or higher).

The minimum contrast ratio for small and regular text is 4.5:1. Large text, graphics, and interface controls must be at least 3:1. We recommend using the WebAIM Contrast Checker to confirm your choices.

Primary color tables

Blue, maize, and teal, along with a neutral palette, are our primary colors. Each palette includes our common use cases for certain shades. Uses specific to dark mode (currently only on this website) are noted in parentheses.

Blue

Blue is great for backgrounds (like in our footer reusable design). The lighter shades are also our text color in dark mode.

Maize

Maize is best for small accents. We otherwise limit our use of it since no combination of maize and white meets color contrast requirements! Keep this in mind when using maize.

Teal

Teal is synonymous with interaction in our web presence, especially links. Be cautious about using it for other purposes.

Neutral

Neutral is for text. We purposely use shades of gray instead of pure black, which can be harder on the eyes. Our lightest shade is also a go-to for subtle borders.

Secondary color tables

Our secondary colors are orange, pink, indigo, and green. These should only be used in special cases for things like success, warning, or alert banners, as well as different kinds of accents. They can also be a good option for icons. In all cases, remember to never use color alone to convey meaning.