Foundation

Background color

Change the background color of an element

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