Skip to main content

Latest release: Component Library: v51.1.0 released on Jun 25, 2025 | Guidance: Sprint 5 released on Jun 26, 2025 | Figma: Changelog

Foundation

Text Color

Change the color of text and SVGs (using fill: currentColor).

Note: Not all of these colors are placed in accessible color combinations.

Base colors

.vads-u-color--base

$color-base

.vads-u-color--white

$color-white

.vads-u-color--black

$color-black

.vads-u-color--orange

$color-orange

.vads-u-color--link-default

$color-link-default

.vads-u-color--warning-message

$color-warning-message

.vads-u-color--gibill-accent

$color-gibill-accent

.vads-u-color--primary

$color-primary

.vads-u-color--primary-dark

$color-primary-dark

.vads-u-color--primary-darker

$color-primary-darker

.vads-u-color--primary-alt

$color-primary-alt

.vads-u-color--primary-alt-dark

$color-primary-alt-dark

.vads-u-color--primary-alt-darkest

$color-primary-alt-darkest

.vads-u-color--primary-alt-light

$color-primary-alt-light

.vads-u-color--primary-alt-lightest

$color-primary-alt-lightest

.vads-u-color--secondary

$color-secondary

.vads-u-color--secondary-dark

$color-secondary-dark

.vads-u-color--secondary-darkest

$color-secondary-darkest

.vads-u-color--secondary-light

$color-secondary-light

.vads-u-color--secondary-lightest

$color-secondary-lightest

Grayscale

.vads-u-color--gray

$color-gray

.vads-u-color--gray-dark

$color-gray-dark

.vads-u-color--gray-medium

$color-gray-medium

.vads-u-color--gray-light

$color-gray-light

.vads-u-color--gray-light-alt

$color-gray-light-alt

.vads-u-color--gray-lighter

$color-gray-lighter

.vads-u-color--gray-lightest

$color-gray-lightest

.vads-u-color--gray-warm-dark

$color-gray-warm-dark

.vads-u-color--gray-warm-light

$color-gray-warm-light

.vads-u-color--gray-cool-light

$color-gray-cool-light

Tertiary colors

.vads-u-color--gold

$color-gold

.vads-u-color--gold-darker

$color-gold-darker

.vads-u-color--gold-light

$color-gold-light

.vads-u-color--gold-lighter

$color-gold-lighter

.vads-u-color--gold-lightest

$color-gold-lightest

.vads-u-color--green

$color-green

.vads-u-color--green-darker

$color-green-darker

.vads-u-color--green-light

$color-green-light

.vads-u-color--green-lighter

$color-green-lighter

.vads-u-color--green-lightest

$color-green-lightest

.vads-u-color--cool-blue

$color-cool-blue

.vads-u-color--cool-blue-light

$color-cool-blue-light

.vads-u-color--cool-blue-lighter

$color-cool-blue-lighter

.vads-u-color--cool-blue-lightest

$color-cool-blue-lightest

Hub colors

.vads-u-color--hub-health-care

$color-hub-health-care

.vads-u-color--hub-education

$color-hub-education

.vads-u-color--hub-disability

$color-hub-disability

.vads-u-color--hub-careers

$color-hub-careers

.vads-u-color--hub-pension

$color-hub-pension

.vads-u-color--hub-records

$color-hub-records

.vads-u-color--hub-housing

$color-hub-housing

.vads-u-color--hub-life-insurance

$color-hub-life-insurance

.vads-u-color--hub-burials

$color-hub-burials

.vads-u-color--hub-family-member

$color-hub-family-member

.vads-u-color--hub-service-member

$color-hub-service-member

Edit this page in GitHub (Permissions required)

Last updated: Mar 20, 2025