Empty states

v1.0

Empty states are screens or containers with no content to display.

Overview

Empty states occur when a page, section, or container has no content to display. Empty states provide context to your users about why the space is empty and guide users toward their next action.
Empty states transform potentially confusing moments into opportunities for education, engagement, and conversion. They help users understand the system, reduce friction, and take meaningful next steps.

When to use

User is encountering a page or flow for the first time
User has cleared all data
A search, filter, or query returned zero results
Data isn't available or no longer exists

When not to use

An error has occurred

Considerations

Informative

Empty states clearly communicate information about the system status. A user should understand what information isn’t present and why.

Guiding

Empty states can help encourage users to discover unused features or engage with a new experience.

Contextual

Empty states are directly related to data or content the user is trying to retrieve.

Presentation

How you display an empty state depends on the context of your user experience. Display the empty state as a full-page, inline, or component-level layout depending on the context.

Full page

Full page empty states represent data that occupy a full page. The empty state content is vertically aligned to the top of the page.

When using full page empty states, keep page-level navigation to allow the user to leave the experience or proceed to other spaces.

Inline

When showing module-based empty states that are small and/or near other prominent visuals, use text only. Most of the time, this layout will be left aligned.

Component

Some components include a starting or empty state. If using a component with a default empty state, don’t add additional empty state elements.

Types

First-time use

Appears when a user encounters a feature for the first time and hasn’t created any content yet. This is an opportunity to educate and encourage adoption.

Encourage the first step with clear actions, such as “Add your address” or “Start a new search.”

User-cleared

The user had content but intentionally removed all items. Acknowledge what happened without making it feel like an error.  Consider adding delight to the experience with expressive colors and motion.

No results

A search, filter, or query returned zero results. Explain why and offer a next step, such as adjusting filters or saving the search.

Components to use

The exact anatomy of an empty state depends on the context and user experience. There are several different components and layouts available to express an empty state, but most will include copy and a CTA at minimum.

Graphic elements

A visual element that reinforces the empty state’s meaning. Use illustrations when it adds to the comprehension of the message, and use icons for simpler contexts. Not all empty states will require a graphic element

Illustration

Choose an illustration that literally represents the messaging. For example, use a bag illustration for an empty cart rather than a broken car. Find the Figma components with color variations and URLs for empty states in the illustration library.

Please note: using illustrations in your empty state designs requires approval from the OX team by filling out the Evo illustration approval form.

Icon

Icons can be used to add visual interest and information about the type of empty state. For data/list views, icons may be more appropriate than full illustrations

Headline

Required for full page and inline messages. The headline clearly and concisely explains why the space is empty.  

Use sentence case
No ending punctuation
Keep to 40–60 characters

Body text/description

Required. The body provides additional context by explaining the feature or what the user can do next. Don't restate the headline. 

Use sentence case
No ending punctuation
Keep to 1 sentence or 120–180 characters

Primary action (CTA)

Optional. The CTA provides the most direct path out of the empty state. Use verbs to make outcome immediately clear.  

Use sentence case
No ending punctuation
Use a [verb] [noun] or [verb] [article] [noun] pattern
Keep to 2–4 words

Popover

When displaying an empty state from a menu item, use a popover component to communicate the empty state.

View Popover

Specs

Spacing and layout

Spacing helps create a clear visual relationship between the elements within an empty state and improves readability and scannability.

Typography hierarchy

The headline should communicate the primary message quickly and be the most visually prominent element, while the supporting text provides additional context in a smaller, secondary style.

Empty state illustrations

We have a set of three illustrations available for use with empty states. These are the only illustrations that should be used for null state patterns. Find the Figma components with color variations and URLs for null states in the illustration library.