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
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.
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.
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.
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:
Grid | Grid - Vertical | Grid - Horizontal | Grid - Circle |
​ | ​ | ​ | ​ |
Illustrations use a set of three different gradients:
Our illustrations use @white
(#FFFFFF) to pull out details within the object.
Illustrations use @slate
(#333f48) over half of the object in order to add depth.