Our colour principles
Here are some principles which can help you apply colour in your products more effectively.
Communication is key
Although we value an aesthetically pleasing use of colour, we place a higher value on clear communication. Colour supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.
Colours have meaning
Colours have assigned roles, which hold a specific meaning based on how they function within the interface. Defined colour roles make things easy to modify and customize later. They also extend the colour system so it works across any touchpoint at JET.
Colours follow accessibility guidelines
The colour system is designed within the HSLuv colour space to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for merchants who are color blind or who have low vision. However you should never convey information using color alone.
Using orange in your designs
We’re an orange brand, which means that orange always takes centre stage. It represents our joyful personality, it’s bold, energising and we use it wherever we communicate.
However, there are significant difficulties when using orange in our designs, including colour contrast and accessibility issues. To tackle these we have come up with an additional colour called $color-orange.
Brand orange vs Product orange
Product orange is a modified version of our Brand orange colour which has been created with the objective to use orange in interactive elements and components within our interfaces.
Here are some guidelines which outline when to use Brand orange and Product orange in your designs:
You should use Brand orange for:
- Non-interactive elements
- Splash screens
- Navigation bars
- Marketing panels’ backgrounds
You should use Product orange for:
- Interactive elements
- Interactive text