Nectar colours
Learn about the selection of colours available to use in Nectar experiences.
Colour palettes
Nectar’s selection of colours are divided into distinct palettes. The available palettes are Primary and Monochrome.
Nectar’s core colour is purple, while yellow, green, and red are additional primary colours to add vibrancy and variation. The purple is the colour associated with Nectar by users, so it’s important to use this distinctive colour first and foremost.
Primary brand palette
Secondary brand palette
The secondary palette contains a variety of colours to accent and identify the brand. You can use the secondary palette once the user has been fully introduced to the personality of the brand. When used with the primary palette, these colours help every interaction feel on-brand and informative.
Interaction palettes
The following colour palettes represent how the brand colours are used in interaction states.
Primary interaction palette
Secondary interaction palette
Monochrome palette
The monochrome palette is a group of colours that can provide text contrast and neutrality to designs.
Semantic palette
The semantic palette is a shared group of colours that help communicate key messages like errors, warnings, successes and understanding next steps. The consistent use of semantic colours keeps cognitive load low and makes for a unified and engaging user experience across our brands.
Error
Info
Success
Warning
Colour accessibility
To comply with the Web Content Accessibility Guidelines AA standard contrast ratios, choose colours from the Nectar palette that have sufficient colour contrast between them so that people with low vision can see and use our products.
Primary palette accessibility
When using Purple Base (#8223FA) as a background colour, only use Monochrome White (#FFFFFF) or Monochrome Lighter (#F2F1F5) for text.
When using Red Base (#FF6D4F), Green Base (#00D999) or Yellow Base (#FFCD00) as a background colour, use the Darkest extended colour of the base colour for text.