Illustration

Product surfaces use flat spot art: empty states, start cards, and onboarding moments get a small composition instead of a stock image. The system is a frame, a stroke, and a token palette.

Imported system. Adopted from the app's design system. The rules apply as written; the art token values shown in the specimen are provisional; they resolve to theme variables once this site's token block is configured.

The system

One frame. Every piece is authored inside a shared Illustration wrapper: a fixed 4:3 viewBox (200 by 150) that scales to fill its container.
Token colors only. Art uses the art token object (brand, accent, tint, line, surface), which resolves to theme CSS variables. Never a hardcoded hex.
Flat only. Solid fills. No gradients, no drop shadows, same as every other surface.
Depth is an echo. Layering is implied by one duplicate shape behind the subject at roughly 0.4 opacity with a slight rotation, never by a shadow.
One stroke weight. Outlines use a stroke of 3 with round caps and joins; only small accents may deviate.
Simple parts. Compositions are rects, circles, and paths. If a piece needs a vector editor, it is too complicated for a spot.

Specimen

A draft page with a pencil disc: echo shape for depth, stroke 3 outlines, five token colors, nothing else.

Where it applies

Spot art is for product chrome: empty states, start cards, feature intros. Brand art (the bird, the tiles) is a separate system with its own rules under Character; the two never mix in one composition.