# Illustration
> Generated from illustration.contract.json — do not edit by hand.

One spot-art set, called by name — 20 multi-colour illustrations imported from Figma, rendered by the shared <aha-illustration>, never inline SVG.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: dashboard, editor, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `name` | string | `—` | Registry illustration name, e.g. empty-team, onboarding-business, plan-pro |
| `size` | number (px) | `art intrinsic` | Longer edge in px; the shorter edge scales to preserve aspect. Omit to use the art's own pixels |
| `label` | string | `—` | Accessible name (role=img). Omit for a decorative illustration |
| `decorative` | boolean | `false` | aria-hidden — for art that only repeats adjacent text |

## Visual standard (measured)
- Set: 20 illustrations · empty · onboarding · plan · offer · state · team · misc
- Source: Figma · Oldies library · file P764iQ6y4ZwW7W3f7FLZyW
- Colour: multi-colour — keeps its own palette (NOT currentColor)
- Size: one edge in px; the other follows the art's aspect ratio
- Fallback: unknown name → a dashed error box (var(--aha-color-error))

## When to use
- **empty-* illustration** — an empty state — no presentations, empty trash, no templates, no team yet
- **onboarding-* / plan-* illustration** — onboarding choice cards and plan-tier cards (edu / essential / pro / enterprise)
- **error-* / not-found illustration** — a full-surface error or 404 state, paired with a recovery action

Call by name from the registry — never inline an <svg>, never paste a raster PNG. An illustration is multi-colour art: it does NOT follow currentColor (that is <aha-icon>). Size it by a single edge; the aspect ratio is fixed by the source. If an illustration is genuinely missing, add the SVG under illustrations/svg and re-run build-illustrations.mjs. Raster-backed art (embedded bitmaps) is intentionally excluded — the library stays pure-SVG.