Color usage helps reinforce our brand identity and create a consistent visual language. The following are the primary colors used in our brand, and the recommended ways to use them.
Core Colors
Our brand's primary color is a vibrant blue that denotes approachability as well as trust. It is accompanied by red and yellow accents that support and complement our primary color.
Palette
Our core color system is extended into a full palette with a range of 0-1000 denoting the brightness of the color. Lower numbers on the scale equate to lighter shades, while higher numbers are darker. These colors are used to create a consistent visual language across our brand. Green and grey shades are also added to the palette for additional flexibility and UI usage, but are not considered core brand colors.
Basic Usage
Overall color use should heavily feature our brand blue alongside either light or dark greys, depending on the users preferred color scheme. Our brand red and yellow are used sparingly, to provide emphasis to key points, define sections of content, or provide a visual break from the primary color. Some other key points to consider:
- Content (text and icons) placed over our brand blue should be in white, Grey 50, or tonal Blue 900. This is to ensure proper contrast ratios are met an upheld for users with visual impairments.
- In digital applications, text used over our brand background must be set to a minimum of 14px and always at a bold weight in order to meet WCAG 2.1 AA contrast requirements.
- When using the brand accent color, choose one to use on a communication. Our preference is using the brand red in light contexts, and the brand yellow in dark ones.