Illustration

In a nutshell

• Content illustrations are an extension of an icon but have less detail than a scene.
• They must have purpose and give further context and clarity when explaining a product.
• The most common illustration used to break up page content.

Application & styling

When designing content illustrations, we apply the following rules to ensure consistency:

Examples in situ

Using colour in content illustrations

Content illustrations also take on the primary colour palette. The main colour used to build these illustrations is the primary pink 60 with accents of the primary pink and purple.

Scaling

Content illustrations should be used at the correct size. The size in which you choose will depend on the size of the component and device it is intended for. We have given a minimum & maximum size as a guide so that the illustration can be used most effectively. There will be certain elements of some illustrations that will need to be modified at smaller sizes. For example, the house below at the minimum size is a variation of the maximum size. By taking away some of the detail it allows the illustration to be scaled keeping the clarity of the illustration at its best.

Notification illustrations

Notification illustrations are used slightly differently and take on the semantic colour palette to reflect a user’s status. The illustration is designed to alert the user to take action based on the status value, good, bad or warning. If there is no action to be taken the illustration will be displayed in the primary colour palette as above.

Using semantic colours in illustration

The semantic colours in our illustrations are used like a traffic light system and gives more of a visual indication to the status alert. Mint is used to denote that your status is good. The peach gives meaning to something needing your attention soon and red clearly denotes a warning - requiring urgent attention.