Colours

Nucleus guidelines for use of colour.

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 in storybook across all digital products.

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.

Find our system colour palette in storybook.

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 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