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:
- Image or Illustration (typically )
- Headline
- Description (optional)
- Primary CTA (optional)
- Secondary CTA (optional)
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.
| Value | Token | Placement |
|---|---|---|
| 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
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)
Dos and Don'ts
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.
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.
Use spot illustrations.
Our spot illustration style adds personality to the pages of our application & helps reinforce our brand identity.
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.