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

Motion

Most illustrations animate by default. Motion is handled automatically, including users' reduced-motion preferences.

Using illustrations in Figma

Our illustrations are available as components through the Illustrations 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.

Implementation

Use the matching component from @pleo-io/telescope-illustrations when implementing a design. No SVG export is needed. See the Code tab for usage.