Design tokens

Design tokens are a tech-agnostic way to store low-level values and then use them to create the styles for your website. Use tokens instead of hard coded values to ensure a scalable, consistent, and sustainable system.

Design tokens are available to use in your stylesheets by custom properties (MDN web docs).

Color

For consistency, only use the colors below throughout your website. Keep in mind that orange, pink, indigo, and green are only used in special cases, such as a warning state.

Preview CSS custom property Value
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

Space

Use the spacing tokens to create a visual balance that makes your website easier to scan. These space tokens should be used for all padding, margin and position coordinates.

Preview CSS custom property Value
var(--space-xxx-small) 2px
var(--space-xx-small) 4px
var(--space-x-small) 8px
var(--space-small) 12px
var(--space-medium) 16px
var(--space-large) 24px
var(--space-x-large) 32px
var(--space-xx-large) 40px
var(--space-xxx-large) 48px
var(--space-xxxx-large) 64px
var(--space-xxxxx-large) 96px

Accessibility

When using colors, be sure to use them in accessible combinations. Use the WebAIM Contrast Checker and reference WCAG 2.1 Understanding Success Criterion 1.4.3: Contrast (Minimum) to make accessible decisions.

Integration

For integration, see getting started CSS documentation to use design tokens as CSS custom properties.

If you found a mistake on this page, would you kindly submit a fix on GitHub?

Need help? Ask the team about your Design System questions.