# 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

success
person
stars

# TrophyStar1

success
trophy
star

# Bicep1

success
flex
arm
bicep

# BullseyeHeart1

success
arrow
target
bullseye

# ShiningHeart1

success
shining
sparkle
heart

# PaperPlane1

success
plane
send

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

# Illustration Sizes

# API for Vue Components

# Illustration

Props