Illustrations

The Shopify admin uses a precise illustration style to help merchants quickly and clearly understand how things work across every experience.

The illustration of a chair, in simples straight lines, followed by a version with curves and some color, followed by a final version with filled shapes and shadows.


Principles

Always be useful

Illustration adds information. It provides context, adds clarity, or leads to the next step. It gives merchants a deeper understanding of what they’re working on.

Keep it in the family

Illustrations are all part of the same visual family. Inconsistencies lower the overall quality of the experience, and can distract merchants or make them feel like they’re in the wrong place.

Be considerate

Illustration should understand and support the merchant’s experience. Each illustration needs to feel appropriate for whatever situation it shows up in.

Stay focused

Each illustration conveys one thing. The story is easy to understand, so merchants intuitively know how to accomplish whatever they came here to do.


Elements of style

A color palette and illustrations using the color palette

Color

Illustrations use a special set of colors designed to work well in the places where they show up. The palette is limited: individual illustrations use whites, grays, and two or three colors each. Colors are also less saturated than the surrounding UI, so they don’t distract from core interactions.

Illustrations of a flag, a teapot, a leaf, and various profiles of people of different ethnicities.

Shape

Objects have realistic proportions so they’re easy to recognize. Simple geometric shapes with rounded corners build images that are clear and approachable. Representations of people use more organic shapes.

An illustration of a laptop and an illustration of shipping boxes separated on a white background

Space

The perspective is flat and two-dimensional so the entire area of the illustration is of equal importance. Drop shadows give things subtle depth when necessary. An additional side of an object can be added if things aren’t easily recognizable from a single side.

Each illustration has negative space around it so it feels balanced in the place it lives, and so its visual weight is the same as other illustrations that live in the same places.

An stylized illustration of a chair with red lines defining its angles, next to an illustration of the profile of a person, with red lines to emphasize where curves are used.

Line

Line makes and arranges shapes in the space. All illustrations have smooth lines without texture. Smaller objects have straighter lines, while larger objects can have more detailed, curved lines.

Intersecting and continuous lines are a key element of the admin illustration style, but they aren’t forced. They make a simple illustration feel elegant and visually interesting without being distracting.

An intricate illustration of a shipping label, followed by an illustration of a sheet with a list of users, followed by a very simple illustration of an URL address bar.

Detail

Illustrations need some detail to make sense, but too much can be noisy. They have the minimum amount of detail necessary to make them feel realistic but still simple. Fine details are rarely smaller than 4px in height or width.


Where illustrations live

There are places where illustrations always appear, and places where they’re used only sometimes.

An illustration of scissors cutting a coupon to indicate a page for discount code administration that has no discount codes saved.

Empty states

Merchants see an empty state illustration the first time they access a new part of the experience, before they’ve had the chance to do anything there yet. It introduces what they can do here, and sets expectations for what’s ahead.

An admin homecard with a small illustration next to some text describing how to customize a theme.

Onboarding

Onboarding tasks help new merchants set up their store. Illustrations frame what each task is for. And by changing in appearance, they reinforce when a task is complete.

Illustrations announcing traffic insights and local delivery features.

Announcements

Announcements let merchants know about something that might help their business. Illustration clarifies the message, and makes it easier to spot.

An illustration next to a card talking about Shopify Payments.

Spot illustrations

In some rare instances, unique spot illustrations can be used to achieve a specific goal, like to draw attention to something important on a busy page, or to explain a technical concept.

Next
Sounds