Color

These are the colors that have been chosen to represent the brand. These colors should be used in the correct proportion (see below) in all components of an application that require the use of color. The colors are set as variables in Spark and as document colors in the Design Toolkit.

Primary

The primary colors should make up about 80% of the color in a layout. These colors should be used to create consistency and a strong visual heirarchy throughout the experience.

  • Red

  • #C8102E
  • $red
  • rgb(200,16,46)
  • Black

  • #000000
  • $black
  • rgb(0,0,0)
  • Gray

  • #EBEBEB
  • $gray
  • rgb(235,235,235)
  • White

  • #FFFFFF
  • $white
  • rgb(255,255,255)

Secondary

The secondary color palette should make up 20% or less of the color in the layout and should be used sparingly to highlight important information and calls to action throughout the experience.

  • Deep-Red

  • #76232F
  • $red-deep
  • rgb(118,35,47)
  • Mid-Red

  • #9D2235
  • $red-mid
  • rgb(157,34,53)
  • Green

  • #00B398
  • $green
  • rgb(0,179,152)
  • Yellow

  • #F2A900
  • $yellow
  • rgb(242,169,0)
  • Blue

  • #007DBA
  • $blue
  • rgb(0,125,186)