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

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.

Light mode

Dark mode