Design tokens
Theme color tokens
USWDS theme color tokens provide flexible, accessible, customizable color choices for your project.
USWDS theme color tokens are designed to be useful and effective for small and large projects. Each theme token is drawn from a system color token and we only use token-based colors in official components.
About theme color tokens
USWDS theme color tokens are divided into five high-level role-based color families: base, primary, secondary, accent-warm, and accent-cool.
Base is a project’s neutral color, typically some tint of gray, and usually used as the text color throughout.
Primary, secondary, and accent colors can be thought of as falling into a proportional 60/30/10 relationship: about 60% of your site’s color would be the primary color family, about 30% would be the secondary color family, and about 10% would be the accent color families (accent-warm and accent-cool). Note that these proportions are for non-base colors. In many cases, the neutral base text color will be the predominant tone on your site.
Each color family has seven possible lightness grades, from lightest to darkest, though not every family needs to include a color at each grade. Some grades may be set to false in your project’s theme settings. The default USWDS theme palette does not use every grade for every family. The primary and secondary families also have a vivid grade available.
Customizing theme color tokens
Customize theme color tokens using the variables listed below in the _uswds_theme_color.scss settings file with system color tokens. Set any unused theme color to false.
For example, if you wanted to set the value of the primary-vivid token to blue-warm-50v, set the variable $theme-color-primary-vivid: "blue-warm-50v" in _uswds_theme_color.scss.
| Color | Token | Default | Settings variable | Value |
|---|---|---|---|---|
| 'base-lightest' | 'gray-5' | $theme-color-base-lightest | #f0f0f0 | |
| 'base-lighter' | 'gray-cool-10' | $theme-color-base-lighter | #dfe1e2 | |
| 'base-light' | 'gray-cool-30' | $theme-color-base-light | #a9aeb1 | |
| 'base' | 'gray-cool-50' | $theme-color-base | #71767a | |
| 'base-dark' | 'gray-cool-60' | $theme-color-base-dark | #565c65 | |
| 'base-darker' | 'gray-cool-70' | $theme-color-base-darker | #3d4551 | |
| 'base-darkest' | 'gray-90' | $theme-color-base-darkest | #1b1b1b | |
| 'ink' | 'gray-90' | $theme-color-base-ink | #1b1b1b | |
| 'primary-lighter' | 'blue-10' | $theme-color-primary-lighter | #d9e8f6 | |
| 'primary-light' | 'blue-30' | $theme-color-primary-light | #73b3e7 | |
| 'primary' | 'blue-60v' | $theme-color-primary | #005ea2 | |
| 'primary-vivid' | 'blue-warm-60v' | $theme-color-primary-vivid | #0050d8 | |
| 'primary-dark' | 'blue-warm-70v' | $theme-color-primary-dark | #1a4480 | |
| 'primary-darker' | 'blue-warm-80v' | $theme-color-primary-darker | #162e51 | |
| 'secondary-lighter' | 'red-cool-10v' | $theme-color-secondary-lighter | #f8dfe2 | |
| 'secondary-light' | 'red-30' | $theme-color-secondary-light | #f2938c | |
| 'secondary' | 'red-50' | $theme-color-secondary | #d83933 | |
| 'secondary-vivid' | 'red-cool-50v' | $theme-color-secondary-vivid | #e41d3d | |
| 'secondary-dark' | 'red-60v' | $theme-color-secondary-dark | #b50909 | |
| 'secondary-darker' | 'red-70v' | $theme-color-secondary-darker | #8b0a03 | |
| 'accent-cool-lighter' | 'blue-cool-5v' | $theme-color-accent-cool-lighter | #e1f3f8 | |
| 'accent-cool-light' | 'blue-cool-20v' | $theme-color-accent-cool-light | #97d4ea | |
| 'accent-cool' | 'cyan-30v' | $theme-color-accent-cool | #00bde3 | |
| 'accent-cool-dark' | 'blue-cool-40v' | $theme-color-accent-cool-dark | #28a0cb | |
| 'accent-cool-darker' | 'blue-cool-60v' | $theme-color-accent-cool-darker | #07648d | |
| 'accent-warm-lighter' | 'orange-10' | $theme-color-accent-warm-lighter | #f2e4d4 | |
| 'accent-warm-light' | 'orange-20v' | $theme-color-accent-warm-light | #ffbc78 | |
| 'accent-warm' | 'orange-30v' | $theme-color-accent-warm | #fa9441 | |
| 'accent-warm-dark' | 'orange-50v' | $theme-color-accent-warm-dark | #c05600 | |
| 'accent-warm-darker' | 'orange-60' | $theme-color-accent-warm-darker | #775540 | |
| 'emergency' | 'red-warm-60v' | $theme-color-emergency | #9c3d10 | |
| 'emergency-dark' | 'red-warm-80' | $theme-color-emergency-dark | #332d29 |
Using theme color tokens
Your context and coding style determine how you access USWDS theme color tokens in code.
For example, all three of the following examples result in the same output:
// function
div {
background-color: color("primary");
}
// mixin
div {
@include u-bg("primary");
}
// utility
<div class="bg-primary">...</div>
| Context | Usage | Example |
|---|---|---|
| function | color(color) |
color: color('primary-vivid')
|
|
mixin background-color |
u-bg(color) |
@include u-bg('primary-vivid') |
|
mixin color |
u-text(color) |
@include u-text('primary-vivid') |
|
mixin border-color |
u-border(color) |
@include u-border('primary-vivid') |
|
mixin text-decoration-color |
u-underline(color) |
@include u-underline('primary-vivid') |
|
setting |
color |
$theme-border-color: 'primary-vivid'
|
|
utility background-color |
.bg-color |
.bg-base-lighter
|
|
utility border-color |
.border-color |
.border-primary
|
|
utility color |
.text-color |
.text-primary
|
|
utility outline-color |
.outline-color |
.outline-primary
|
|
utility text-decoration-color |
.underline-color |
.underline-primary-vivid
|
