Color

The product color palette is an extension of the colors that are identified int the Brand Color Palette. This allows for flexibility based off of product needs, but allows for consistancy across the product and marketing as it is grounded with the brand. We are also committed to complying with AA standard contrast ratios. To do this, choose primary, secondary, and neutral colors that support usability by ensuring sufficient color contrast between elements so that people with low vision can see and use the interface.

Primary

Our primary palette is comprised of our branding blue, Cerulean. This color is present across majority of touch points from marketing to product. In addition there is a lighter shade brand blue, Deep Sky Blue, and a darker shade of the brand blue, Blue Lagoon. These additional colors are in place to support the brand blue color and is not ment to this color.

A
Pass
A
Fail
A
Pass
A
Pass
Cerulean
0, 116, 168
#0074a8
A
Pass
A
Pass
A
Fail
A
Fail
Deep Blue Sky
0, 168, 241
#00A8F1
A
Fail
A
Fail
A
Pass
A
Pass
Blue Lagoon
0, 93, 133
#005D85

Secondary

Our secondary palette is made up of different shades of orange, which is the complimentary color to our primary blue colors. These colors were selected to provide meaningful feedback within our product.

A
Pass
A
Pass
A
Fail
A
Fail
Dark Orange
255, 140, 0
#FF8C00
A
Pass
A
Pass
A
Pass
A
Fail
Mango Tango
212, 112, 0
#D47000
A
Fail
A
Fail
A
Pass
A
Pass
Golden Brown
163, 86, 0
#A35600

Nuetrals

Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across product. Typically they are used for text and subtle backgrounds when we don't want to draw too much attention to a particular touchpoint or convey information such as "to do" or "disabled".

Dark nuetrals

A
Fail
A
Fail
A
Pass
A
Pass
Arsenic
54, 69, 79
#36454F
A
Fail
A
Fail
A
Pass
A
Pass
Midnight
34, 48, 61
#22303D
A
Fail
A
Fail
A
Pass
A
Pass
Tangaroa
21, 38, 54
#152636

Light nuetrals

A
Pass
A
Pass
A
Fail
A
Fail
Alica Blue
242, 243, 244
#F2F3F4
A
Pass
A
Pass
A
Fail
A
Fail
Link Water
203, 207, 218
#CBCFDA
A
Pass
A
Pass
A
Fail
A
Fail
Rock Blue
156, 164, 188
#9CA4BC

Semantic Color Palette

These color and use are based on very firm research about psychology of signals.

Grenadier
#D42900
Dark Orange
#FF8C00
Selective Yellow
#FFB700
Green Haze
#00983D
Cerulean
#0074a8
  • Grenadier (Red) is used for error messages/states and critical health state.
  • Dark Orange (Orange) indicates a danger status and a nearing critical asset. This color is also included in the secondary color palette.
  • Selective Yellow (Yellow) indicates a warning message and a warning health state.
  • Green Haze (Green) indicates success message and a healthy asset state.
  • Cerulean (Blue) indicates an information message. This color is also included in the primary color palette.

Greys

Snow
#FAFAFA
Gainsboro
#e0e0e0
Very Light Grey
#cccccc
Nobel
#969696
Dim Gray
#686868
Nero
#212121

Black & White

Black
#000000
White
#FFFFFF
Last Updated: 6/27/2019, 7:00:29 PM