Guidelines
- Use only one illustration per page
- Use “small” size in native app only
- Use “large” size in web only
- Never crop!
When to use
Use cases include dialogues, side panels, bottom sheets, empty states, error pages and confirmation experiences
When not to use
Not used in Cards, Selection cards, Lists or Native App Box components. Use duotone icons instead.
Backgrounds
- Typically on White Stripes
- Sometimes on Blondie
- Never on Cream or Dark backgrounds. Work with brand if inverse colors are needed on dark background
Accessibility
- By default, illustrations include alt text matching the name of the illustration file.
Animations
Static by default
- Errors
Animate by default
- Communication
- Team
- Hiring
- Welcome
- Insights/Reporting
- Time off/Vacation
- Moving money
Exceptions:
- Error: only use the animated version on 404/error pages on the marketing site.
- Celebration: depends on context. Make sure it’s not distracting or in the way.
Sizes
Small
Medium
Large
