Colour palette

All the colours of the rainbow. And a few others besides.


How we use colours

  • Yellow is reserved for primary actions (buttons) only
  • Colour combinations for text, icons and other important elements must meet the AA accessibility level. So your contrast ratio must be at least 4.5:1
  • Decorative imagery does not have to meet the contrast ratio, but you should still get pretty close, so make sure your images are completely distinguishable

How they look

The below text colour/background combinations all pass our accessibility standards.

Core

  • black #000000 rgb(0, 0, 0)
  • white #FFFFFF rgb(255, 255, 255)

Primary

  • light-pink #EB5F8E rgb(235, 95, 142)
  • light-green #72B72A rgb(114, 183, 42)
  • yellow #FCC31E rgb(252, 195, 30)
  • light-blue #35ADCE rgb(53, 173, 206)

Secondary

  • red #d60000 rgb(214, 0, 0)
  • dark-green #007349 rgb(0, 115, 73)
  • orange #EA5B25 rgb(234, 91, 37)
  • dark-blue #00528A rgb(0, 82, 138)

Neutrals

  • graphite #2F2E31 rgb(47, 46, 49)
  • dove-grey #666666 rgb(102, 102, 102)
  • alto #D0D0D0 rgb(208, 208, 208)
  • gallery #ECECEC rgb(236, 236, 236)
  • wild-sand #F5F5F5 rgb(245, 245, 245)

How to use colours

Colour values can be obtained by using the getColour($colour) function, where $colour is the English term for the colour required.

Examples:

light-blue background colour

.el {
    background-color: getColour(light-blue);
}

white text:

.el {
    color: getColour(white);
}

Design Tokens

Sass JSON Less Value
$gg-color-alto gg-color.alto @gg-color-alto #D0D0D0
$gg-color-black gg-color.black @gg-color-black #000000
$gg-color-dark-blue gg-color.dark-blue @gg-color-dark-blue #00528A
$gg-color-dark-green gg-color.dark-green @gg-color-dark-green #007349
$gg-color-dove-grey gg-color.dove-grey @gg-color-dove-grey #666666
$gg-color-gallery gg-color.gallery @gg-color-gallery #ECECEC
$gg-color-graphite gg-color.graphite @gg-color-graphite #2F2E31
$gg-color-light-blue gg-color.light-blue @gg-color-light-blue #35ADCE
$gg-color-light-green gg-color.light-green @gg-color-light-green #72B72A
$gg-color-light-pink gg-color.light-pink @gg-color-light-pink #EB5F8E
$gg-color-orange gg-color.orange @gg-color-orange #EA5B25
$gg-color-red gg-color.red @gg-color-red #d60000
$gg-color-white gg-color.white @gg-color-white #FFFFFF
$gg-color-wild-sand gg-color.wild-sand @gg-color-wild-sand #F5F5F5
$gg-color-yellow gg-color.yellow @gg-color-yellow #FCC31E