Design standards

Colour

To apply colour you should:

  • only use the brand colours
  • add white (tint) or black (shade) in 10% increments

Brand colours

  • Green

    #6aa300

  • Orange

    #e86c00

  • Pink

    #cc0070

  • Purple

    #6e2066

  • Teal

    #0099a9

  • Red

    #c30000

  • Black

    #1d1d1d

  • White

    #ffffff

Using colours

You should:

  • use accessible colour combinations for text
  • use Black for titles and headings
  • avoid tints and shades for backgrounds
  • avoid relying on colour to convey important information

Also consider meaningful use of colour, for example:

  • greens for positive actions like submit or continue
  • oranges for cautionary actions like load or warn
  • reds for destructive actions like delete or error

As it appears on your ID.

Enter your full name

Black for labels and 30% tint for hint text. Red for errors with 80% tint for inset shadows.
White text on Green with 10% shade on hover and 40% shade for drop shadows.

View research on GitHub.