Style Guide

Visit ncmg.com.au

Style Guide

Colour Palettes

Colour is the most important tool in a designer's belt. It establishes a brand's identity, and the emotions we feel when we engage with it. So it's vital that we pick a palette that not only looks right, it feels right as well.

A fresh coat of paint

Each colour in the following palette contains three (3) important pieces of information.

  1. A Sass variable, prefixed with a dollar sign ($). These variables are available for use on the website.

  2. A hexadecimal colour code, prefixed with a hash (#). This colour code can be used in any non-Sass environments, such as Photoshop or Illustrator.

  3. An inverted, hexadecimal colour code. Use this colour for text, or when inverting colour schemes.

For Sass environments, you can give any colour variable a suffix of -inverted to access its inverted variant.

$zesty-dark
#29b362
#fcfdfc
$zesty
#2cc36b
#ffffff
$zesty-light
#51cd85
#f6f8f7
$zesty-lighter
#79d8a0
#fcfdfc
$licorice-dark
#242929
#e5ebeb
$licorice
#262c2c
#e2e9e9
$licorice-light
#3a4040
#e8eeee
$licorice-lighter
#4f5454
#edf2f2
$grey
#D9DADE
#383f4c
$grey-light
#edeff3
#414958
$grey-lighter
#f6f7f9
#4a5264
$creme
#ffffff
#535965
$danger-dark
#e86854
#f4f1f0
$danger
#ff725c
#f6f4f3
$danger-light
#ff8c7a
#f6f4f3
$danger-lighter
#ff9585
#f6f4f3

Colour conversions

If you need the above colour codes in CMYK, HSL or RGB, I suggest copying the hexadecimal codes from above and pasting them into a tool like Convert A Colour, or any of the many other available websites.