Illustrations

Illustrations are visual symbols used to represent ideas, objects, or narratives. They can communicate messages at a glance, afford interactivity, and simplify complex ideas.

Component checklist

Design

Up to date

React

In development

Types

Illustrations should communicate complex ideas at a quick glance. While usually paired with text, illustrations should present information clearly so that the message is immediately understood. They should never be used as decoration or without consideration.

 

Depending on the complexity and level of attention, we differentiate two types of illustration:

  1. Simple illustrations
  2. Complex illustrations

 

In both cases, we use a flat illustration style. Usually, illustrations do not include people but occasionally include some atmospheric elements, depending on the design.

Most illustrations primarily use shades of grey and another primary color, usually blue. A third color can be introduced in rare cases for greater visual interest. Green is used to communicate a successful user action or lack of issues. Red is reserved for errors, missing data, and remove buttons (e.g. close button).

 

Simple illustrations

Regarding functionality, simple illustrations are smaller in size and used in states and modals that take up a small portion of the page.

Simple illustrations should be instantly recognizable, bold, and without much graphic detail.

Examples of simple illustrations

Examples of simple illustrations

 

Complex illustrations

Complex illustrations are larger and used in states and modals that take up most of the page.

Complex illustrations are useful in displaying a snapshot of the main idea with more graphic detail than simple illustrations. They include more visual detail and may incorporate a creative concept or narrative.

Examples of complex illustrations

Examples of complex illustrations

 

Where to use

Illustrations are used in two situations on the platform:

  • in Empty states
  • as visual support in information modals to make the modal more attractive and to engage the user's attention
Two examples of using the illustrations in their variants.

Two examples of using the illustrations in their variants.

When deciding whether to use a low or complex illustration, think about the purpose and the size of the empty state or modal.

See the Empty States chapter for more information about levels of attention.