Components

Empty State

Empty states are moments designed to prevent confusion when the primary contents of a page cannot be displayed.

Depending on the app area, we might have different states for different moments:

  • Value state (“why will ____ benefit user?”)
  • Education State (ex: compose a message, turn on filters)
  • Celebration State (ex: inbox zero)
  • No Data State or status indicator (ex: still gathering data — check back in a bit)

If you’re a user of the inbox, you might be actively trying to achieve an empty state — clearing the inbox becomes an accomplishment/way of checking off to-do’s for the day.

However, if you’re a publishing user, landing at an empty state might actually be an indicator that you have work to do! For example, if you have an empty calendar, it likely means you haven’t yet published content to social via Sprout.

Order

At its core, an empty state consists of an image or illustration and a headline. Optionally, you may include descriptive copy, a primary button, and/or a secondary link.

The following order should always be used when designing a new empty state:

  1. Image or Illustration
  2. Headline
  3. Description (optional)
  4. Primary CTA (optional)
  5. Secondary CTA (optional)
Recommended size: 400px x 240px
Empty state title goes here.Subtext for empty states will go here and if you have multiple lines it will flow like this.Additional action

Size and spacing

Imagery and buttons usually have more visual weight than text, so we add larger spacing tokens around these elements to highlight the copy more prominently. The spacing between sets of like elements (e.g. between two text blocks or between two CTAs) is intentionally smaller because these elements are related to one another.

ValueTokenPlacement
24px$Space-size--450between the image and headline
16px$Space-size--400between the headline and description
24px$Space-size--450between the description and CTA
16px$Space-size--400between the Primary CTA and Secondary CTA

The width of the content of an empty state should be no greater than 400px

Recommended size: 400px x 240px
24px
Empty state title goes here.
16px
Subtext for empty states will go here and if you have multiple lines it will flow like this.
24px
16px
Additional action

Color

When a single spot illustration is used on a page, use

as the fill color.

When multiple spot illustrations are used on a page, you may use a variety of 400 level colors from our palette to create visual interest. (Usage examples: series of cards, several empty states within stacked containers on a page)

Uh oh, something went wrong!
This is the default spot illustration color.
Uh oh, something went wrong!
This is an alternative 400 level color.
Uh oh, something went wrong!
This is an alternative 400 level color.

Dos and Don’ts

Do

Keep it brief—prioritize the headline over description.

Your headline should contain most, if not all, of the information you are trying to convey to the user. Try to keep this to a single line of text.

Use descriptive copy only if absolutely necessary.

All empty state copy should be concise, informative, & reflect our brand voice.

Don't

Write descriptive copy longer than a sentence or two.

If you choose to include descriptive copy, it should be brief and scannable. If your copy wraps more than 2 lines, you’ve written too much.

If more details are needed to understand a feature or to teach a user what to do, consider collaborating with the growth team on a new first use or onboarding experience.

Do

Use spot illustrations.

Our spot illustration style adds personality to the pages of our application & helps reinforce our brand identity.

Do

If including a CTA, make the copy actionable.

Use language that indicates to the user what clicking the button or link will do for them.

Recipes

Illustration and headline

Uh oh, something went wrong!

Uh oh! something went wrong.

Illustration, headline and CTA

Uh oh, something went wrong!

Uh oh! something went wrong, please try again!

Illustration, headline and description

Uh oh, something went wrong!

Uh oh! something went wrong, please try again!

Configure your inbox to see the messages from selected profiles or message types you care about the most.

Illustration, headline, description and CTA

Uh oh, something went wrong!

Uh oh! something went wrong, please try again!

Configure your inbox to see the messages from selected profiles or message types you care about the most.

Resources