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