Skip to main content


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.




Red Dark
Green Light
Green Dark
Blue Dark


Grey Light
Grey Dark

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.


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.


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