Illustration

The set

Parcel

A lot with the envelope that may stand on it. The product's whole subject in one drawing.

parcel

Overlay

A mapped constraint above the zone beneath it — the same footprint at two heights.

overlay

Envelope

What a height limit actually produces, with the dimension that produced it.

envelope

Ruleset

Codified provisions, stacked. The instrument a verdict is read from.

ruleset

Survey

A boundary traced over the drafting sheet — the measured layer on its own.

survey

Enquiry

A question asked of a specific lot. The assistant, and any enquiry about a site.

enquiry

The language

1 — Axonometric, never perspective

All parallels stay parallel. A planning drawing is a plan with heights on it; the moment lines converge on a vanishing point it stops being a measurement and becomes a picture of one. Every plane in the set is on the same 2:1 grid, so a lot in one drawing is the same lot in another.

2 — Flat planes only

No gradient, no shadow, no blur. Depth is read from which face a plane is — top, side, base — which is how an axonometric drawing has always done it, and also why these survive a theme flip that a shadow would not.

3 — One hue

Three tones of the accent plus the drafting hairline. A spot illustration in four colours is the loudest thing on a page whose actual subject is a council's zone palette — the same argument that keeps the AI group achromatic.

4 — No type inside a drawing

A label baked into an illustration cannot be translated and cannot be read by a screen reader. The words live beside it, which is also why every card above has a heading doing the work the drawing is not.

plane-top — turned up, and the only face that carries the accent proper
plane-side — turned toward you. The step that does most of the work: with only a top and a base, a drawing reads flat
plane-base — the ground, and anything turned away
plane-line — the drafting hairline. A setback, a boundary, a dimension

The three facesThe tones are named for the FACE, not the value — `top` is the face turned up, `side` the one turned toward you, `base` the ground and anything turned away. Naming them light/mid/dark would be naming the value, and the value forks between themes while the face does not.

Code

<GdIllustration name="envelope" :size="120" />

illustration

--gd-illustration-plane-top#4740DB#6D66E8

the face turned up — the lit plane of any solid, and the only one that ever carries the accent proper

--gd-illustration-plane-side#8F8AE6#453F91

the face turned toward the viewer. Mid-tone, and the step that does most of the work: with only a top and a base a drawing reads flat

--gd-illustration-plane-base#DCD8F9#2A2757

the ground plane and the face turned away. Pale enough to sit under everything else without competing

--gd-illustration-plane-line#B9B5EE#574FB0

the drafting hairline inside an illustration — a setback, a boundary, a dimension. Never an outline around a plane: the planes carry their own edge

The ground

GdCardMedia is the panel: a recessed surface with the survey grid on it at 5%. Its ground is --gd-surface-subtle, so it is a warm off-white in the light theme and the lowest charcoal in the dark one, and the drawing on it forks the same way through --gd-illustration-plane-*. Neither value is written down at a call site.

under forced colours

The same drawing, both groundsNothing here is theme-aware by hand. The panel takes a surface token and the faces take plane tokens; the dark plane values are re-derived rather than lightened, because three light indigos on charcoal is a hole in the page rather than a drawing.

Code

<GdCard flush>
  <GdCardMedia :height="150" tint="none" bare>
    <GdIllustration name="parcel" :size="112" />
  </GdCardMedia>
</GdCard>

Sizes

132 · 96 · 64 · 48Below about 48 the hairline is the only thing left and the drawing reads as a smudge — the same reasoning that gives GdLogo its flowMin. If a surface has less room than that, it wants an icon, not an illustration.

Code

<GdIllustration name="ruleset" :size="64" />

API

GdIllustration

Props

PropTypeDefault

namerequiredstring—

Which drawing — a key of `ILLUSTRATIONS`. Not a free-form path: path data at a call site is path data nobody reviews, and the same drawing ends up three subtly different shapes.

sizenumber96

Drawn size in px. The set is built on a 96 grid and holds together down to about 48; below that the hairline is the only thing left and the drawing reads as a smudge.

labelstring—

An accessible name. Omitted — the default — the drawing is `aria-hidden`, which is right whenever a heading beside it already says the same thing. Pass it only where the drawing is the sole carrier of a meaning.

The registry

ILLUSTRATIONS from @gridd/ui/illustrations is the set itself — each entry carries a use line describing what a caller is looking for when they scan it, and an array of paths each tagged with its face. There are 6 of them.

Rules

Add to the registry, never at a call site. A d passed in from a page is a drawing nobody reviewed, and the set stops looking like one hand made it within two releases.
One illustration per surface. Six on a card grid is the set being documented; two on a working screen is decoration competing with the data.
Never on the map. Same rule as the hand layer and for the same reason — over real parcels, a drawn plane in the accent is indistinguishable from a rendered one.
The heading does the naming. Leave the drawing aria-hidden unless it is genuinely the only thing carrying a meaning.
No type, no fourth colour, no shadow. The three that would each individually look fine and would collectively make it a different system.