Illustration

Illustrations bring a unique visual voice to products. They use different styles to guide, explain, and add context that enriches information and experiences.

Style#


Adobe’s illustrations have two different styles — filled shape and outline — which use a shared symbol and shape library. Metaphors usually relate directly to a product, but they’re used differently depending on context and UI placement.

Illustration with background and texture used for Adobe Fresco.

Example of two camera illustrations with a green fill, one with light blue background and texture, the other without background.

Filled shape#

The filled shape style uses color-filled shapes with a moderate amount of lines, and occasionally textures. Because this style is more editorial, playful, and decorative, it works well as an expressive way to capture attention and to convey broader, more abstract messages or topics.

Illustrations using this style are often used for introducing new content and features (e.g., onboarding scenarios), where the aim is to draw attention to important information surrounding them. They’re integrated with product interfaces through conscious choices in layout design and color theme.

Example of two outlined camera illustrations, one with a single gray color, the other with an accent color (blue and gray).

Outline#

The outline style uses lines, grays, and occasionally an accent color. This style is more informational, functional, and directive. It uses metaphors directly reflected in the UI, so it tends to be more literal and precise.

Illustrations using this style are best for guiding, explaining, and providing context to UI-related tasks (e.g., within empty states or error messages), where it may be essential for a user to take a specific action within a workflow. They use clear depictions of size relationships, object structure, and depth to convey information.