Components

EmptyState

An explanation and the next step shown when a page, panel or list is still empty or a search finds nothing.

States

EmptyState has no interactive states; it comes in two sizes.

Size	Icon tile	Title	Description	Use
`md`	64 px	`heading-sm`	`body-md`	Page, large panel
`sm`	40 px	`heading-sm`	`body-sm`	Card, table, menu

Property	Value	Token
Text width	At most 440 px	`empty-state-text-width`
Icon tile	64 / 40 px	`empty-state-media-md`, `empty-state-media-sm`
Padding	`md` 24 px on every side; `sm` 16 px block, 12 px inline	`space-3xl`, `space-xl`, `space-lg`
Gap between parts (`md` / `sm`)	16 / 8 px	`space-xl`, `space-md`
Title to description	8 px	`space-md`
Between actions	10 px	`empty-state-actions-gap`

Values follow the selected brand; change the brand in the top bar.

Token	Light mode	Dark mode
`--bigbang-empty-state-text-width`	`440px440px440px`	`440px440px440px`
`--bigbang-empty-state-media-sm`	`40px40px40px`	`40px40px40px`
`--bigbang-empty-state-media-md`	`64px64px64px`	`64px64px64px`
`--bigbang-empty-state-actions-gap`	`10px10px10px`	`10px10px10px`
`--bigbang-color-surface-sunken`	`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-icon-subtle`	`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-color-text-subtle`	`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-motion-skeleton-reveal-duration`	`0.11s0.11s0.11s`	`0.11s0.11s0.11s`

Interaction	Property	Duration token	Easing token	Reduced motion
Appear (`motion.reveal`)	`opacity`	`motion-skeleton-reveal-duration`	`easing-productive-enter`	Shorter.

See Motion for the values.