Also known as:
An illustration communicates and expresses our personality through visuals.
Autocomplete (not built)
Avatar (not built)
Badge (not built)
Button Group (not built)
Card (not built)
Date Picker (not built)
Divider (not built)
Infinite Scroll (not built)
Loading Skeleton (not built)
Loading Spinner (not built)
Pagination (not built)
Search Field (not built)
Tabs (not built)
Tile (not built)
Need to know
Scene illustrations tell a rich story to set the scene for users and let them know what's possible.
Spot illustrations are simple, informational visuals that assist users in their task.
To keep in mind
Scene illustrations convey a mood while users are navigating through the platform.
Spot illustrations give visual context to tasks.
Illustrations are generally presentational and use an empty
When to use and when not to use
When to use
Use illustrations to support onboarding or empty states.
Use illustrations to celebrate successes.
Use illustrations to draw attention to important features.
Use illustrations to convey complex ideas that are visual in nature.
Use illustrations when people aren't reading or understanding text descriptions.
When not to use
Avoid illustrations when words are more effective.
Avoid illustrations when performance is an issue.
Here are some examples of other existing design systems:
Lightning Design System: Illustration
Product Vs. Marketing Illustration by Meg Robichaud
Atlassian: Media image
© Culture Amp Pty Ltd
Link to Culture Amp site