Foundation
Background color
Change the background color of an element
Background color
CSS property: background-color
Base colors
.vads-u-background-color--base
$color-base
#212121
.vads-u-background-color--white
$color-white
#ffffff
.vads-u-background-color--black
$color-black
#000000
.vads-u-background-color--orange
$color-orange
#eb7f29
.vads-u-background-color--link-default
$color-link-default
#004795
.vads-u-background-color--warning-message
$color-warning-message
#fac922
.vads-u-background-color--gibill-accent
$color-gibill-accent
#fff1d2
.vads-u-background-color--primary
$color-primary
#0071bb
.vads-u-background-color--primary-darker
$color-primary-darker
#003e73
.vads-u-background-color--primary-darkest
$color-primary-darkest
#112e51
.vads-u-background-color--primary-alt
$color-primary-alt
#02bfe7
.vads-u-background-color--primary-alt-dark
$color-primary-alt-dark
#00a6d2
.vads-u-background-color--primary-alt-darkest
$color-primary-alt-darkest
#046b99
.vads-u-background-color--primary-alt-light
$color-primary-alt-light
#9bdaf1
.vads-u-background-color--primary-alt-lightest
$color-primary-alt-lightest
#e1f3f8
.vads-u-background-color--secondary
$color-secondary
#e31c3d
.vads-u-background-color--secondary-dark
$color-secondary-dark
#cd2026
.vads-u-background-color--secondary-darkest
$color-secondary-darkest
#981b1e
.vads-u-background-color--secondary-light
$color-secondary-light
#e59393
.vads-u-background-color--secondary-lightest
$color-secondary-lightest
#f9dede
Grayscale
.vads-u-background-color--gray
$color-gray
#5b616b
.vads-u-background-color--gray-dark
$color-gray-dark
#323a45
.vads-u-background-color--gray-medium
$color-gray-medium
#757575
.vads-u-background-color--gray-light
$color-gray-light
#aeb0b5
.vads-u-background-color--gray-light-alt
$color-gray-light-alt
#eeeeee
.vads-u-background-color--gray-lighter
$color-gray-lighter
#d6d7d9
.vads-u-background-color--gray-lightest
$color-gray-lightest
#f1f1f1
.vads-u-background-color--gray-warm-dark
$color-gray-warm-dark
#494440
.vads-u-background-color--gray-warm-light
$color-gray-warm-light
#e4e2e0
.vads-u-background-color--gray-cool-light
$color-gray-cool-light
#dce4ef
Tertiary colors
.vads-u-background-color--gold
$color-gold
#fdb81e
.vads-u-background-color--gold-darker
$color-gold-darker
#988530
.vads-u-background-color--gold-light
$color-gold-light
#f9c642
.vads-u-background-color--gold-lighter
$color-gold-lighter
#fad980
.vads-u-background-color--gold-lightest
$color-gold-lightest
#fff1d2
.vads-u-background-color--green
$color-green
#2e8540
.vads-u-background-color--green-darker
$color-green-darker
#195c27
.vads-u-background-color--green-light
$color-green-light
#4aa564
.vads-u-background-color--green-lighter
$color-green-lighter
#94bfa2
.vads-u-background-color--green-lightest
$color-green-lightest
#e7f4e4
.vads-u-background-color--cool-blue
$color-cool-blue
#205493
.vads-u-background-color--cool-blue-light
$color-cool-blue-light
#4773aa
.vads-u-background-color--cool-blue-lighter
$color-cool-blue-lighter
#8ba6ca
.vads-u-background-color--cool-blue-lightest
$color-cool-blue-lightest
#dce4ef
Hub colors
.vads-u-background-color--hub-health-care
$color-hub-health-care
#3f57a6
.vads-u-background-color--hub-education
$color-hub-education
#21827f
.vads-u-background-color--hub-disability
$color-hub-disability
#a23737
.vads-u-background-color--hub-careers
$color-hub-careers
#bd5727
.vads-u-background-color--hub-pension
$color-hub-pension
#3e8520
.vads-u-background-color--hub-housing
$color-hub-housing
#8e704f
.vads-u-background-color--hub-life-insurance
$color-hub-life-insurance
#6f7a41
.vads-u-background-color--hub-burials
$color-hub-burials
#357ab2
.vads-u-background-color--hub-family-member
$color-hub-family-member
#003e73
.vads-u-background-color--hub-service-member
$color-hub-service-member
#003e73