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?