Colour

Core brand colours

The two most prominent brand colours are used in the header.

Please note, we are NOT currently using Pantone Plus

  • Cyan

    Pantone: Cyan

    CMYK: 100-0-0-0

    HEX: #00b4f7

  • Dark Blue

    Pantone: 288C

    CMYK: 100-67-0-23

    HEX: #00529a

Greys

Greys are used (particularly in type) to communicate information hierarchy and aid readability.

We have opted to not use 100% black for accessibility reasons. Studies have found that many dyslexic people find it easier to read when there is less contrast between the background colour and the text colour.

  • Grey Darker

     

    HEX: #4b4b4b

  • Grey Dark

    CMYK: 0-0-0-90

    HEX: #999999

  • Grey

    CMYK: 0-0-0-60

    HEX: #cccccc

  • Grey Light

    CMYK: 0-0-0-35

    HEX: #ededed

  • Grey Lighter

    CMYK: 0-0-0-10

    HEX: #f2f1f1

Product colours

There are specific colours associated with our products.

  • Parking - Platinum

    HEX: #687f8e

  • Parking - Gold

    HEX: #998a58

  • Parking - Silver

    HEX: #a9b2ba

  • Parking - Bronze

    HEX: #836242

Functional colours

These colours represent the brand in a functional capacity.

We use these colours (predominantly on the web) as a communication tool to help describe an action or to reinforce the tone when conveying certain information. This subtle interaction design aids usability and enhances the customers' web experience.

Examples

Buttons

Labels

  • Primary
  • Default
  • Info
  • Success
  • Warning
  • Danger

Alerts

Heads up! This alert needs your attention, but it's not super important.
Well done! You successfully read this important alert message.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

  • Primary

    Main 'Call to action' colour for buttons. It should be reserved for the most important actions on the page.

    Pantone+:

    CMYK:

    HEX: #a52752

  • Default

    Links and buttons

     

    HEX: #0084c5

  • Info

    Supportive actions to help the user

     

    HEX: #b7e6ff

  • Success

    Predominantly for offers, highlights and confirmation of positive actions.

    CMYK:

    HEX: #7ec252

  • Warning

    Notifications to support user actions

     

    HEX: #f7921e

  • Danger

    To be used sparingly to draw attention to errors

     

    HEX: #ec4b42