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.
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.
blue
-
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
maize
-
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
neutral
-
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
teal
-
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
orange
-
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
pink
-
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
indigo
-
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
green
-
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 |