Brand Colors

  • Marine Blue
    hex: #236192
    scss variable: $color-brand-marine-blue
  • Dark Blue
    hex: #0064c8
    scss variable: $color-brand-dark-blue
  • Bright Green
    hex: #00d649
    scss variable: $color-brand-bright-green
  • Light Blue
    hex: #2ec4ff
    scss variable: $color-brand-light-blue
To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Neutral Colors

  • Lightest Gray
    hex: #f7f7f9
    scss variable: $color-neutral-lightest-gray
  • Cool Gray
    hex: #e2e2e2
    scss variable: $color-neutral-cool-gray
  • Medium Cool Gray
    hex: #b1b3b3
    scss variable: $color-neutral-medium-cool-gray
  • Dark Cool Gray
    hex: #53565a
    scss variable: $color-neutral-dark-cool-gray
To add to these items, use Sass variables that start with $color-neutral- in ./source/css/scss/abstracts/_variables.scss

Accent Colors

  • Yellow
    hex: #ffc23b
    scss variable: $color-accent-yellow
  • Violet
    hex: #5c419e
    scss variable: $color-accent-violet
  • Coral
    hex: #f4715b
    scss variable: $color-accent-coral
To add to these items, use Sass variables that start with $color-accent- in ./source/css/scss/abstracts/_variables.scss

Background Colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Font Families

  • $font-family-primary: "Averta", "Helvetica", "Arial", sans-serif
  • $font-family-monospace: "SFMono-Regular", Menol, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
To add to these items, use Sass variables that start with $font-family- in ./source/css/scss/abstracts/_variables.scss

Font Sizes

  • $font-size-sm: 0.75rem
  • $font-size-sm-2: 0.85rem
  • $font-size-med: 1rem
  • $font-size-med-2: 1.2rem
  • $font-size-large: 2rem
  • $font-size-xl: 3rem
To add to these items, use Sass variables that start with $font-size- in ./source/css/scss/abstracts/_variables.scss

Font Weight

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Fonts

Primary font: "Averta", Arial, Helvetica, sans-serif
Primary font italic: "Averta", Arial, Helvetica, sans-serif
Primary font bold: "Averta", Arial, Helvetica, sans-serif