# Illustrations
Illustrations are small and simple decorative images
# Principles
# The role of illustrations
Illustrations are small, simple, and designed to be complimentary to text. Our illustrations help bring our unique voice to our products. They can be used to highlight featured areas or add visual interest to the composition of the page.
# Be mindful
The illustration should support the user’s experience. The illustration needs to feel appropriate for the situation it has been placed in.
# Stay focused
The illustration should be related to the context it is being used for. The relationship between the illustration and the text should be intuitive and easy to understand.
# Where to use them
Some examples of where an illustration could be used are:
- empty states
- actions/intent
- feedback
# Attributes
# Size
You have 4 sizes to choose from which are determined by maximum width:
xs(64px)sm(96px)md(128px)lg(160px)
When selecting the size of your illustration, consider the compositional
weight of the text that it is accompanying and where it is located on the page.
If you have a small card that has text on one side and white space on the other,
it could be appropriate to use a sm illustration. If you have a feedback message
within a modal that could use some additional visuals, a md or lg could be
used.
# Color
Illustrations are designed to inherit the set brand color. Do not edit the color of the illustrations unless you are working on displaying alternate brand color settings.
# Design Best Practices
Aim To
Avoid
Don't
# Illustration Library
# Success Illustrations
# PersonStars1
# TrophyStar1
# Bicep1
# BullseyeHeart1
# ShiningHeart1
# PaperPlane1
# Need to Install Illustrations in your Project?
Follow the instructions in the getting started guide for installing illustrations.
# Examples
Illustrations are currently only available as Vue components. This allows illustrations to be updated in the future, without developers having to find and update every instance of an illustration.