Skip to main content

Colour

Our colour system builds on the recognition of the JET brand colours to make the product interface more usable.

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.

The visual above shows a composition made of various of our brand colours.

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.

Some of the meanings we have determined for our ‘Supportive’ colour palette.

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.

The image above shows the colour contrast for white text placed over our Aubergine colour.

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.

Brand orange

You should use Brand orange for:

  • Non-interactive elements
  • Logos
  • Illustrations
  • Splash screens
  • Navigation bars
  • Marketing panel backgrounds

Product orange

You should use Product orange for:

  • Interactive elements
  • Buttons
  • Icons
  • Interactive text
  • Headings