# Empty state

Empty state: a free component, built on your design tokens, to use when a list or page has nothing in it yet. What a list shows when there is nothing in it: a small drawing in the system's own colours, what it means, when that changes, and one thing to do.

Prompt: Add the OpenDesigner component empty-state to this project: https://opendesigner.dev/library/r/empty-state.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: empty, all done, hover, focus.

Accessibility: The drawing is decorative and hidden from screen readers; the heading says what the state means, and the one primary action is a real button.

File: https://opendesigner.dev/library/r/empty-state.html