Colour

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

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.

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

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.

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 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.

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 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:

Brand orange

You should use Brand orange for:

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

Product orange

You should use Product orange for:

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