Colour
Overview
Every part of the Allium design system (including non-default states) makes use of these palette colour tokens.
Allium manages the use of colour just enough to ensure a high level of consistency across all products and business channels, while also providing flexibility and encouraging creativity.
Guidance
- Avoid creating additional colours, gradients, or opacities. Every interface using Allium should use the design tokens defined in this palette.
- If you're using colour as a method of feedback or as an indicator of meaning, there should always be an accompanying text label and/or icon to support people with varying levels of colour perception ability.
- Use alternate background colours sparingly to separate blocks of content.
- Don’t use notification colours for anything other than their intended use.
Accessibility
Your colour combinations should be accessible to everyone. All colours you use to convey non-redundant information must meet WCAG 2.0 Level AA contrast ratio of at least 4.5:1.
Brand
Colour creates visual impact and distinguishes a brand. It conveys personality, attracts the eye, and indicates change.
The main brand colours are white, purple, and green. White is the most dominant colour in the Allium palette and should be the foundation of every page. Purple and green are used to accent white space through buttons, text colour, and links. This refrained use of colour reduces distraction and allows you to direct the customer's attention to things of importance.
Neutrals
Allium uses a set of 7 shades of grey called "neutrals". These grays have been chosen with a specific intent in mind – see the sections below for their recommended usage. With just a hint of blue undertone, neutrals provide a cooler, more calming feel, taking a step back to allow the brand colours to be more assertive.
Notification
These colours are reserved to convey specific meaning to customers and are used intentionally throughout the Allium design system: red to imply danger and amber for warnings. These guidelines reinforce a customer's mental models that green (a predominant brand colour) is to be perceived as positive. Use notification colours sparingly to emphasize the importance of the communication.
When using notification colours to convey meaning, don't assume everyone is perceiving that colour in the same way (see WCAG Success Criterion 1.4.1 Use of Color). Consider the use of messaging and clear iconography to support the communication in a way that's accessible and understandable to everyone. A good example of this is the ‘Notification’ component.
Gradients
Use gradients to draw attention to elements such as price, snipes, or callouts. In digital outputs, you can use gradients to block out content, but use them primarily as backgrounds for text blocks. Don't use gradient backgrounds with lifestyle photography, critters, and nature assets.
Note that pink is part of the gradient and is not a standalone colour for design.
Text
All the colours recommended for text are at least AA rated (when the text is used on a white background). The most commonly used text colours, which are the darker greys and purple, are actually AAA rated (see WCAG Success Criterion 1.4.6 Contrast enhanced).
Backgrounds
Always pair background colours with white text in order to meet the minimum contrast ratio required by WCAG 2.0 AA standards.
Use the purple gradient background with offer content and the solid shade with social content.
Border
Icons
Opacity
The following “colours” have predetermined colour values combined with opacity.
Opacity values are also available as individual design tokens. However, it's recommended you limit opacity use for these predetermined values to ensure that they’re usable and accessible with existing use cases.