20 single-colour line scenes for empty, error and success states.
| Prop | Type | Notes |
|---|---|---|
| name | string | One of 20 generic scenes (not-found, no-results…) |
| size | number = 120 | Rendered px; the scene is a 200×160 box |
| title | string | Present ⇒ role=img & labelled; absent ⇒ aria-hidden |
An illustration holds no state and fires no events — it's inline SVG, one colour. Because every stroke is currentColor, the same scene reads on a dark or a light surface with no second asset. Keep the set small: 20 generic scenes cover most empty, error and success moments.
Draw once in currentColor and let the surface decide. One asset, both themes.
Don't fill the shapes solid. Illustrations are line art, like the icons.
Reach for a generic scene. 20 cover most empty, error and success states.
Don't colour parts individually. Illustrations are a single colour.
Anchoring a first-run, zero-data screen.
Softening a dead end without alarming the reader.
The same scene, dark strokes — no separate light asset.
| Token | Value | Role |
|---|---|---|
| --illus-box | 200 × 160 | The viewBox every scene is drawn in |
| --illus-stroke | 2px | Line weight, matching the icon family |
| --illus-cap | round | Line-cap and line-join |
| --illus-color | currentColor | Single colour — inherits the surface's text colour |
| --illus-size | 80 · 120 · 160 | The three rendered steps |
| --illus-count | 20 scenes | Generic empty / error / success states |
<figure class="o-illus" aria-hidden="true">
<svg viewBox="0 0 200 160" width="120" height="96"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="100" cy="80" r="40" />
<polyline points="82,82 95,96 120,64" /> <!-- e.g. success -->
</svg>
</figure>