Illustration

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

Table of contents#

Style#

Adobe’s illustrations have two different styles — filled 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 Illustrator on the iPad.

Example of two illustrations with an orange fill, one with light blue background and texture, the other without background.

Filled#

The filled 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.