Skip to main content


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 British Gas 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.
  • Use consistent flat colours. Do not use multiply blend modes or opacities.
  • 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


Each illustration uses predominantly a 2-colour pair from the below array:

Cyan and Blue#

Cyan and Blue

Lime and Forest#

Lime and Forest

Yellow and Red#

Yellow and Red


Our illustrations use white (#FFFFFF) to highlight details within the object.

Placement and contrast#

We should be mindful of the colour background on which these illustrations will be situated. For example, if choosing a decoration for a containing component such as ns-panel we should ensure a good contrast.