Sizing and placement

Illustration sizing and placement always depends on where it's being used.

A group of four diverse people are standing together against a purple background with crop lines surrounding them.

Sizing, cropping, safe zones

Minimum size

Minimum size for any illustration is inside an 80px by 80px container with a minimum of 12px padding on all sides. This ensures there's enough space around the illustration—it shouldn't feel cramped.

Photo tips are shown on eBay mobile and desktop. On mobile, a bottom half sheet contains three square illustrations in list format to the left of its descriptive text. The first illustration is a beige laptop against a neutral grey background, the second illustration is a beige watch on a purple display pillow inside of a black display box against a neutral grey background, and the third illustration is a purple gaming console against a neutral grey background. On desktop, the same illustrations in the same format are featured in a modal.

Cropping

Only crop illustrations when absolutely necessary. For example, if using a portrait illustration in a landscape container, you may need to crop the top or bottom slightly if sizing the illustration down would result in significant legibility issues or excessive white space. Try to do this sparingly and make sure no important details get cut off, such as hands or faces.

To the left of the canvas, a person smiles while looking at their phone, illustrated with products and adornments surrounding the person’s head. There is a crop line at the person’s waist signifying where to crop the illustration when in use. Two mobile screen examples to the right of the canvas show a bottom half sheet with the illustration. The mobile screen to the left is the correct usage, with the illustration cropped to the top half of the bottom half sheet, whereas the right mobile example shows the wrong usage where the illustration is sitting un-cropped in the center of the space allocated for imagery in the half sheet.

Placement

In education cards

Illustrations in education cards should be centered horizontally within the safe zone. There should be a minimum of 24px padding from the top and bottom on large screens and 32px from the top and 24px from the bottom on small screens. They should always use a gray background, never color.

A mobile and desktop view of the eBay application and site, showcasing an eBay Motors education card.
The illustration features a mechanic in a blue uniform working on a salmon colored-car with the front hood propped open. The mechanic is retrieving a car part from an eBay-branded cardboard box, with two tires stacked to the left of the box. A pink box and red lines surround the space around the illustration showcasing how much space is allowed around the artwork.

In modals

Illustrations in expressive modals should be centered within the image zone with a minimum of 16px padding in any direction. If you must crop an illustration from the bottom, make sure it still meets the minimum padding on all other sides. Illustrations should always use the gray or colorful background already included in the illustration. For more information on modal behavior and specs, visit the Dialog page.

A mobile and desktop view of a Running shoes search result. On mobile, a bottom half sheet is shown with a Save your sizes selector. The top of the bottom half sheet shows a blue and white sneaker illustrated on a neutral grey background. A pink box and red lines surround the space around the illustration showcasing how much space is allowed around the artwork.
On desktop, a modal is shown with the same illustration and details.

In null states

Illustrations in null states should be max 168px by 168px on small screens and 200px by 200px on large screens. Padding between the image and typography should be 32px.

An empty state for the messages section is shown on mobile and desktop. The illustration featured is a beige and green mailbox with a beige and green bird sitting inside the mailbox. The empty state sits on a white background with text in black that reads “No messages (yet)” below the illustration. A pink box and red lines surround the space around the illustration showcasing how much space is allowed around the artwork.

Modes

How illustrations are treated in dark mode depends on what color background they have. Illustrations with white backgrounds use semantic color tokens and their backgrounds invert automatically in dark mode. Illustrations with any other color background use core colors and do not change in dark mode.

Illustrations with white backgrounds

Illustrations with white backgrounds (Variant A) use the background.primary color token and invert in dark mode. Some illustrations on white also have dark mode variants that swap automatically to ensure contrast is maintained against the darker backgrounds. Any page or container shape that contains an illustration with a white background should use the same background.primary color token so there is a seamless transition between the illustration and it’s background at any screen size.

Light mode

Dark mode

Illustrations with colored backgrounds

Illustrations with light gray and colored backgrounds (Variants B-H) use core colors for their backgrounds and do not change in dark mode. Any container shape that holds an illustration with these background colors should utilize the same core color so when the screen resizes, the margins around the illustration have a seamless transition.