## Illustration
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.
Default to the HTML snippet — <aha-illustration> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, editor, settings, audience.
Props:
- name: string, default —. Registry illustration name, e.g. empty-team, onboarding-business, plan-pro
- size: number (px), default art intrinsic. Longer edge in px; the shorter edge scales to preserve aspect. Omit to use the art's own pixels
- label: string, default —. Accessible name (role=img). Omit for a decorative illustration
- decorative: boolean, default false. aria-hidden — for art that only repeats adjacent text
Tokens: color-error.
Use when: 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).