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.
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)
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 Medium
#551387
$purple-medium
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)
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)