Style Guide

The following are global styles available to all of the site.

Colors

These Sass variables are global colors that can be used anywhere throughout the site.

  • #468ABC
    $blue
  • #ECF9FF
    $blue-light
  • #4D97CC
    $blue-medium
  • #004D75
    $blue-dark
  • #56BE98
    $green
  • #F69648
    $orange
  • #E48445
    $orange-dark
  • #B10026
    $red
  • #FFF5F6
    $red-light
  • #231F20
    $black
  • #636467
    $gray-dark
  • #A7A9AC
    $gray-medium
  • #CDCDCD
    $gray-light
  • #EDEDED
    $near-white
  • #FFFFFF
    $white

Typography

Some font sizes change based on the device. This style guide will display the appropriate font size for whatever device is currently being used.

H1

Header 1

H2

Title

H3

Subheader

Body

Body

Buttons

Buttons include a hover state.

Button Text

Forms

Field: Normal State

Field: Fill State

Field: Error State

Text Box

Text box with content

Mobile Friendly Dropdown

Desktop Friendly Dropdown

Example Text 2 Example Text 3 Example Text 4

Tabs

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content