Illustrations

Illustration guidelines for empty states, onboarding flows, and feature highlights.

When to Use

Consistent illustration usage reinforces brand identity and helps users understand context at a glance. Use illustrations in these contexts:

Context	Examples
Empty states	No data, first-time experience, search with no results
Onboarding	Welcome screens, feature introduction, setup wizards
Feature highlights	New feature announcements, upgrade prompts
Error states	Permission denied, not found, service unavailable

Guidelines

Guidance	Practices
Do	Keep illustrations consistent in style across the product.
Do	Use simple, flat illustrations that work in both light and dark mode.
Do	Size illustrations proportionally to the container, typically 120–240px.
Do	Center illustrations with supporting text below.
Don't	Mix illustration styles from different sources.
Don't	Use illustrations as decoration without purpose.

Placement

Center illustrations inside Center with supporting text stacked below. Typical illustration sizes range from 120px for inline empty states to 240px for full-page onboarding screens. Always pair the illustration with a heading and optional body text to explain what the user should do next.

Empty state with illustration

tsx
<Center>
  <Stack direction="vertical" gap={3} hAlign="center">
    <img
      src="/illustrations/empty-search.svg"
      alt="No results"
      style={{ width: 200, height: 200 }}
    />
    <Heading level={3}>No results found</Heading>
    <Text type="body" color="secondary">
      Try adjusting your search or filters to find what you’re
      looking for.
    </Text>
  </Stack>
</Center>