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.

  • Blue Dark

  • #0C4569
  • $blue-dark
  • rgb(12,69,105)
  • Blue Medium

  • #2081BF
  • $blue-medium
  • rgb(32,129,191)
  • Blue Light

  • #C3D3E3
  • $blue-light
  • rgb(195,211,227)

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.

  • Red Dark

  • #8C181D
  • $red-dark
  • rgb(140,24,29)
  • Red Medium

  • #B5121B
  • $red-medium
  • rgb(181,18,27)
  • Red-light

  • #FACCC4
  • $red-light
  • rgb(250,204,196)
  • Purple Dark

  • #44235D
  • $purple-dark
  • rgb(68,35,93)
  • Purple

  • #551387
  • $purple
  • rgb(85,19,135)
  • Orange Dark

  • #E67800
  • $orange-dark
  • rgb(230,120,0)
  • Orange Medium

  • #FF9B00
  • $orange-medium
  • rgb(255,155,0)
  • Green Dark

  • #3C7814
  • $green-dark
  • rgb(60,120,20)
  • Green Medium

  • #6C9F2E
  • $green-medium
  • rgb(108,159,46)
  • Green Light

  • #D3EF8D
  • $green-light
  • rgb(211,239,141)

Greyscale

The greyscale palette should be used sparingly.

  • Black

  • #222222
  • $black
  • rgb(34,34,34)
  • Gray Dark

  • #5A5A5A
  • $gray-dark
  • rgb(90,90,90)
  • Gray Medium

  • #AAAAAA
  • $gray-medium
  • rgb(170,170,170)
  • Gray Light

  • #E5E5E5
  • $gray-light
  • rgb(229,229,229)
  • White

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