# Illustrations

Our illustration library uses a fixed set of objects to support copy, guide attention, and add personality to the product.

Tabs: [Overview](/graphic-elements/illustrations/illustrations.overview.md) · [Guidelines](/graphic-elements/illustrations/illustrations.guidelines.md) · [Code](/graphic-elements/illustrations/illustrations.code.md)

# Guidelines

## A fixed library

Our illustrations are a fixed set of objects rather than bespoke scenes. Pick the object that best carries the message of the surrounding copy — they support copy, they don't replace it. See the [Overview](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.overview) tab for the full set.

## Colour

In the product, colour is chosen automatically by the app's `IllustrationColorProvider`, not per illustration or screen. Pink is the fallback when there is no provider; white-labelled surfaces get grey through the provider. See the [Code](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.code) tab.

## Motion

Most illustrations animate by default. Motion is handled automatically, including users' [reduced-motion preferences](https://telescope.pleo.io/foundations/motion/motion.accessibility).

## Using illustrations in Figma

Our illustrations are available as components through the [Illustrations](https://www.figma.com/design/iWrltAt3Sgulfn6u0Q3A16/Re-brand-%F0%9F%94%AD-UI-Icons---Telescope?node-id=15031-1583) Figma library. This library is enabled for all design files in Figma, so no installation is required. To add an illustration to your design, [insert it as a regular component instance](https://help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances).

## Implementation

Use the matching component from `@pleo-io/telescope-illustrations` when implementing a design. No SVG export is needed. See the [Code](https://telescope.pleo.io/graphic-elements/illustrations/illustrations.code) tab for usage.