Sizing and placement

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.

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.

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.

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.

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.