Colors

Primary colors

$color-primary

#0071BC
$color-primary-darker

#205493
$color-primary-darkest

#112E51

$color-base

#212121
$color-gray-dark

#323A45
$color-gray-light

#AEB0B5
$color-white

#FFFFFF

Secondary colors

$color-primary-alt

#02BFE7
$color-primary-alt-darkest

#046B99
$color-primary-alt-dark

#00A6D2
$color-primary-alt-light

#9BDAF1
$color-primary-alt-lightest

#E1F3F8
$color-secondary

#FFF039
$color-secondary-darkest

#F1E235
$color-secondary-dark

#FFE61A
$color-secondary-light

#FFF79C
$color-secondary-lightest

#FFFAC3

Background colors

$color-Light-neutral

#F5FBFC
$color-light-blue

#E0F3F8
$color-gray-warm-light

#E4E2E0

Tertiary colors

$color-tertiary

#E31C3D
$color-tertiary-darkest

#981B1E
$color-tertiary-dark

#CD2026
$color-tertiary-light

#E59393
$color-tertiary-lightest

#F9DEDE

We are primarily using 18F Brand colors.

Site-specific colors, $color-medium-hover and $color-bright-hover were created as web-specific extensions of the 18F Brand.

U.S. Web Design standards colors, $color-gray and $color-gray-lightest, were pulled for utility use.

Additional resources:
- USWDS references
- SCSS references

Backgrounds

$color-dark
Hero, Header

Highlight: $color-bright

Text: $color-inverse

$color-medium
Navigation, Fields, Page

Text: $color-inverse

$color-gray-lightest
Banner & Footer

Text: $color-black

$color-inverse
Navigation, Fields, Page

Text: $color-black

  
<section class="usa-grid-full">
  <div class="usa-width-one-half">
    <div class="background-dark styleguide-bg-box">
      <div class="p-bold">
        <p>$color-dark
          <br>Hero, Header</p>
      </div>
      <p class="section-heading">Highlight: $color-bright</p>
      <p>Text: $color-inverse</p>
    </div>
    <div class="background-medium styleguide-bg-box">
      <div class="p-bold">
        <p>$color-medium
          <br>Navigation, Fields, Page</p>
      </div>
      <p>Text: $color-inverse</p>
    </div>
  </div>
  <div class="usa-width-one-half">
    <div class="background-gray styleguide-bg-box">
      <div class="p-bold">
        <p>$color-gray-lightest
        <br>Banner & Footer</p>
      </div>
      <p>Text: $color-black</p>
    </div>
    <div class="background-white styleguide-bg-box">
      <div class="p-bold">
        <p>$color-inverse
        <br>Navigation, Fields, Page</p>
      </div>
      <p>Text: $color-black</p>
    </div>
  </div>
</section>

Documentation

We are using the 18F Brand color palette for our background colors.

Instead of overriding the SCSS classes and variables used by the U.S. Web Design Standards, we have created a parallel set of background color classes and variables.

CSS class	SCSS variable
`background-dark`	`$color-dark`
`background-medium`	`$color-medium`
`background-gray`	`$color-gray`
`background-white`	`$color-inverse`

Additional resources:

SCSS references