_
We use five USWDS theme color tokens: primary, secondary, accent-cool, accent-warm, and base.
Each of our web components has one or more assigned theme tokens. Do not change or replace these tokens.
Choose only the available color options for the component. This will help maintain a consistent design. This also helps ensure our websites follow Section 508 for color contrast between text and background.
Primary theme: Blue
Our websites use different temperatures and lightness grades within the blue color tokens. The blue tokens make up about 60% of the website's color scheme. These blue tokens form the primary and secondary theme token families.
Theme token: primary-lighter
Settings variable: $theme-color-primary-lighter
System token: blue-5
HEX: #eff6fb
_
Theme token: primary-light
Settings variable: $theme-color-primary-light
System token: blue-20
HEX: #d9e8f6
_
Theme token: primary-vivid
Settings variable: $theme-color-primary-vivid
System token: blue-warm-60v
HEX: #0050d8
_
Theme token: primary
Settings variable: $theme-color-primary
System token: blue-70v
HEX: #0b4778
_
Theme token: primary-dark
Settings variable: $theme-color-primary-dark
System token: blue-80v
HEX: #112f4e
_
Theme token: primary-darker
Settings variable: $theme-color-primary-darker
System token: blue-90
HEX: #11181d
Secondary theme: Blue cool
_
Theme token: secondary-lighter
Settings variable: $theme-color-secondary-lighter
System token: blue-cool-5v
HEX: #e1f3f8
_
Theme token: secondary-light
Settings variable: $theme-color-secondary-light
System token: blue-cool-20v
HEX: #97d4ea
_
Theme token: secondary
Settings variable: $theme-color-secondary
System token: blue-cool-60v
HEX: #07648d
_
Theme token: secondary-dark
Settings variable: $theme-color-secondary-dark
System token: blue-cool-70v
HEX: #074b69
_
Theme token: secondary-darker
Settings variable: $theme-color-secondary-darker
System token: blue-cool-80v
HEX: #002d3f
Accent-cool theme: Red
We use the red vivid color in typography. It helps make components stand out on the page.
_
Theme token: accent-cool-lighter
Settings variable: $theme-color-accent-cool-lighter
System token: red-10v
HEX: #fde0db
_
Theme token: accent-cool-light
Settings variable: $theme-color-accent-cool-light
System token: red-20v
HEX: #fdb8ae
_
Theme token: accent-cool
Settings variable: $theme-color-accent-cool
System token: red-60v
HEX: #b50909
_
Theme token: accent-cool-dark
Settings variable: $theme-color-accent-cool-dark
System token: red-70v
HEX: #8b0a03
_
Theme token: accent-cool-darker
Settings variable: $theme-color-accent-cool-darker
Default: red-80v
HEX: #5c1111
Accent-warm theme: Gold
We use light grades gold color family for backgrounds and to highlight interactive components, like buttons.
_
Theme token: accent-warm-lighter
Settings variable: $theme-color-accent-warm-lighter
Theme token: gold-5v
HEX: #fef0c8
_
Theme token: accent-warm-light
Settings variable: $theme-color-accent-warm-light
System token: gold-10v
HEX: #ffe396
_
Theme token: accent-warm
Settings variable: $theme-color-accent-warm
System token: gold-30v
HEX: #e5a000
_
Theme token: accent-warm-dark
Settings variable: $theme-color-accent-warm-dark
System token: gold-40v
HEX: #c2850c
_
Theme token: accent-warm-darker
Settings variable: $theme-color-accent-warm-darker
System token: gold-50v
HEX: #936f38
Base theme: Gray
Shades of gray serve as the website's neutral base color. Mostly, we use them for typography and backgrounds.
_
Theme token: base-lighter
Settings variable: $theme-color-base-lighter
System token: gray-10
HEX: #e6e6e6
_
Theme token: base-light
Settings variable: $theme-color-base-light
System token: gray-30
HEX: #adadad
_
Theme token: base
Settings variable: $theme-color-base
System token: gray-50
HEX: #757575
_
Theme token: base-dark
Settings variable: $theme-color-base-dark
System token: gray-70
HEX: #454545
_
Theme token: base-darker
Settings variable: $theme-color-base-darker
System token: gray-90
HEX: #1b1b1b
Date Last Reviewed: