ds
Components
Empty state

Empty state

What to show when there is nothing yet.

Empty canvas

Draw a system, or paste one

Pick a tool above, press Ctrl+K to describe it to a model, or paste topo text from any chat.

Code

<div class="empty">
  <p class="label kicker">Empty canvas</p>
  <h2>Draw a system, or paste one</h2>
  <p>Pick a tool above, press Ctrl+K to describe it to a model, or paste topo text from any chat.</p>
  <div class="btn-row">
    <button class="btn accent">Draw with AI</button>
    <button class="btn">Open an example</button>
  </div>
</div>

Say what this place is for, then give the one or two ways to start. No illustrations; the dot grid is enough.

Small, for panes and lists

Light

No sessions in this workspace

Start one from the composer, or press Alt N.

Dark

No sessions in this workspace

Start one from the composer, or press Alt N.

390px, dark

No sessions in this workspace

Start one from the composer, or press Alt N.

Code

<div class="empty sm">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>
  <b>No sessions in this workspace</b>
  <p>Start one from the composer, or press Alt N.</p>
  <div class="btn-row"><button class="btn mini primary" type="button">New session</button></div>
</div>

.empty.sm fits a pane, a sidebar list or a tab: a 20px icon, a 13px title, one 11px line that says what will appear or how to start, and at most one 24px action. Its text stays under 240px.

Class	On	What it does
`.empty`	div	Centred kicker, heading, text and actions.
`.sm`	.empty	A 20px icon, a 13px title, an 11px hint up to 15rem, a 24px action.