# Illustrations

Illustrations are small and simple decorative images

Principles
- The role of illustrations
- Where to use them
Attributes
- Size
- Color
Design Best Practices
Illustration Library

# 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.