Intro

Use illustrated messages to communicate empty states more effectively. An illustrated message combines an engaging illustration with a solution-oriented message in a conversational tone. This approach gives users more context than a text message alone.

Illustrated message

When to Use

Do

  • Use an illustrated message to improve the user experience for empty states or message states in your application.

Don't

  • Don’t use an illustrated message for decoration or as a simple image.
  • Don’t use an illustrated message if you want to show a person or a product image. Use the avatar component instead.
  • Don’t use an illustrated message for problem-oriented messages.
  • Before using an illustrated message, always check the Illustrated Message Use Case Library.
  • Never use an illustration without a message.
  • Tailor the message to your use case.
  • Make sure that the illustration, message, and call to action work together as one.
  • Write a solution-oriented message.
  • Before using an illustrated message, always check the Illustrated Message Use Case Library.
  • Never use an illustration without a message.
  • Tailor the message to your use case.
  • Make sure that the illustration, message, and call to action work together as one.
  • Write a solution-oriented message.

Anatomy

  1. Illustration: Clarifies the situation. Always pair illustrations with a message.
  2. Headline: Explains the reason for the empty state – preferably in a single line.
  3. Description: Adds details and, where relevant, tells users what to do next. Keep the description to three lines or less.
  4. Button (optional): If there’s a clear next step, include a call-to-action button.

Anatomy of an illustrated message

Types

An illustrated message includes a set of five UX illustrations per use case: large (L), medium (M), small (S), extra small (XS), and base. Each variant has a different size and level of detail. Illustration sizes are used at different breakpoints – ensuring that the illustration remains appealing regardless of the container size.

Large (L)

Illustrated message – Size L in an empty page

Medium (M)

Illustrated message – Size M

Small (S)

Illustrated message - Size S for small containers, such as cards

Extra Small (XS)

Illustrated message – Size XS for small cards or tiles

Base

Illustrated message - Base size with no image (for example, in a table cell)

Core Illustration Set

We have defined a set of core illustrations that are linked to standard use cases.

You can explore the standard use cases in the [internal_only]Illustrated Message Use Case Library[/internal_only][external_only]Illustrated Message Use Case Library[/external_only]. Each use case comprises an illustration and corresponding message text (heading and description).

guideline
  • Only use the core illustrations for the designated use cases.
  • If you need to deviate from the default text, you may replace or refine the text to make it more specific. However, your message should always follow the intent of the designated use case.

Behavior and Interaction

The illustrated message uses a button for the call to action.

[internal_only]For details on mouse interaction and touch enablement, see the button specification.[/internal_only]

Illustrated message with a call-to-action button

Globalization and Localization

The illustrated message supports both left-to-right (LTR) and right-to-left (RTL) reading directions. [internal_only]

Note: Standard localization features are not mentioned explicitly in the specification.
[/internal_only]

Illustrated message in both LTR and RTL reading directions

Guidelines

Implementation

Specifications

Guidelines

Implementation