Patterns

Empty states

An empty state is displayed when the content of a page or experience can’t be shown. The goal of an empty state changes depending on time, activity, and purpose.

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 are actively trying to get to an empty state—clearing the inbox becomes an accomplishment / way of checking off to-do’s for the day.

If you’re a publishing user, however, landing on an empty state might actually mean you’re doing your job poorly. If you have an empty calendar, you likely aren’t publishing any content to social yet (through Sprout, at least.)

Do’s 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.

Guidelines

Ordering
At its core, an empty state consists of an image or illustration, plus 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)

Base Template

Spacing and Size
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.

24px ( $Space-size--450 ) between the image and headline

16px ( $Space-size--400 ) between the headline and description

24px ( $Space-size--450 ) between the description and CTA

16px ( $Space-size--400 ) between the Primary CTA and Secondary CTA

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

Spacing

Color Usage

When a single spot illustration is used on a page, use Blue 400 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)

Cards

Recipes

Empty state with illustration and headline

Uh oh, something went wrong!

Uh oh! something went wrong.




Empty state with illustration, headline and CTA

Uh oh, something went wrong!

Uh oh! something went wrong, please try again!




Empty state with a 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.




Empty state with 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