Skip to main content

Colours

Why we use colour?#

Colour plays an important role in defining our visual identity. You can use our full suite of colours to create a real sense of brand recognition.

Our brand colours #

At our core, we’re a blue and white brand. Our blues and white should always take center stage to create a crisp, clean and functional digital experience. The full range of our brand colour palette should also be used to bring warmth and richness to our products. These additional colours can be introduced in many ways, primarily through our illustrations and gradients in our decorations and backgrounds.

Please use our brand colour palette across all digital products.

Primary#

Slate
#333F48
White
#FFFFFF
Cyan
#0099FF

Secondary#

Red
#D50032
Red Dark
#862633
Orange
#FF7A00
Yellow
#FFC72C
Green Light
#B4E100
Green
#009639
Green Dark
#006F44
Blue
#005EB8
Blue Dark
#003C71

Greys#

Grey Light
#F7F7F7
Grey
#C8C9C7
Grey Dark
#767775

Our system colours#

Our system colours are used to support and enhance communication to users throughout their journeys. Please be aware that system colours are always associated with a meaning and be careful not to create confusion by using these colours, or similar brand colours, inappropriately. Never use system colours as the only means of providing information or requesting an action.

Info
#209CEE
Success
#23D160
Warning
#E3660E
Danger
#EB002F
Focus
#FFDD57

Our gradients#

Our gradients are used to add depth and richness to our brand. They can be used as bold backgrounds. Each gradient is created from two brand colours. Gradients are 205° from one colour to the next, except for the gradient applied to ns-cta which runs vertically.

Applying a gradient to ns-panel can create a feeling of depth and richness for a page. Each and every ns-illustration uses gradients as they are rich in colour and personality. The hillside variant of ns-landmark uses our gradients.

Find our gradient colour palette in storybook.

Accessibility#

Always be mindful of how colour contrast many impact accessibility when dealing with type online and use our range of tools to ensure that your colour combinations are fully WCAG AA compliant.

Please refer to our accessiblity section for more detail on colour and accessibility. 

Best practice#

💚 Do's💔 Dont's
Do use our brand blues and white primarily for a crisp and clean branded experienceDon’t use colour combinations that are not complementary or jarring
Do use our secondary colours and gradients to inject warmth and personalityDon’t use colour combinations for type that are not WCAG AA accessible
Do ensure that your colour combinations are accessible to everyone