Skip to main content

Illustrations

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.

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

GridGrid - VerticalGrid - HorizontalGrid - Circle
Grid for creating illustrationsGrid with vertical highlight for creating illustrationsGrid with horizontal highlight for creating illustrationsGrid with circle highlight for creating illustrations

Colour#

Illustrations use a set of three different gradients:

Gradient - Blue#

Gradient usage - Blue

Gradient - Green#

Gradient usage - Green

Gradient - Yellow#

Gradient usage - 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.