Theme colors provide a consistent, role-based palette for projects. Use the tokens and
utility classes shown below to apply color consistently and maintain accessibility across components.
Additional color guidance
Theme colors: The select pallet of colors for your projects.
State colors: The colors for warnings, errors, and other states.
Theme color tokens are divided into five high-level, role-based color families: base, primary, secondary, accent-warm, and accent-cool.
Base
Base colors are a project's neutral grays. Use base grays for prominent elements — such as body copy, backgrounds, headings, borders, and shadows — to establish visual structure, hierarchy, and reliable contrast across the interface.
CSS Class
Hex Code
RGB
Example
base-lightest
#f0f0f0
240, 240, 240
base-lighter
#dfe1e2
223, 225, 226
base-light
#a9aeb1
169, 174, 177
base
#71767a
113, 118, 122
base-dark
#565c65
86, 92, 101
base-darker
#3d4551
61, 69, 81
base-darkest
#1b1b1b
27, 27, 27
ink
#1b1b1b
27, 27, 27
Primary
Primary colors are the dominant, brand‑defining color family. They establish visual
identity and hierarchy — use them for primary actions, headers, key components, and large areas where brand recognition
is important. Aim for roughly 60% of your site's color usage to come from the primary family so secondary and accent colors
can provide contrast and variety.
CSS Class
Hex Code
RGB
Example
primary-lighter
#DEE8E0
222, 232, 224
primary-light
#B2C9B7
178, 201, 183
primary
#4D8157
77, 129, 87
primary-dark
#236430
35, 100, 48
primary-darker
#1A4B24
26, 75, 36
Secondary
Secondary colors provide contrast and support to the primary palette to be used for
secondary actions, links, and supportive UI elements that sit alongside primary elements.
Aim for about 30% of your site's color to come from the secondary color family.
CSS Class
Hex Code
RGB
Example
secondary-lighter
#DEE5EF
222, 229, 239
secondary-light
#BCCCDF
188, 204, 223
secondary
#4F78AA
79, 120, 170
secondary-dark
#205493
32, 84, 147
secondary-darker
#183F6E
24, 63, 110
Accent-cool
Accent colors complement the primary and secondary colors of a project. Aim for about 10% of your site's color to be from the accent color families.
CSS Class
Hex Code
RGB
Example
accent-cool-lighter
#DFF9F4
223, 249, 244
accent-cool-light
#A7EDE4
167, 237, 228
accent-cool
#3FA39A
63, 163, 154
accent-cool-dark
#2A7A6F
42, 122, 111
accent-cool-darker
#154D41
21, 77, 65
Accent-warm
Accent colors complement the primary and secondary colors of a project. Aim for about 10% of your site's color to be from the accent color families.
CSS Class
Hex Code
RGB
Example
accent-warm-lighter
#F5ECE1
245, 236, 225
accent-warm-light
#E8D3B3
232, 211, 179
accent-warm
#C97B3E
201, 123, 62
accent-warm-dark
#9B5028
155, 80, 40
accent-warm-darker
#6A2F18
106, 47, 24
Grayscale
Grayscale colors are a supplementary set of neutral tones intended for subtle backgrounds, dividers, low‑emphasis text, and layered surfaces. They give you finer steps of contrast to separate areas or create visual depth without competing with primary content.
By contrast, the base palette contains the project's core neutral values — the primary grays used for body copy, key borders, and major structural elements that define hierarchy. Use grayscale tones when you need more granular control over backgrounds and separation.
CSS Class
Hex Code
RGB
Example
transparent
#00000000
0, 0, 0, 0
white
#ffffff
255, 255, 255
gray-5
#f0f0f0
240, 240, 240
gray-10
#e6e6e6
230, 230, 230
gray-30
#adadad
173, 173, 173
gray-50
#757575
117, 117, 117
gray-70
#454545
69, 69, 69
gray-90
#1b1b1b
27, 27, 27
black
#000000
0, 0, 0
Basic
Basic colors are supplementary accent tones intended for limited, special-purpose use where strict brand cohesion isn't required. Typical uses include data visualizations and charts, category tags and status badges, icons, or illustrations and third-party content. Use them sparingly.
CSS Class
Hex Code
RGB
Example
red
#e52207
229, 34, 7
orange
#e66f0e
230, 111, 14
gold
#ffbe2e
255, 190, 46
yellow
#fee685
254, 230, 133
green
#538200
83, 130, 0
mint
#04c585
4, 197, 133
cyan
#009ec1
0, 158, 193
blue
#0076d6
0, 118, 214
indigo
#676cc8
103, 108, 200
violet
#8168b3
129, 104, 179
magenta
#d72d79
215, 45, 121
Related Utility classes
Utility classes may be included in your HTML or applied using Utility classes in your Sass.
Utility
Example
Code
.bg-color
.bg-primary-darker
class=("bg-primary-darker")
.border-color
.border-accent-cool-dark
class=("border-accent-cool-dark")
.outline-color
.outline-accent-warm-light
class=("outline-accent-warm-light")
.text-color
.text-ink
class=("text-ink")
.underline-color
.underline-secondary-lighter
class=("underline-secondary-lighter")
Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like
'105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may
also be written with their unquoted number token equivalent: 0.5, 1.5,
2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single
utility accepts multiple kinds of values (ex: .border accepts both border weight and border
color), their shared mixin can accept multiple comma-separated values:
u-text('primary-darkest', 'no-underline', 'bold')
u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s
argument list:
u-bg('red-warm-50v', !important)
Looking for U.S. government information and services?
