Empty State

Preview

Two screens for the moments a product usually leaves blank. One thing went wrong, one thing has not happened yet, and both are laid out from the same parts as every other screen in the system.

Empty State, two screens, light and dark393 x 852 each, Platform ios-md

Each screen is drawn in Light and in Dark, with Color Tokens set on the frame itself. The dark screens are the same instances resolved against the other mode.

What are the Empty State screens built from?

9 instances across the two screens. This is the smallest set of screens in the library, and it uses the same parts as every other screen.

9 instances are counted, 8 placed directly on the frames and 1 nested. Placed counts an instance that is not inside another instance. Nested counts one that is. A component is counted by its set name, and an icon is an instance named in lowercase. The dark row holds the same instances as the light row.

Add money reports no nested instance at all, which shows where its badge came from. On Error the x is nested because it sits inside _Alert Status. On Add money the wallet glyph sits at the top level because the circle around it was drawn by hand.

Counted on October 2, 2026 with a Plugin API script over the two light frames of the Empty State page in the Appetite UI Figma file.

Which component should draw an empty or error state?

Empty State for a whole state, _Alert Status for the badge alone.

Use Empty State, a component with a Type of Info, Error or Success, a Title, a Body, an optional second action and an Icon Swap for the glyph. These two screens do not place it: Error places the _Alert Status badge and Add money draws its badge by hand. Booking Trips empty and Foodie Cart empty place Empty State, see Booking and Foodie.

The badge on its own is _Alert Status. It has one axis, Type, with four options, and each option is 64 x 64 in the component.

Pick the type from what the user is meant to feel.

On Add money the badge is a frame holding two ellipses, a 70 x 70 named Stroke filled with bg/white-0 and a 60 x 60 named BG filled with state/information/lighter-50, around a wallet-minimal icon. The Type axis of _Alert Status fixes the glyph per type, so it cannot show a wallet. Empty State solves that with its Icon Swap. Four rectangles named Divider, each 345 x 179 and filled with bg/white-0, sit at the top and bottom of both screens and center the content. They are spacers with a fill, whatever their name says.

Which tokens do the Empty State screens use?

Every solid fill and stroke on these two frames resolves through a variable, so the badge drawn by hand survives the mode switch too.

The two light frames hold 34 solid fills and strokes, spread over 9 different variables, and none is unbound. The badge fill on Add money resolves through state/information/lighter-50, a pale blue in Light and a 16 percent blue in Dark, which is why the dark badge reads as a deep navy.

Paints are every visible solid fill and stroke on the two light frames, inside instances included, counted by bound variable name on October 2, 2026.