Skip to content
LSD Framework
Component

Empty state

When the screen has nothing to show, give it a posture. Four roles — empty, error, search, filter — each with a distinct CSS-drawn illustration, a faint loop of motion, and a primary route back to somewhere.

01 · Empty (no data) — full

No constellations yet

Your registry is empty — once you add a first surface, it lands here as a card.

02 · Search (no results) + Filter (no matches)

No results for that query

Try a shorter phrase or different keyword. Tip: / focuses the search bar.

Filters cleared the whole orbit

Loosen one constraint or reset the filter set to bring rows back into view.

03 · Error (something broke)

The signal dropped

We couldn’t reach the registry — check your connection, then try again. The retry won’t lose any of your draft.

04 · Inline / compact

Nothing pinned here

Pin a frame from any frame card to surface it in this slot.

No matches in this orbit

Widen the radius and search again.

View HTML
<div class="es">
  <div class="es__art es__art--empty">…svg…</div>
  <h2 class="es__title">No constellations yet</h2>
  <p class="es__body">Your registry is empty.</p>
  <div class="es__row">
    <button class="es__btn">Create surface</button>
    <button class="es__btn es__btn--ghost">Import</button>
  </div>
</div>