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.
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.
- Red Dark
- Green Light
- Green Dark
- Blue Dark
- Grey Light
- Grey Dark
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.
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.
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.
|💚 Do's||💔 Dont's|
|Do use our brand blues and white primarily for a crisp and clean branded experience||Don’t use colour combinations that are not complementary or jarring|
|Do use our secondary colours and gradients to inject warmth and personality||Don’t use colour combinations for type that are not WCAG AA accessible|
|Do ensure that your colour combinations are accessible to everyone|