Illustrations bring meaning and emotion to otherwise simple layouts. They can add context, enhance information comprehension and add visual interest. Generally, illustrations should be used in conjunction with blocks of informative text.

Usage guidelines

When to use
  • In support of a text block relating to the states: Empty, Error, Success and Loading
  • In experiences that are full page or in alignment with blocks of informative content
When not to use
  • Without a purpose as a decorative element. Illustrations should always accompany content
  • In an experience that competes with user content and Pins

Best practices


Use illustrations at the recommended size.


Increase or shrink the size of illustrations past their prescribed size. If you need something smaller, consider using an icon.


Allow the illustrations to have plenty of surrounding white space.

An illustration placed on top of an image.

Place illustrations on top of other elements such as images or text.


Use the correct illustration type in the correct context. For example, use a loading illustration for content about processing.


Change the color, line thickness or subject of the illustration.


Use illustrations in experiences that are full-page or in alignment with blocks of informative content.


Use illustrations to replace crucial or in-the-moment messaging patterns like BannerCallout, BannerSlim or Toast. Learn more about available messaging components


Pair with text

Illustrations should always accompany content. Different cultures don’t always interpret illustrations in the same way. Accompanying content can help to add the appropriate context.

Include a title

Illustrations should include a title that describes the image. A title adds valuable information for low-vision or screen reader users.

title=“Line illustration of a wilted plant in a pot.“
title=“Line illustration of a coffee cup with a sad face in the coffee foam.“


These are more complex illustrations. They include multiple illustration subjects in a scene-like lockup. Large illustrations should be used in experiences where there is ample white space.
These illustrations are individual pieces of the Large variant. They are smaller and more contained. Instead of depicting a scene, they stand on their own.
The small illustration is the simplest of the three. They are used in areas where space is limited, like tables or small mobile experiences.



Display when content is not currently available or is unable to load. For example, when a user is interacting with a card in a dashboard for the first time.

Large empty
Medium option 1
Sad puzzle
Medium option 2


Display when something goes right. Used for success or celebration moments that are more permanent or long-lasting.

Success option 1
Disco ball
Success option 2
Happy plant


Display when something goes wrong or extra care should be taken. Used for moments that are more permanent/long-lasting, for example a 404 page. If the message is more critical or requires action, use an appropriate messaging component instead.

Medium option 1
Sad plant
Medium option 2
Sad coffee


Display when information may take time to process or when keeping users informed on system status. If processing time is short and does not require the user to leave and return to the page, use the Spinnerinstead.

Medium option 1
Medium option 2

Illustration in use



Future updates

Research and iteration

Gestalt plans to keep an eye on illustration use and design requests. As we gather data from designers and engineers, we will iterate on the illustration library to better serve a broad set of use cases.

Need an illustration?

If you are looking for a new illustration, please first check the existing set and make sure there isn’t something similar already in the library. If there is not an applicable illustration or if you have an idea for a new illustration:

Future collaboration model

If there is a signal that teams are interested in using illustration in a broader context, Gestalt will publish documentation on illustration creation and how to graduate an illustration into the system.

Our iconography system provides symbolic representations of elements within an interface.

Messaging patterns detail how we communicate errors, warnings, successes, recommendations and general information on system status.

Brand expression
Brand expression in the product the combination of visual elements (colors, typography, photography, motion, and other assets) to provide a delightful experience for Pinners.