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
Semantic colors communicate how a color is used, grouped by concept.
Text and icons
vads-color-ink
#1b1b1b
uswds-system-color-gray-90 Default text color.
Link
vads-color-link
#005ea2
uswds-system-color-blue-vivid-60 Default link text color.
vads-color-link-active
#0b4778
uswds-system-color-blue-vivid-70 Link color for the hover and active state.
vads-color-link-visited
#54278f
uswds-system-color-violet-vivid-70 Visited link text color.
Base
vads-color-base
#1b1b1b
uswds-system-color-gray-90 Currently equivalent to
vads-color-base-darkest. Do not use for default text color. Use vads-color-ink.
vads-color-base-dark
#565c65
uswds-system-color-gray-cool-60 Medium-dark neutral for secondary text and icons.
vads-color-base-darker
#3d4551
uswds-system-color-gray-cool-70 Dark neutral for body text on light backgrounds.
vads-color-base-darkest
#1b1b1b
uswds-system-color-gray-90 Do not use for default text color. Use
vads-color-ink.
vads-color-base-light
#a9aeb1
uswds-system-color-gray-cool-30 Medium-light neutral for borders and disabled elements.
vads-color-base-lighter
#dfe1e2
uswds-system-color-gray-cool-10 Light neutral for borders and dividers.
vads-color-base-lightest
#f0f0f0
uswds-system-color-gray-5 Lightest neutral for subtle backgrounds.
Primary
vads-color-primary
#005ea2
uswds-system-color-blue-vivid-60 Primary brand color for links, primary buttons, and key actions.
vads-color-primary-dark
#1a4480
uswds-system-color-blue-warm-vivid-70 Darker primary for hover and active states.
vads-color-primary-darker
#162e51
uswds-system-color-blue-warm-vivid-80 Darkest primary for high-emphasis surfaces and text.
vads-color-primary-light
#73b3e7
uswds-system-color-blue-30 Light primary for accents and highlights.
vads-color-primary-lighter
#d9e8f6
uswds-system-color-blue-10 Lightest primary for subtle backgrounds.
Primary alt
vads-color-primary-alt
#00bde3
uswds-system-color-cyan-vivid-30 Alternate primary accent color.
vads-color-primary-alt-dark
#28a0cb
uswds-system-color-blue-cool-vivid-40 Darker alternate primary for accents.
vads-color-primary-alt-darkest
#07648d
uswds-system-color-blue-cool-vivid-60 Darkest alternate primary for text and high-contrast accents.
vads-color-primary-alt-light
#97d4ea
uswds-system-color-blue-cool-vivid-20 Light alternate primary for accents and highlights.
vads-color-primary-alt-lightest
#e1f3f8
uswds-system-color-blue-cool-vivid-5 Lightest alternate primary for subtle backgrounds.
Secondary
These values were inherited from USWDS and are highly unlikely to be used for VA purposes. If you are looking for error or destructive colors, see the error semantic colors.
vads-color-secondary
deprecated #d83933
uswds-system-color-red-50 Do not use. Use
vads-color-error-* if applicable. Inherited from USWDS.
vads-color-secondary-dark
deprecated #b50909
uswds-system-color-red-vivid-60 Do not use. Use
vads-color-error-* if applicable. Inherited from USWDS.
vads-color-secondary-darkest
deprecated #8b0a03
uswds-system-color-red-vivid-70 Do not use. Use
vads-color-error-* if applicable. Inherited from USWDS.
vads-color-secondary-light
deprecated #f2938c
uswds-system-color-red-30 Do not use. Use
vads-color-error-* if applicable. Inherited from USWDS.
vads-color-secondary-lightest
deprecated #f8dfe2
uswds-system-color-red-cool-vivid-10 Do not use. Use
vads-color-error-* if applicable. Inherited from USWDS.
Info
vads-color-info
#00bde3
uswds-system-color-cyan-vivid-30 Informational color for info alerts and status.
vads-color-info-dark
#009ec1
uswds-system-color-cyan-vivid-40 Darker info for text and icons on info components.
vads-color-info-darker
#2e6276
uswds-system-color-blue-cool-60 Darkest info for high-contrast info text.
vads-color-info-light
#99deea
uswds-system-color-cyan-20 Light info for borders and accents.
vads-color-info-lighter
#e7f6f8
uswds-system-color-cyan-5 Lightest info for info alert backgrounds.
Success
vads-color-success
#00a91c
uswds-system-color-green-cool-vivid-40 Success color for confirmation alerts and status.
vads-color-success-dark
#008817
uswds-system-color-green-cool-vivid-50 Darker success for text and icons.
vads-color-success-darker
#216e1f
uswds-system-color-green-cool-vivid-60 Darkest success for high-contrast success text.
vads-color-success-light
#70e17b
uswds-system-color-green-cool-vivid-20 Light success for borders and accents.
vads-color-success-lighter
#ecf3ec
uswds-system-color-green-cool-5 Lightest success for success alert backgrounds.
Warning
vads-color-warning
#ffbe2e
uswds-system-color-gold-vivid-20 Warning color for warning alerts and status.
vads-color-warning-dark
#e5a000
uswds-system-color-gold-vivid-30 Darker warning for text and icons.
vads-color-warning-darker
#936f38
uswds-system-color-gold-vivid-50 Darkest warning for high-contrast warning text.
vads-color-warning-light
#fee685
uswds-system-color-yellow-vivid-10 Light warning for borders and accents.
vads-color-warning-lighter
#faf3d1
uswds-system-color-yellow-5 Lightest warning for warning alert backgrounds.
Error
vads-color-error
#d54309
uswds-system-color-red-warm-vivid-50 Error color for error alerts, destructive actions, and validation.
vads-color-error-dark
#b21d38
uswds-system-color-red-cool-vivid-60 Darker error for hover and active states on destructive actions.
vads-color-error-darker
#6f3331
uswds-system-color-red-70 Darkest error for high-contrast error text.
vads-color-error-light
#f39268
uswds-system-color-red-warm-vivid-30 Light error for borders and accents.
vads-color-error-lighter
#f4e3db
uswds-system-color-red-warm-10 Lightest error for error alert backgrounds.
Background
vads-color-background-default-on-dark
#171716
uswds-system-color-gray-warm-90 Default app background color on dark backgrounds (mobile app).
vads-color-inset-bg
#e7f6f8
uswds-system-color-cyan-5 Background color for inset and callout content.
Hub
vads-color-hub-burials
#2378c3
uswds-system-color-blue-50 Category color for the Burials and memorials hub.
vads-color-hub-careers
#bd5727
uswds-system-color-orange-warm-50 Category color for the Careers and employment hub.
vads-color-hub-disability
#a23737
uswds-system-color-red-60 Category color for the Disability hub.
vads-color-hub-education
#162e51
uswds-system-color-blue-warm-vivid-80 Category color for the Education and training hub.
vads-color-hub-family-member
#162e51
uswds-system-color-blue-warm-vivid-80 Category color for the Family member benefits hub.
vads-color-hub-health-care
#3f57a6
uswds-system-color-indigo-cool-60 Category color for the Health care hub.
vads-color-hub-housing
#8e704f
uswds-system-color-gold-50 Category color for the Housing assistance hub.
vads-color-hub-life-insurance
#6f7a41
uswds-system-color-green-warm-50 Category color for the Life insurance hub.
vads-color-hub-pension
#4d8055
uswds-system-color-green-cool-50 Category color for the Pension hub.
vads-color-hub-records
#6f7a41
uswds-system-color-green-warm-50 Category color for the Records hub.
vads-color-hub-service-member
#162e51
uswds-system-color-blue-warm-vivid-80 Category color for the Service member benefits hub.
Emergency
vads-color-emergency
#9c3d10
uswds-system-color-red-warm-vivid-60 Emergency color for high-urgency banners and messaging. From USWDS.
vads-color-emergency-dark
#332d29
uswds-system-color-red-warm-80 Darker emergency color for hover and active states. From USWDS.
Accent
vads-color-gibill-accent
#fef0c8
uswds-system-color-gold-vivid-5 Accent background color for GI Bill content.
vads-color-va-accent
#8a7237
uswds-system-color-yellow-50 Top-border highlight color used by tables and the desktop main navigation. Avoid in new work.
Primitive color tokens
Primitive color tokens are the raw palette that all color decisions are based upon. VADS inherits the
Black and white
vads-color-black
#000000
uswds-system-color-gray-100 True black. Prefer neutral base colors for text and UI.
vads-color-white
#ffffff
White, for backgrounds and text on dark surfaces.
Component color tokens
Component colors are scoped to a specific component.
These tokens are reserved for use within Design System components. Do not use them outside of their component — apply semantic color tokens instead.
Alert
vads-alert-color-background-error-on-light
#f4e3db
uswds-system-color-red-warm-10 Background color for error alerts.
vads-alert-color-background-info-on-light
#e7f6f8
uswds-system-color-cyan-5 Background color for informational alerts.
vads-alert-color-background-success-on-light
#ecf3ec
uswds-system-color-green-cool-5 Background color for success alerts.
vads-alert-color-background-warning-on-light
#faf3d1
uswds-system-color-yellow-5 Background color for warning alerts.
Button
vads-button-color-background-disabled-on-light
#c9c9c9
uswds-system-color-gray-20 Background color for disabled buttons.
vads-button-color-background-primary-alt-active-on-light
#154c21
uswds-system-color-green-cool-vivid-70 Background color for primary alt buttons - active state.
vads-button-color-background-primary-on-light
#005ea2
uswds-system-color-blue-vivid-60 Background color for primary buttons.
vads-button-color-background-secondary-on-light
#ffffff
Background color for secondary buttons.
vads-button-color-text-primary-alt-on-light
#ffffff
Text color for primary alt buttons.
vads-button-color-text-primary-on-light
#ffffff
Text color for primary buttons.
Input
vads-input-background-color-on-light
#ffffff
Form input background color.
vads-input-border-color-on-light
#565c65
uswds-system-color-gray-cool-60 Form input border color.
vads-input-prefix-color-fill-on-light
#757575
uswds-system-color-gray-50 Form input prefix icon fill color.
vads-input-prefix-color-text-on-light
#757575
uswds-system-color-gray-50 Text color for form input prefixes.
vads-input-suffix-color-text-on-light
#757575
uswds-system-color-gray-50 Text color for form input suffixes.
vads-input-tile-background-active-on-light
rgba(0, 94, 162, 0.1)
Background color for the active state for checkbox and radio button Tile variations.
vads-input-tile-border-active-on-light
#005ea2
uswds-system-color-blue-vivid-60 Border color for the active state for checkbox and radio button Tile variations.
vads-input-tile-border-on-light
rgba(27, 27, 27, 0.03)
Default border color for checkbox and radio button Tile variations.
Label
vads-label-hint-text-color-on-light
#757575
uswds-system-color-gray-50 Form label hint-text color. Only passes contrast ratio on a white background.
Link
vads-link-color-background-hover
rgba(0, 0, 0, 0.05)
Background color for links on hover.
Process list
vads-process-list-color-text-pending-on-light
#757575
uswds-system-color-gray-50 Items in the process list that are in a pending state use this color.
Concept tokens
These tokens are intended for the VA native mobile app. Unless you're building for the mobile app, use the semantic color tokens above instead.
These concept-level tokens originated from VA's native mobile app. Adopting them in existing web components has not been prioritized. Note that some pull in USWDS primitive colors not used elsewhere in VADS.
Action
vads-color-action-border-base-active-on-dark
#adadad
uswds-system-color-gray-30 Button border color (base style), active state, on dark backgrounds (mobile app).
vads-color-action-border-base-active-on-light
#2e2e2e
uswds-system-color-gray-80 Button border color (base style), active state, on light backgrounds (mobile app).
vads-color-action-focus-on-light
#face00
uswds-system-color-yellow-vivid-20 Focus outline color.
vads-color-action-surface-default-on-dark
#58b4ff
uswds-system-color-blue-vivid-30 Default button surface color on dark backgrounds (mobile app).
vads-color-action-surface-destructive-on-dark
#fb5a47
uswds-system-color-red-vivid-40 Destructive button surface color on dark backgrounds (mobile app).
Feedback
vads-color-feedback-border-warning-on-dark
#face00
uswds-system-color-yellow-vivid-20 Warning alert border color on dark backgrounds (mobile app).
vads-color-feedback-foreground-success-on-dark
#21c834
uswds-system-color-green-cool-vivid-30 Success text and icon color for feedback on dark backgrounds (mobile app).
vads-color-feedback-foreground-success-on-light
#008817
uswds-system-color-green-cool-vivid-50 Success text and icon color for feedback on light backgrounds (mobile app).
vads-color-feedback-foreground-warning-on-dark
#e5a000
uswds-system-color-gold-vivid-30 Warning text and icon color for feedback on dark backgrounds (mobile app).
vads-color-feedback-foreground-warning-on-light
#c2850c
uswds-system-color-gold-vivid-40 Warning text and icon color for feedback on light backgrounds (mobile app).
vads-color-feedback-surface-error-on-dark
#5c1111
uswds-system-color-red-vivid-80 Error alert background color on dark backgrounds (mobile app).
vads-color-feedback-surface-info-on-dark
#112f4e
uswds-system-color-blue-vivid-80 Info alert background color on dark backgrounds (mobile app).
vads-color-feedback-surface-success-on-dark
#19311e
uswds-system-color-green-cool-vivid-80 Success alert background color on dark backgrounds (mobile app).
vads-color-feedback-surface-warning-on-dark
#422d19
uswds-system-color-yellow-vivid-80 Warning alert background color on dark backgrounds (mobile app).
Forms
vads-color-forms-surface-active-on-dark
#252f3e
uswds-system-color-blue-warm-80 Active background color for checkbox and radio Tile variations, on dark backgrounds.
vads-color-forms-surface-active-on-light
#ecf1f7
uswds-system-color-blue-warm-5 Active background color for checkbox and radio Tile variations, on light backgrounds.
Edit this page in GitHub
(Permissions required)
Last updated: Jun 26, 2026