Resources

Colour doesn’t have to be flat. Here are a few pointers on how to really make them pop.

Gradient overview

Gradients play an important role in adding depth and dimension to brand elements. Only create gradient combinations within each family, blending from dark to mid-tone to light.

RED CHORAL 100

RED 125

RED CHORAL 75

RED CHORAL 100

RED 25

BLUE 100

BLUE 125

BLUE 75

BLUE 100

BLUE 25

GREEN 100

GREEN 125

GREEN 75

GREEN 100

GREEN 25

GREY 25

GREY 50

WHITE 0% OPACITY

WHITE

Gradient rules

There are only a few basic rules to think of when using a gradient. Use it diagonally for buttons and icons, and straight up and down or left and right when using it for graphs. If you’re lucky enough to make a circular graph then use an angular gradient
to get that buttery spherical blend.

Gradient directions

Angular Gradient

45º Gradient

Vertical Gradient

45º Gradients

Gradients should always be placed edge to edge, not positioned outside of an object with the lighter colour on the top. Use the 75-100 gradient combinations when they are being used on their own or as a background for symbols. Use the 100-125 gradient combination when it needs to hold text.

Vertical Gradients

They are also used to separate content sections on the website.

Like this example.

These should be used for graphs and to separate content sections on the website. You can use all of the gradient options for vertical gradients. However please note that the white gradient is only used as
a content separator on the website.

Angular Gradients

Use high contrast
pairs

Great for circular
graphs

Don’t be afraid
to stack

For best effect always use a 100-25 gradient pairing. For example Choral Red 100 and Red 25. This combo is best used on circular graphs and also great for when you need to differentiate between entries.

Shadows

Gradients are one way to help our designs stand out. We also use inner shadows and drop shadows.

It's not too much, it’s just enough. This slight detailing helps things like our carousel indicators or progress bars stand out a little
bit more.

X
Y
BLUR
SPREAD
OPACITY
COLOUR

0
1
2
0
10%
Black

Inner shadow

A tad more visible than our inner shadow, this styling is great for helping bring to the foreground elements like button or data call-outs on a graph.

X
Y
BLUR
SPREAD
OPACITY
COLOUR

0
2
12
0
50%
GREY 100

Drop shadow

CONTENTS