Illustration
An illustration communicates and expresses our personality through visuals.
Also known as:
IllustrationHero illustrationSpot illustrationImageryGraphics
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field
- Select
- Slider
- Slider
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- 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.
Adding new illustrations
To add a new illustration to the Kaizen UI Kit, to export an illustration from the UI Kit, or to add an illustration to the Kaizen Component Library, Culture Amp employees can see an internal link for the illustrations process on our wiki.
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: