Sizing and placement

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

An illustration of an open ebay box with a vinyl record and it’s cover laying open around it. Dotted lines around all edges of the illustration show where it sits within the purple background.

Sizing, cropping, safe zones

Placement

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.

An error state in light mode showing a person upside down wearing a blue sweater in an illustrated style. The person is emerging from a hole, and looking out into the distance.

Light mode

An error state in dark mode showing a person upside down wearing a blue sweater in an illustrated style. The person is emerging from a hole, and looking out into the distance.

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.

A full sheet on the eBay mobile app in light mode with the top half showcasing an illustration of the earth against a lime background. A black location icon sits on the globe with a eBay shipping cardboard box rotating around the globe. The box is followed by a black dotted line to signify the movement of the box. The bottom half contains text in black and a CTA in blue against a white background.

Light mode

A full sheet on the eBay mobile app in dark mode with the top half showcasing an illustration of the earth against a lime background. A black location icon sits on the globe with a eBay shipping cardboard box rotating around the globe. The box is followed by a black dotted line to signify the movement of the box. The bottom half contains text in white and a CTA in blue against a black background.

Dark mode

Resources

Change log

DateNotes
Mar, 2025
  • Removed all illustrations that had people in them
Aug, 2024
  • Added “Modes” section
Jun, 2024
  • Updated to eBay Evo
Dec, 2023
  • Page created