Also known as:
IllustrationHero illustrationSpot illustrationImageryGraphics
Illustration
An illustration communicates and expresses our personality through visuals.
- Overview
- Autocomplete (not built)
- Avatar (not built)
- Badge (not built)
- Button
- Button Group (not built)
- Card (not built)
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider (not built)
- Dropdown
- Empty State
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner (not built)
- Modal
- Pagination (not built)
- Popover
- Radio
- Radio Group
- Search Field (not built)
- Select
- Split Button
- Table
- Tabs (not built)
- Tag
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- Tooltip
- Well
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.
Visuals
UI Kit
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
alt=""tag oraria-hidden="true"as appropriate.
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.
See also
- Icon.
External Links
Here are some examples of other existing design systems: