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.
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.
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
Light nuetrals
Semantic Color Palette
These color and use are based on very firm research about psychology of signals.
#D42900
#FF8C00
#FFB700
#00983D
#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
#FAFAFA
#e0e0e0
#cccccc
#969696
#686868
#212121
Black & White
#000000
#FFFFFF