Our colour principles
We have a set of principles to help you use 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 in the PIE design system. They're used to convey a specific meaning or function based within our products' interfaces. Defined colour roles make things easy to modify and customise 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 interface elements easier to find, identify, and interact with. It also makes the whole experience more accessible for users who are colour-blind or who have low vision. However you should never convey information using colour 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. Product orange was created specifically for use in interactive elements and components in our interfaces.
There are guidelines to help you determine when to use Product orange and when to use Brand orange in your designs.
You should use Brand orange for:
- Non-interactive elements
- Splash screens
- Navigation bars
- Marketing panel backgrounds
You should use Product orange for:
- Interactive elements
- Interactive text