Foundation
Color palette
Our color palette is organized into semantic color tokens, which have specific meaning within the system, and primitive color tokens, which establish a sub-set of colors that the VA uses from the U.S. Web Design System.
Semantic color tokens
vads-color-action-border-base-active-on-dark
#adadad
uswds-system-color-gray-30
$color-vads-color-action-border-base-active-on-dark
Used for button on mobile app in base style in dark mode
vads-color-action-border-base-active-on-light
#2e2e2e
uswds-system-color-gray-80
$color-vads-color-action-border-base-active-on-light
Used for button on mobile app in base style
vads-color-action-focus-on-light
#face00
uswds-system-color-yellow-20v
$color-vads-color-action-focus-on-light
Focus outline color
vads-color-action-surface-default-on-dark
#58b4ff
uswds-system-color-blue-30v
$color-vads-color-action-surface-default-on-dark
Used for button on mobile app in dark mode
vads-color-action-surface-destructive-on-dark
#fb5a47
uswds-system-color-red-vivid-40
$color-vads-color-action-surface-destructive-on-dark
Used for button on mobile app in dark mode
vads-color-background-default-on-dark
#171716
uswds-system-color-gray-warm-90
$color-vads-color-background-default-on-dark
Used for app background on mobile app in dark mode
vads-color-base
#1b1b1b
uswds-system-color-gray-90
$color-vads-color-base
vads-color-base-dark
#565c65
uswds-system-color-gray-cool-60
vads-color-gray
$color-vads-color-base-dark
vads-color-base-darker
#3d4551
uswds-system-color-gray-cool-70
vads-color-gray-dark
$color-vads-color-base-darker
vads-color-base-darkest
#1b1b1b
uswds-system-color-gray-90
vads-color-base
$color-vads-color-base-darkest
Also vads-color-ink
vads-color-base-light
#a9aeb1
uswds-system-color-gray-cool-30
vads-color-gray-light
$color-vads-color-base-light
vads-color-base-lighter
#dfe1e2
uswds-system-color-gray-cool-10
vads-color-gray-lighter
$color-vads-color-base-lighter
vads-color-base-lightest
#f0f0f0
uswds-system-color-gray-5
vads-color-gray-lightest
$color-vads-color-base-lightest
vads-color-emergency
#9c3d10
uswds-system-color-red-warm-60v
$color-vads-color-emergency
$theme-color-emergency from USWDS
vads-color-emergency-dark
#332d29
uswds-system-color-red-warm-80
$color-vads-color-emergency-dark
$theme-color-emergency-dark from USWDS
vads-color-error
#d54309
uswds-system-color-red-warm-50v
$color-vads-color-error
$theme-color-error from USWDS
vads-color-error-dark
#b21d38
uswds-system-color-red-vivid-60
$color-vads-color-error-dark
$theme-color-error-dark from USWDS
vads-color-error-darker
#6f3331
uswds-system-color-red-70
$color-vads-color-error-darker
$theme-color-error-darker from USWDS
vads-color-error-light
#f39268
uswds-system-color-red-warm-30v
$color-vads-color-error-light
$theme-color-error-light from USWDS
vads-color-error-lighter
#f4e3db
uswds-system-color-red-warm-10
$color-vads-color-error-lighter
$theme-color-error-lighter from USWDS
vads-color-feedback-border-warning-on-dark
#face00
uswds-system-color-yellow-20v
$color-vads-color-feedback-border-warning-on-dark
Used for warning alert border on mobile app in dark mode
vads-color-feedback-surface-error-on-dark
#5c1111
uswds-system-color-red-vivid-80
$color-vads-color-feedback-surface-error-on-dark
Used for error alert background on mobile app in dark mode
vads-color-feedback-surface-info-on-dark
#112f4e
uswds-system-color-blue-vivid-80
$color-vads-color-feedback-surface-info-on-dark
Used for alert background on mobile app in dark mode
vads-color-feedback-surface-success-on-dark
#19311e
uswds-system-color-green-cool-80v
$color-vads-color-feedback-surface-success-on-dark
Used for success alert background on mobile app in dark mode
vads-color-feedback-surface-warning-on-dark
#332d27
uswds-system-color-yellow-80v
$color-vads-color-feedback-surface-warning-on-dark
Used for warning alert background on mobile app in dark mode
vads-color-forms-surface-active-on-dark
#252f3e
uswds-system-color-blue-warm-80
$color-vads-color-forms-surface-active-on-dark
Used for active background of tile variations of checkbox/radio in dark mode
vads-color-forms-surface-active-on-light
#ecf1f7
uswds-system-color-blue-warm-5
$color-vads-color-forms-surface-active-on-light
Used for active background of tile variations of checkbox/radio in light mode
vads-color-gibill-accent
#fef0c8
vads-color-gold-lightest
$color-vads-color-gibill-accent
vads-color-hub-burials
#2378c3
uswds-system-color-blue-50
$color-vads-color-hub-burials
vads-color-hub-careers
#bd5727
uswds-system-color-orange-warm-50
$color-vads-color-hub-careers
vads-color-hub-disability
#a23737
uswds-system-color-red-60
$color-vads-color-hub-disability
vads-color-hub-education
#40807e
uswds-system-color-mint-cool-50
$color-vads-color-hub-education
vads-color-hub-family-member
#162e51
vads-color-primary-darker
$color-vads-color-hub-family-member
vads-color-hub-health-care
#3f57a6
uswds-system-color-indigo-cool-60
$color-vads-color-hub-health-care
vads-color-hub-housing
#8e704f
uswds-system-color-gold-50
$color-vads-color-hub-housing
vads-color-hub-life-insurance
#6f7a41
uswds-system-color-green-warm-50
$color-vads-color-hub-life-insurance
vads-color-hub-pension
#4d8055
uswds-system-color-green-cool-50
$color-vads-color-hub-pension
vads-color-hub-records
#864381
uswds-system-color-violet-warm-60
$color-vads-color-hub-records
vads-color-hub-service-member
#162e51
vads-color-primary-darker
$color-vads-color-hub-service-member
vads-color-info
#00bde3
uswds-system-color-cyan-30v
$color-vads-color-info
$theme-color-info from USWDS
vads-color-info-dark
#009ec1
uswds-system-color-cyan-40v
$color-vads-color-info-dark
$theme-color-info-dark from USWDS
vads-color-info-darker
#2e6276
uswds-system-color-blue-cool-60
$color-vads-color-info-darker
$theme-color-info-darker from USWDS
vads-color-info-light
#99deea
uswds-system-color-cyan-20
$color-vads-color-info-light
$theme-color-info-light from USWDS
vads-color-info-lighter
#e7f6f8
uswds-system-color-cyan-5
$color-vads-color-info-lighter
$theme-color-info-lighter from USWDS
vads-color-ink
#1b1b1b
uswds-system-color-gray-90
vads-color-base
$color-vads-color-ink
Also vads-color-base-darkest
vads-color-inset-bg
#e7f6f8
vads-color-info-lighter
$color-vads-color-inset-bg
vads-color-link
#005ea2
uswds-system-color-blue-60v
$color-vads-color-link
vads-color-link-active
#0b4778
uswds-system-color-blue-70v
$color-vads-color-link-active
vads-color-link-visited
#54278f
uswds-system-color-violet-70v
$color-vads-color-link-visited
vads-color-primary
#005ea2
uswds-system-color-blue-60v
$color-vads-color-primary
vads-color-primary-alt
#00bde3
uswds-system-color-cyan-30v
$color-vads-color-primary-alt
vads-color-primary-alt-dark
#28a0cb
uswds-system-color-blue-cool-40v
$color-vads-color-primary-alt-dark
vads-color-primary-alt-darkest
#07648d
uswds-system-color-blue-cool-60v
$color-vads-color-primary-alt-darkest
vads-color-primary-alt-light
#97d4ea
uswds-system-color-blue-cool-20v
$color-vads-color-primary-alt-light
vads-color-primary-alt-lightest
#e1f3f8
uswds-system-color-blue-cool-5v
$color-vads-color-primary-alt-lightest
vads-color-primary-dark
#1a4480
uswds-system-color-blue-warm-70v
$color-vads-color-primary-dark
vads-color-primary-darker
#162e51
uswds-system-color-blue-warm-80v
$color-vads-color-primary-darker
Shifts to primary-dark, takes on primary-darkest
vads-color-primary-light
#73b3e7
uswds-system-color-blue-30
$color-vads-color-primary-light
vads-color-primary-lighter
#d9e8f6
uswds-system-color-blue-10
$color-vads-color-primary-lighter
vads-color-secondary
#d83933
uswds-system-color-red-50
$color-vads-color-secondary
$theme-color-secondary
vads-color-secondary-dark
#b50909
uswds-system-color-red-60v
$color-vads-color-secondary-dark
$theme-color-secondary-dark
vads-color-secondary-darkest
#8b0a03
uswds-system-color-red-70v
$color-vads-color-secondary-darkest
$theme-color-secondary-darker
vads-color-secondary-light
#f2938c
uswds-system-color-red-30
$color-vads-color-secondary-light
$theme-color-secondary-light
vads-color-secondary-lightest
#f8dfe2
uswds-system-color-red-cool-10v
$color-vads-color-secondary-lightest
$theme-color-secondary-lighter
vads-color-success
#00a91c
uswds-system-color-green-cool-40v
$color-vads-color-success
$theme-color-success from USWDS
vads-color-success-dark
#008817
uswds-system-color-green-cool-50v
$color-vads-color-success-dark
$theme-color-success-dark from USWDS
vads-color-success-darker
#216e1f
uswds-system-color-green-cool-60v
$color-vads-color-success-darker
$theme-color-success-darker from USWDS
vads-color-success-light
#70e17b
uswds-system-color-green-cool-20v
$color-vads-color-success-light
$theme-color-success-light from USWDS
vads-color-success-lighter
#ecf3ec
uswds-system-color-green-cool-5
$color-vads-color-success-lighter
$theme-color-success-lighter from USWDS
vads-color-va-accent
#8a7237
uswds-system-color-yellow-50
$color-vads-color-va-accent
Used in the table and desktop main navigation menu as a top border highlight color. Should be replaced by vads-main-menu-color-border-top-open-on-light
vads-color-warning
#ffbe2e
uswds-system-color-gold-20v
$color-vads-color-warning
$theme-color-warning from USWDS
vads-color-warning-dark
#e5a000
uswds-system-color-gold-30v
$color-vads-color-warning-dark
$theme-color-warning-dark from USWDS
vads-color-warning-darker
#936f38
uswds-system-color-gold-50v
$color-vads-color-warning-darker
$theme-color-warning-darker from USWDS
vads-color-warning-light
#fee685
uswds-system-color-yellow-10v
$color-vads-color-warning-light
$theme-color-warning-light from USWDS
vads-color-warning-lighter
#faf3d1
uswds-system-color-yellow-5
vads-alert-color-background-warning-on-light
$color-vads-color-warning-lighter
$theme-color-warning-lighter from USWDS
Component color tokens
vads-alert-color-background-error-on-light
#f4e3db
vads-color-error-lighter
$color-vads-alert-color-background-error-on-light
Background color for error alerts
vads-alert-color-background-info-on-light
#e7f6f8
vads-color-info-lighter
$color-vads-alert-color-background-info-on-light
Background color for informational alerts
vads-alert-color-background-success-on-light
#ecf3ec
vads-color-success-lighter
$color-vads-alert-color-background-success-on-light
Background color for success alerts
vads-alert-color-background-warning-on-light
#faf3d1
vads-color-warning-lighter
$color-vads-alert-color-background-warning-on-light
Background color for warning alerts
vads-alert-color-border-error-on-light
#d54309
vads-color-error
$color-vads-alert-color-border-error-on-light
Border color for error alerts
vads-alert-color-border-info-on-light
#00bde3
vads-color-info
$color-vads-alert-color-border-info-on-light
Border color for informational alerts
vads-alert-color-border-success-on-light
#00a91c
vads-color-success
$color-vads-alert-color-border-success-on-light
Border color for success alerts
vads-alert-color-border-warning-on-light
#ffbe2e
vads-color-warning
$color-vads-alert-color-border-warning-on-light
Border color for warning alerts
vads-button-color-background-primary-active-on-light
#162e51
vads-color-primary-darkest
$color-vads-button-color-background-primary-active-on-light
Background color for primary buttons - active state
vads-button-color-background-primary-alt-active-on-light
#154c21
vads-color-green-darker
$color-vads-button-color-background-primary-alt-active-on-light
Background color for primary alt buttons - active state
vads-button-color-background-primary-alt-hover-on-light
#216e1f
vads-color-green-dark
$color-vads-button-color-background-primary-alt-hover-on-light
Background color for primary alt buttons - hover state
vads-button-color-background-primary-alt-on-light
#008817
vads-color-green
$color-vads-button-color-background-primary-alt-on-light
Background color for primary alt buttons
vads-button-color-background-primary-hover-on-light
#1a4480
vads-color-primary-darker
$color-vads-button-color-background-primary-hover-on-light
Background color for primary buttons - hover state
vads-button-color-background-primary-on-light
#005ea2
vads-color-primary
$color-vads-button-color-background-primary-on-light
Background color for primary buttons
vads-button-color-background-secondary-on-light
#ffffff
vads-color-white
$color-vads-button-color-background-secondary-on-light
Background color for secondary buttons
vads-button-color-text-primary-alt-on-light
#ffffff
vads-color-white
$color-vads-button-color-text-primary-alt-on-light
Text color for primary alt buttons
vads-button-color-text-primary-on-light
#ffffff
vads-color-white
$color-vads-button-color-text-primary-on-light
Text color for primary buttons
vads-button-color-text-secondary-active-on-light
#162e51
vads-color-primary-darkest
$color-vads-button-color-text-secondary-active-on-light
Background color for primary buttons - active state
vads-button-color-text-secondary-hover-on-light
#1a4480
vads-color-primary-darker
$color-vads-button-color-text-secondary-hover-on-light
Background color for primary buttons - hover state
vads-button-color-text-secondary-on-light
#005ea2
vads-color-white
$color-vads-button-color-text-secondary-on-light
Text color for primary buttons
vads-card-border-on-light
#757575
vads-color-gray-medium
$color-vads-card-border-on-light
Border color for default cards.
vads-featured-content-color-background
#e7f6f8
vads-color-info-lighter
$color-vads-featured-content-color-background
Featured content component background color.
vads-input-background-color-on-light
#ffffff
vads-color-white
$color-vads-input-background-color-on-light
Form input background color
vads-input-border-color-on-light
#565c65
vads-color-base-dark
$color-vads-input-border-color-on-light
Form input border color
vads-input-prefix-color-fill-on-light
#757575
vads-label-hint-text-color-on-light
$color-vads-input-prefix-color-fill-on-light
Form input prefix for icon fill. Same as vads-input-prefix-color-text-on-light and hint-text color.
vads-input-prefix-color-text-on-light
#757575
vads-label-hint-text-color-on-light
$color-vads-input-prefix-color-text-on-light
Form input prefix for text. Same as hint-text color.
vads-input-suffix-color-text-on-light
#757575
vads-label-hint-text-color-on-light
$color-vads-input-suffix-color-text-on-light
Form input suffix for text. Same as hint-text color.
vads-input-tile-background-active-on-light
rgba(0,94,162,.1)
$color-vads-input-tile-background-active-on-light
Background color for the active state for checkbox and radio button Tile variations.
vads-input-tile-border-active-on-light
#005ea2
vads-color-primary
$color-vads-input-tile-border-active-on-light
Border color for the active state for checkbox and radio button Tile variations.
vads-input-tile-border-on-light
rgba(27,27,27,.03)
$color-vads-input-tile-border-on-light
Default border color for checkbox and radio button Tile variations.
vads-label-color-on-light
#1b1b1b
vads-color-base
$color-vads-label-color-on-light
Form label text color. Same as base color.
vads-label-hint-text-color-on-light
#757575
uswds-system-color-gray-50
$color-vads-label-hint-text-color-on-light
Form label hint-text color. Only passes contrast ratio on a white background.
vads-link-color-background-active-on-light
rgba(0,0,0,0.05)
$color-vads-link-color-background-active-on-light
Background highlight color when a standard link is active. Same as the background color in the hover state.
vads-link-color-background-hover-on-light
rgba(0,0,0,0.05)
$color-vads-link-color-background-hover-on-light
Background highlight color when hovering over standard links.
vads-link-color-text-active-on-light
#1a4480
vads-color-primary-dark
$color-vads-link-color-text-active-on-light
Link text color on hover, which is combined with a darker background
vads-link-color-text-hover-on-light
#1b1b1b
vads-color-base
$color-vads-link-color-text-hover-on-light
Link text color on hover, which is combined with a darker background
vads-main-menu-color-border-top-open-on-light
#8a7237
uswds-system-color-yellow-50
$color-vads-main-menu-color-border-top-open-on-light
Replaces va-accent.
vads-modal-overlay-color-background
rgba(50,58,69,.8)
$color-vads-modal-overlay-color-background
Color of the modal background that hides the content behind the modal. Uses uswds-system-color-gray-cool-70 at .8 opacity.
vads-process-list-color-text-pending-on-light
#757575
uswds-system-color-gray-50
$color-vads-process-list-color-text-pending-on-light
Items in the process list that are in a pending state use this color.
vads-sidenav-color-background
rgba(0,0,0,0, 0.25);
$color-vads-sidenav-color-background
Background color of the sidenav.
vads-toolbar-background-on-light
#f9f9f9
uswds-system-color-gray-2
$color-vads-toolbar-background-on-light
Flagship mobile app toolbar background
Primitive color tokens
vads-color-aqua
#00bde3
uswds-system-color-cyan-30v
vads-color-primary-alt
$color-vads-color-aqua
Use of this sass variable will move to vads-color-primary-alt and then be retired.
vads-color-aqua-dark
#009ec1
uswds-system-color-cyan-40v
$color-vads-color-aqua-dark
Use of this sass variable will move to vads-color-primary-alt-dark and then be retired.
vads-color-aqua-lightest
#e1f3f8
uswds-system-color-blue-cool-5v
vads-color-primary-alt-lightest
$color-vads-color-aqua-lightest
This will move to vads-color-primary-alt-lightest and then be retired.
vads-color-black
#000000
$color-vads-color-black
vads-color-blue
#005ea2
uswds-system-color-blue-60v
vads-color-primary
$color-vads-color-blue
This is identical to vads-color-primary and instances should be converted and removed.
vads-color-blue-cool
#345D96
uswds-system-color-blue-warm-60
$color-vads-color-blue-cool
vads-color-blue-cool-light
#345D96
uswds-system-color-blue-warm-50
$color-vads-color-blue-cool-light
vads-color-blue-darkest
#162e51
uswds-system-color-blue-warm-80v
vads-color-primary-darkest
$color-vads-color-blue-darkest
Identical to vads-color-primary-darkest and should be converted and removed.
vads-color-blue-light
#005ea2
uswds-system-color-blue-60v
vads-color-primary
$color-vads-color-blue-light
This is identical to vads-color-primary and instances should be converted and removed.
vads-color-gold
#ffbe2e
uswds-system-color-gold-20v
$color-vads-color-gold
vads-color-gold-darker
#936f38
uswds-system-color-gold-50v
$color-vads-color-gold-darker
vads-color-gold-light
#face00
uswds-system-color-yellow-20v
$color-vads-color-gold-light
vads-color-gold-lighter
#ffe396
uswds-system-color-gold-10v
$color-vads-color-gold-lighter
vads-color-gold-lightest
#fef0c8
uswds-system-color-gold-5v
$color-vads-color-gold-lightest
vads-color-gray
#565c65
uswds-system-color-gray-cool-60
$color-vads-color-gray
vads-color-gray-cool-light
#e1e7f1
uswds-system-color-blue-warm-10
$color-vads-color-gray-cool-light
vads-color-gray-dark
#3d4551
uswds-system-color-gray-cool-70
$color-vads-color-gray-dark
vads-color-gray-light
#a9aeb1
uswds-system-color-gray-cool-30
$color-vads-color-gray-light
vads-color-gray-light-alt
#edeff0
uswds-system-color-gray-cool-5
$color-vads-color-gray-light-alt
vads-color-gray-lighter
#dfe1e2
uswds-system-color-gray-cool-10
$color-vads-color-gray-lighter
vads-color-gray-lightest
#f0f0f0
uswds-system-color-gray-5
$color-vads-color-gray-lightest
vads-color-gray-medium
#757575
uswds-system-color-gray-50
$color-vads-color-gray-medium
vads-color-gray-warm-dark
#454540
uswds-system-color-gray-warm-70
$color-vads-color-gray-warm-dark
vads-color-gray-warm-light
#e6e6e2
uswds-system-color-gray-warm-10
$color-vads-color-gray-warm-light
vads-color-green
#008817
uswds-system-color-green-cool-50v
$color-vads-color-green
vads-color-green-dark
#216e1f
uswds-system-color-green-cool-60v
$color-vads-color-green-dark
vads-color-green-darker
#154c21
uswds-system-color-green-cool-70v
$color-vads-color-green-darker
vads-color-green-light
#5e9f69
uswds-system-color-green-cool-40
$color-vads-color-green-light
vads-color-green-lighter
#b4d0b9
uswds-system-color-green-cool-20
$color-vads-color-green-lighter
vads-color-green-lightest
#ecf3ec
uswds-system-color-green-cool-5
$color-vads-color-green-lightest
vads-color-orange
#dd7533
uswds-system-color-orange-40
$color-vads-color-orange
This will likely be replaced by semantic tokens in future.
vads-color-purple
#54278f
uswds-system-color-violet-70v
$color-vads-color-purple
Identical to vads-color-link-visited and thus will be removed.
vads-color-red
#d83933
uswds-system-color-red-50
$color-vads-color-red
Identical to vads-color-secondary and instances should be converted and removed.
vads-color-red-dark
#b50909
uswds-system-color-red-60v
$color-vads-color-red-dark
Identical to vads-color-secondary-dark and any instances should be converted and removed.
vads-color-red-light
#f2938c
uswds-system-color-red-30
$color-vads-color-red-light
Identical to vads-color-secondary-light and any instances (I couldn't find any) should be converted and removed.
vads-color-red-lightest
#f8dfe2
uswds-system-color-red-cool-10v
$color-vads-color-red-lightest
Identical to vads-color-secondary-lightest and instances should be converted and removed.
vads-color-white
#ffffff
$color-vads-color-white
v3 colors
Base colors
base
$color-base
white
$color-white
black
$color-black
orange
$color-orange
link-default
$color-link-default
warning-message
$color-warning-message
gibill-accent
$color-gibill-accent
primary
$color-primary
primary-dark
$color-primary-dark
primary-darker
$color-primary-darker
primary-alt
$color-primary-alt
primary-alt-dark
$color-primary-alt-dark
primary-alt-darkest
$color-primary-alt-darkest
primary-alt-light
$color-primary-alt-light
primary-alt-lightest
$color-primary-alt-lightest
secondary
$color-secondary
secondary-dark
$color-secondary-dark
secondary-darkest
$color-secondary-darkest
secondary-light
$color-secondary-light
secondary-lightest
$color-secondary-lightest
Grayscale
gray
$color-gray
gray-dark
$color-gray-dark
gray-medium
$color-gray-medium
gray-light
$color-gray-light
gray-light-alt
$color-gray-light-alt
gray-lighter
$color-gray-lighter
gray-lightest
$color-gray-lightest
gray-warm-dark
$color-gray-warm-dark
gray-warm-light
$color-gray-warm-light
gray-cool-light
$color-gray-cool-light
Tertiary colors
gold
$color-gold
gold-darker
$color-gold-darker
gold-light
$color-gold-light
gold-lighter
$color-gold-lighter
gold-lightest
$color-gold-lightest
green
$color-green
green-darker
$color-green-darker
green-light
$color-green-light
green-lighter
$color-green-lighter
green-lightest
$color-green-lightest
cool-blue
$color-cool-blue
cool-blue-light
$color-cool-blue-light
cool-blue-lighter
$color-cool-blue-lighter
cool-blue-lightest
$color-cool-blue-lightest
Hub colors
Hub colors are only to be used on VA.gov benefit hubs.
hub-health-care
$color-hub-health-care
hub-education
$color-hub-education
hub-disability
$color-hub-disability
hub-careers
$color-hub-careers
hub-pension
$color-hub-pension
hub-records
$color-hub-records
hub-housing
$color-hub-housing
hub-life-insurance
$color-hub-life-insurance
hub-burials
$color-hub-burials
hub-family-member
$color-hub-family-member
hub-service-member
$color-hub-service-member