18F UI style guide

Colors

Palette

$color-black | #000000
$color-dark | #1c304a
$color-medium | #046b99
$color-bright | #00cfff
$color-medium-hover | #034c6d
$color-bright-hover | #00a7ce
$color-light | #b3efff
$color-gray | #5b616b
$color-gray-lightest | #f1f1f1
$color-inverse | #ffffff
  • 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 System colors, $color-gray and $color-gray-lightest, were pulled for utility use.

    Additional resources:


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>
    
    
  • 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 System, 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: