Why we use illustrations

We use illustrations to bring warmth of our brand personality to the website. We use bold, geometric shapes to make our complicated world feel friendly and accessible.

​ Nucleus illustrations

How we use illustrations

• Within infographics to make our messages easier to understand.

• Used on their own as the primary visual element.

• Layered over photography to enhance our stories.

• We use illustrations at larger sizes to draw use attention to areas of interest.

Creating new illustrations

If you are looking to create a new illustration then please check there is not something similar already in use. If there is no suitable illustration then you should let us know and we can look at creating it for the design system. All new icons and illustrations need to be approved by the brand team.

Illustration creation guidelines

• We make sure that a similar illustration is not already in use.

• Use the illustration grid to ensure consistency with current icons.

• We make sure illustration works across different sizes.

• Design clean and simple forms using our shapes.

• Use flat shapes over 3d forms, depth can be added through the use of gradients.

• Use consistent gradients and colours. Do not use multiply when using opacity.

• Rounded corners should make icon feel friendly, not childish.

Illustration grid

We use a grid for icon creation to give consistency across our illustrations. Here are examples of the grid and basic shapes to show it's usage:

Colour

Illustrations use a set of three different gradients:

Gradient - Blue

Gradient - Green

Gradient - Yellow

Highlights

Our illustrations use @white (#FFFFFF) to pull out details within the object.

Depth

Illustrations use @slate (#333f48) over half of the object in order to add depth.