Color
Color sets the emotional tone of a user interface and is a powerful way to establish consistency. Each color, as well as the palette, is based off USWDS standards and has specific usage guidelines and role definitions to meet accessibility requirements.
We organize our color tokens into State, Theme and System tokens, based on USWDS color token structure but modified for NCIDS. These changes are rooted in current NCI and NIH brand colors
For how to apply colors in Figma, refer to our Figma Guide.
State Tokens
State color tokens are designed to be useful and effective for any project that has states or alerts. Each state token is drawn from a system color token, and we only use token-based colors in official components.
Color
Token
System Token
Setting Value
Hex Value
error-lighter
cranberry-10
$theme-color-error-lighter
#fde2ea
error-light
cranberry-30v
$theme-color-error-light
#f27da2
error
cranberry-50v
$theme-color-error
#e41154
error-dark
cranberry-60v
$theme-color-error-dark
#b60d43
error-darker
cranberry-70
$theme-color-error-darker
#950b30
warning-lighter
golden-5
$theme-color-warning-lighter
#fdf2bf
warning-light
golden-10v
$theme-color-warning-light
#ffe369
warning
golden-20v
$theme-color-warning
#ffbe2e
warning-dark
golden-30v
$theme-color-warning-dark
#e5a000
warning-darker
golden-50v
$theme-color-warning-darker
#936f38
success-lighter
teal-5
$theme-color-success-lighter
#dbf2f3
success-light
teal-20v
$theme-color-success-light
#67e4e8
success
teal-40v
$theme-color-success
#42979a
success-dark
teal-50v
$theme-color-success-dark
#338084
success-darker
teal-60v
$theme-color-success-darker
#206b6f
info-lighter
cerulean-10
$theme-color-info-lighter
#dbf2f3
info-light
cerulean-20
$theme-color-info-light
#67e4e8
info
cerulean-30v
$theme-color-info
#42979a
info-dark
cerulean-40v
$theme-color-info-dark
#338084
info-darker
cerulean-60v
$theme-color-info-darker
#206b6f
disabled-lighter
gray-20
$theme-color-disabled-lighter
#c9c9c9
disabled-light
gray-40
$theme-color-disabled-light
#919191
disabled
gray-50
$theme-color-disabled
#757575
disabled-dark
gray-70
$theme-color-disabled-dark
#454545
disabled-darker
gray-90
$theme-color-disabled-darker
#1b1b1b
emergency
cranberry-60v
$theme-color-emergency
#b60d43
emergency-dark
cranberry-80
$theme-color-emergency-dark
#700824
link-color
cerulean-60v
$theme-link-color
#01679d
Theme Tokens
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. Theme color tokens are divided into five high-level role-based color families: base, primary, secondary, accent-warm, and accent-cool.
Color
Token
System Token
Setting Value
Hex Value
base-lightest
gray-cool-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
base-ink
gray-90
$theme-color-base-ink
#1b1b1b
primary-lighter
cerulean-20
$theme-color-primary-lighter
#99cae4
primary-light
cerulean-40
$theme-color-primary-light
#3395ca
primary
cerulean-50
$theme-color-primary
#007bbd
primary-vivid
cerulean-50v
$theme-color-primary-vivid
#067cbc
primary-dark
cerulean-70
$theme-color-primary-dark
#004971
primary-darker
cerulean-80
$theme-color-primary-darker
#00314b
secondary-lighter
teal-10
$theme-color-secondary-lighter
#beebee
secondary-light
teal-30
$theme-color-secondary-light
#4bbfc6
secondary
teal-50
$theme-color-secondary
#298085
secondary-vivid
teal-50v
$theme-color-secondary-vivid
#338084
secondary-dark
teal-70
$theme-color-secondary-dark
#1e4c4f
secondary-darker
teal-80
$theme-color-secondary-darker
#17373a
accent-cool-lighter
navy-10
$theme-color-accent-cool-lighter
#d7e5f4
accent-cool-light
navy-30
$theme-color-accent-cool-light
#92a9c8
accent-cool
navy-50
$theme-color-accent-cool
#5478ab
accent-cool-dark
navy-70
$theme-color-accent-cool-dark
#284976
accent-cool-darker
navy-80
$theme-color-accent-cool-darker
#06162D
accent-warm-lighter
golden-5
$theme-color-accent-warm-lighter
#fdf2bf
accent-warm-light
golden-10
$theme-color-accent-warm-light
#fee685
accent-warm
golden-20
$theme-color-accent-warm
#face00
accent-warm-dark
golden-30
$theme-color-accent-warm-dark
#ddaa01
accent-warm-darker
golden-40
$theme-color-accent-warm-darker
#b38c00
System Tokens
System color tokens are the complete palette of color tokens from which any project can build a theme palette.
Color
Token
Family
Grade
Variant
Hex Value
Cerulean
cerulean-5
cerulean
5
-
#e9eff2
cerulean-10
cerulean
10
-
#d4e7f2
cerulean-20
cerulean
20
-
#99cae4
cerulean-30
cerulean
30
-
#66afd7
cerulean-40
cerulean
40
-
#3395ca
cerulean-50
cerulean
50
-
#007bbd
cerulean-60
cerulean
60
-
#006297
cerulean-70
cerulean
70
-
#004971
cerulean-80
cerulean
80
-
#00314b
cerulean-90
cerulean
90
-
#11181d
cerulean-5v
cerulean-vivid
5
vivid
#d1f4ff
cerulean-10v
cerulean-vivid
10
vivid
#c4e9fd
cerulean-20v
cerulean-vivid
20
vivid
#8ed3f6
cerulean-30v
cerulean-vivid
30
vivid
#51b8f0
cerulean-40v
cerulean-vivid
40
vivid
#2099df
cerulean-50v
cerulean-vivid
50
vivid
#067cbc
cerulean-60v
cerulean-vivid
60
vivid
#01679D
cerulean-70v
cerulean-vivid
70
vivid
#004e7a
cerulean-80v
cerulean-vivid
80
vivid
#003a57
Cranberry
cranberry-5
cranberry
5
-
#ffebf1
cranberry-10
cranberry
10
-
#fde2ea
cranberry-20
cranberry
20
-
#f1c5d2
cranberry-30
cranberry
30
-
#e39eb1
cranberry-40
cranberry
40
-
#d66e8a
cranberry-50
cranberry
50
-
#d13d64
cranberry-60
cranberry
60
-
#bb0e3d
cranberry-70
cranberry
70
-
#950b30
cranberry-80
cranberry
80
-
#700824
cranberry-90
cranberry
90
-
#420516
cranberry-5v
cranberry-vivid
5
vivid
#fff2f5
cranberry-10v
cranberry-vivid
10
vivid
#ffdbe7
cranberry-20v
cranberry-vivid
20
vivid
#fbacc5
cranberry-30v
cranberry-vivid
30
vivid
#f27da2
cranberry-40v
cranberry-vivid
40
vivid
#f4487e
cranberry-50v
cranberry-vivid
50
vivid
#e41154
cranberry-60v
cranberry-vivid
60
vivid
#b60d43
cranberry-70v
cranberry-vivid
70
vivid
#880a32
cranberry-80v
cranberry-vivid
80
vivid
#5b0621
Golden
golden-5
golden
5
-
#fdf2bf
golden-10
golden
10
-
#fee685
golden-20
golden
20
-
#face00
golden-30
golden
30
-
#ddaa01
golden-40
golden
40
-
#b38c00
golden-50
golden
50
-
#947100
golden-60
golden
60
-
#776017
golden-70
golden
70
-
#5c4809
golden-80
golden
80
-
#422d19
golden-90
golden
90
-
#1a1614
golden-5v
golden-vivid
5
vivid
#fef0c8
golden-10v
golden-vivid
10
vivid
#ffe396
golden-20v
golden-vivid
20
vivid
#ffbe2e
golden-30v
golden-vivid
30
vivid
#e5a000
golden-40v
golden-vivid
40
vivid
#c2850c
golden-50v
golden-vivid
50
vivid
#936f38
golden-60v
golden-vivid
60
vivid
#7a591a
golden-70v
golden-vivid
70
vivid
#5c410a
golden-80v
golden-vivid
80
vivid
#3b2b15
Navy
navy-5
navy
5
-
#e7eff8
navy-10
navy
10
-
#d7e5f4
navy-20
navy
20
-
#bcc7d7
navy-30
navy
30
-
#92a9c8
navy-40
navy
40
-
#6c8dbc
navy-50
navy
50
-
#5478ab
navy-60
navy
60
-
#3e6498
navy-70
navy
70
-
#284976
navy-80
navy
80
-
#14315c
navy-90
navy
90
-
#06162d
navy-5v
navy-vivid
5
vivid
#e3effd
navy-10v
navy-vivid
10
vivid
#e5f2ff
navy-20v
navy-vivid
20
vivid
#bcd3f6
navy-30v
navy-vivid
30
vivid
#83b1ec
navy-40v
navy-vivid
40
vivid
#5e91d9
navy-50v
navy-vivid
50
vivid
#4177c3
navy-60v
navy-vivid
60
vivid
#1c5cb5
navy-70v
navy-vivid
70
vivid
#13458b
navy-80v
navy-vivid
80
vivid
#0c3573
Teal
teal-5
teal
5
-
#dbf2f3
teal-10
teal
10
-
#beebee
teal-20
teal
20
-
#93d8dc
teal-30
teal
30
-
#4bbfc6
teal-40
teal
40
-
#3c989e
teal-50
teal
50
-
#298085
teal-60
teal
60
-
#226467
teal-70
teal
70
-
#1e4c4f
teal-80
teal
80
-
#17373a
teal-90
teal
90
-
#102223
teal-5v
teal-vivid
5
vivid
#def6f7
teal-10v
teal-vivid
10
vivid
#a3eef1
teal-20v
teal-vivid
20
vivid
#67e4e8
teal-30v
teal-vivid
30
vivid
#52b6b9
teal-40v
teal-vivid
40
vivid
#42979a
teal-50v
teal-vivid
50
vivid
#338084
teal-60v
teal-vivid
60
vivid
#206b6f
teal-70v
teal-vivid
70
vivid
#235152
teal-80v
teal-vivid
80
vivid
#1a3c3d
Utility Modules
Text color
Mixins and Functions
Utilities may be used in component Sass with utility mixins and do not require utilities class output to be enabled. You can determine the allowed parameters for mixins by reviewing the utility classes below.
| Utility | Mixin | Example |
|---|---|---|
.text-color | u-text(color) | @include u-text('primary-darker') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| color | False | hover | 0.37 KB | 2 KB |
Class name
Hexadecimal Value
State colors
.text-error-lighter
#fde2ea
.text-error-light
#f27da2
.text-error
#e41154
.text-error-dark
#f27da2
.text-error-darker
#950b30
.text-warning-lighter
#fdf2bf
.text-warning-light
#ffe396
.text-warning
#ffbe2e
.text-warning-dark
#e5a000
.text-warning-darker
#936f38
.text-success-lighter
#dbf2f3
.text-success-light
#67e4e8
.text-success
#42979a
.text-success-dark
#338084
.text-success-darker
#206b6f
.text-info-lighter
#d4e7f2
.text-info-light
#99cae4
.text-info
#51b8f0
.text-info-dark
#2099df
.text-info-darker
#01679d
.text-disabled-lighter
#c9c9c9
.text-disabled-light
#919191
.text-disabled
#757575
.text-disabled-dark
#adadad
.text-disabled-darker
#1b1b1b
.text-emergency
#b60d43
.text-emergency-dark
#700824
Theme colors
.text-base-lightest
#f0f0f0
.text-base-lighter
#dfe1e2
.text-base-light
#a9aeb1
.text-base
#71767a
.text-base-dark
#565c65
.text-base-darker
#3d4551
.text-base-darkest
#1b1b1b
.text-ink
#1b1b1b
.text-primary-lighter
#99cae4
.text-primary-light
#3395ca
.text-primary
#007bbd
.text-primary-vivid
#067cbc
.text-primary-dark
#004971
.text-primary-darker
#00314b
.text-secondary-lighter
#beebee
.text-secondary-light
#4bbfc6
.text-secondary
#298085
.text-secondary-vivid
#338084
.text-secondary-dark
#1e4c4f
.text-secondary-darker
#17373a
.text-accent-cool-lighter
#d7e5f4
.text-accent-cool-light
#92a9c8
.text-accent-cool
#5478ab
.text-accent-cool-dark
#284976
.text-accent-cool-darker
#06162d
.text-accent-warm-lighter
#fdf2bf
.text-accent-warm-light
#fee685
.text-accent-warm
#face00
.text-accent-warm-dark
#ddaa01
.text-accent-warm-darker
#b38c00
Global Palette
.text-white
#ffffff
.text-black
#000000
Grayscale Palette
.text-gray-5
#f0f0f0
.text-gray-10
#e6e6e6
.text-gray-30
#adadad
.text-gray-50
#757575
.text-gray-70
#454545
.text-gray-90
#171717
Basic Palette
.text-teal
#298085
.text-cerulean
#007bbd
.text-cranberry
#bb0e3d
.text-navy
#14315c
.text-golden
#947100
Background color
Mixins and Functions
Utilities may be used in component Sass with utility mixins and do not require utilities class output to be enabled. You can determine the allowed parameters for mixins by reviewing the utility classes below.
| Utility | Mixin | Example |
|---|---|---|
.bg-color | u-bg(color) | @include u-bg('primary-darker') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| background-color | False | hover | 1 KB | 5.4 KB |
Class name
Hexadecimal Value
State colors
.bg-error-lighter
#fde2ea
.bg-error-light
#f27da2
.bg-error
#e41154
.bg-error-dark
#b60d43
.bg-error-darker
#950b30
.bg-warning-lighter
#fdf2bf
.bg-warning-light
#ffe396
.bg-warning
#ffbe2e
.bg-warning-dark
#e5a000
.bg-warning-darker
#936f38
.bg-success-lighter
#dbf2f3
.bg-success-light
#67e4e8
.bg-success
#42979a
.bg-success-dark
#338084
.bg-success-darker
#206b6f
.bg-info-lighter
#d4e7f2
.bg-info-light
#99cae4
.bg-info
#51b8f0
.bg-info-dark
#2099df
.bg-info-darker
#01679d
.bg-disabled-lighter
#c9c9c9
.bg-disabled-light
#919191
.bg-disabled
#757575
.bg-disabled-dark
#454545
.bg-disabled-darker
#1b1b1b
.bg-emergency
#b60d43
.bg-emergency-dark
#700824
Theme colors
.bg-base-lightest
#f0f0f0
.bg-base-lighter
#dfe1e2
.bg-base-light
#a9aeb1
.bg-base
#71767a
.bg-base-dark
#565c65
.bg-base-darker
#3d4551
.bg-base-darkest
#1b1b1b
.bg-ink
#1b1b1b
.bg-primary-lighter
#99cae4
.bg-primary-light
#3395ca
.bg-primary
#007bbd
.bg-primary-vivid
#067cbc
.bg-primary-dark
#004971
.bg-primary-darker
#00314b
.bg-secondary-lighter
#beebee
.bg-secondary-light
#4bbfc6
.bg-secondary
#298085
.bg-secondary-vivid
#338084
.bg-secondary-dark
#1e4c4f
.bg-secondary-darker
#17373a
.bg-accent-cool-lighter
#d7e5f4
.bg-accent-cool-light
#92a9c8
.bg-accent-cool
#5478ab
.bg-accent-cool-dark
#284976
.bg-accent-cool-darker
#06162d
.bg-accent-warm-lighter
#fdf2bf
.bg-accent-warm-light
#fee685
.bg-accent-warm
#face00
.bg-accent-warm-dark
#ddaa01
.bg-accent-warm-darker
#b38c00
.bg-emergency
#b60d43
.bg-emergency-dark
#700824
Global Palette
.bg-white
#ffffff
.bg-black
#000000
Grayscale Palette
.bg-gray-5
#f0f0f0
.bg-gray-10
#e6e6e6
.bg-gray-30
#adadad
.bg-gray-50
#757575
.bg-gray-70
#454545
.bg-gray-90
#171717
Basic Palette
.bg-teal
#298085
.bg-cerulean
#007bbd
.bg-cranberry
#bb0e3d
.bg-navy
#14315c
.bg-golden
#947100