The Shopify admin uses a precise illustration style to help merchants quickly and clearly understand how things work across every experience.
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.
Illustration should understand and support the merchant’s experience. Each illustration needs to feel appropriate for whatever situation it shows up in.
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
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.
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.
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.
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.
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.
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.
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.
Announcements let merchants know about something that might help their business. Illustration clarifies the message, and makes it easier to spot.
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.