Design
Component checklist
React
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:
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.
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.
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
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.