Illustration
Soft volumetric spot art shaded from a single accent hue.
Intents
An .illustration is an inline SVG whose gradient stops, backing disc, and long shadow all derive from one accent via color-mix, so recolouring never touches the markup: set --illus-accent (and --illus-badge for the corner pip) and the whole piece follows. An ancestor or inline accent overrides everything. The art below is one demonstrative piece — the full metaphor set and gallery are a separate effort. The default is a neutral gray. .illustration--primary, --success, --danger, and --warning reshade the whole piece from the matching token.
Custom accent
Set --illus-accent on the SVG or any ancestor for an arbitrary hue, and --illus-badge to give the corner pip its own colour.
Animated
Add .illustration--animated for a gentle float on the object and a pop on the badge. It is suppressed under reduced motion.
In an empty state
Drop an illustration into an .empty-state__media slot; the slot sheds its circle so the art isn't double-framed and caps the width.
Customization
These variables retune the art. Set them on the SVG or any ancestor.
| Variable | Use |
|---|---|
--illus-accent | The single hue the whole piece shades from (the intent modifiers set this) |
--illus-badge | Corner pip colour (follows the accent by default) |
The SVG markup carries the paint hooks: .il-g0–.il-g3 (gradient stops), .il-disc-o / .il-disc-i (backing disc), .il-obj (the shadowed object), and .il-badge (the pip).