Drafting & hand

The two layers

Make both layers soft and it is a mood board. Make both hard and it is a CAD export. GRIDD already had the hard one — the 12-column grid, the hairline, the achromatic chrome, GdSurveyGrid. This page adds the other.

Hard — the drafting layer

What is measured. The grid, boundaries, tables, data, the map. Orthogonal, hairline, achromatic. It does not bend, and it never apologises for being precise.

Soft — the hand layer

What is interpreted. A movement, an intent, an emphasis, a character area. Tapered, rounded, translucent, and always obviously drawn by a person rather than surveyed.

marker

--gd-marker-flow#C4267D#E8579F

the movement arrow, and any hand-drawn emphasis. A NON-TEXT mark — the words it points at carry the meaning, and it must never be the only thing saying something AA-nontext on --gd-surface

--gd-marker-wash#FBE8F1#4E2540

the copic wash behind editorial content — an empty state's ground, a highlighted phrase. Pale enough that `--gd-ink-body` sits on it unmeasured-safe, because it is mixed from `flow` toward the surface rather than toward saturation

--gd-marker-wash-accent#ECEBFB#33306B

the SECOND pen — the same copic gesture in the product's own indigo, for a surface already built on the accent. An alternative to `wash`, never a partner to it: two marks in one view read as two categories

The mark's own road

The mark is three parcels cut by two roads: one running north–south between the big lot and the right-hand pair, branching east at the join. An arrow that comes down the main road and turns east is therefore not decoration laid over the mark — it is the mark's own geometry being read aloud. A planner would call it a desire line.

GRIDD

Plain and with flowThe arrow sits INSIDE the road rather than over it, and the mark's three planes were stepped apart 0.4 each way to make room: roads of 2.28–2.80 units holding a 1.6 arrow with ~0.35 of paper either side. Below 44px it renders under a pixel and smears, so flow is suppressed rather than trusted to a caller — which is also why the navbar mark is always plain.

Code

<GdLogo :size="88" />
<GdLogo :size="88" flow />
<GdLogo :size="26" flow />   <!-- suppressed: below flowMin -->

GRIDD GRIDD

At chrome sizeIdentical, because flow is suppressed below 44px. Chrome should not animate a brand at the top of every page, and a line thinner than a device pixel is not a line.

Code

<GdLogo :size="26" wordmark />
<GdLogo :size="26" wordmark flow />

Flow arrows

right

turn

rise

hook

The four presetsThe taper is the whole craft. A constant-width stroke with a triangle on the end reads as a diagram; the shaft here is a filled outline whose two sides diverge, and the head is part of the same closed path so the join is never visible.

Code

<GdFlowArrow flow="right" />
<GdFlowArrow flow="turn" />
<GdFlowArrow flow="rise" />
<GdFlowArrow flow="hook" />

Codify

Every provision, cited to its instrument.

Bake

Precomputed once, served everywhere.

Doing its jobBetween two sections, pointing the reader on. This is the register the arrow is for — an editorial gesture on a page with no data on it.

Code

<GdFlowArrow flow="right" :length="140" />

Copic highlight

Everything around your lot is already known — GRIDD is what fills the gap.

Over a wordThe ink overhangs the letterform — a highlighter never stops exactly at the type, and the overhang is most of what makes it read as drawn rather than as a background colour. The ends are blunt and uneven because a chisel tip is a wedge held at an angle: a pill reads as a badge, a rectangle reads as a table cell.

Code

Everything around your lot is <GdMarkerHighlight>already known</GdMarkerHighlight>.

shape 1

shape 2

shape 3

shape 4

The four swipesThey differ in where the chisel bit hardest, not in outline. The ink is continuous: a single pass whose density drifts slowly down the swipe, heavier through the middle where the nib is fully in contact. Banded strokes you could count are what a marker over a MASTERPLAN looks like, where the strokes are the size of suburbs; over a HEADLINE the same texture lands at the scale of a letterform and competes with the words.

Code

<GdMarkerHighlight :shape="2">setback</GdMarkerHighlight>

No projects yet

Start one from a council, a lot, or a file you already have.

Over an empty state's iconThe register it is actually for. The empty state keeps its glyph — the icon IS the content of an empty region — and the pass sits behind it like someone reached for a marker. Small, one pass, over something that was already there.

Code

<GdEmptyState title="No projects yet">
  <template #icon>
    <GdMarkerHighlight :shape="3" :spread="9">
      <GdIcon :d="ICONS.separation" :size="30" :stroke="1.6" />
    </GdMarkerHighlight>
  </template>
  …
</GdEmptyState>

RidgelinesUrban forestWetlandsCommunity gateways

Several marks, overlapping and with gapsThis is where the effect actually lives. The overlaps are genuinely darker because the ink multiplies — nothing here is drawing a third colour. It is the same behaviour the banding was reaching for, kept where it is a real event: between two marks a reader can see that something crossed, and inside one mark it was only busy.

Code

<GdMarkerHighlight :shape="1" :spread="14">Ridgelines</GdMarkerHighlight>
<GdMarkerHighlight :shape="3" :spread="14" :tilt="2">Urban forest</GdMarkerHighlight>

already known

Two pensA second INK, not a second meaning. The group's rule is still one emphasis hue per surface — a magenta and an indigo mark in the same view give a reader two colours and no legend, and they will invent one. `accent` exists so a composition already built on the product's indigo can be marked without a magenta landing in it, the way you pick up whichever marker is already on the desk.

Code

<GdMarkerHighlight>already known</GdMarkerHighlight>
<GdMarkerHighlight tone="accent">already known</GdMarkerHighlight>

In place — a hero and a CTA

Both examples below hold to the same discipline: one hand gesture, and the hard layer left hard underneath it. The survey grid is still orthogonal, the buttons are still square-shouldered, the hairline still runs. The mark is the only thing in the composition that a person drew.

Three councils live

Everything around your lot is already known.

Zoning, overlays, setbacks, height limits and every provision that governs the site — read from the council's own instruments, cited line by line.

Hero — the mark carries the claim, not the headlineThe highlight goes on the two words the whole page is arguing, and nothing else. It is deliberately NOT on the verb, the product name, or the first noun that came along: a highlight is emphasis, and emphasis spread across a sentence is just a coloured sentence. The arrow does the second job — it points from the claim to the action, which is the one place a flow arrow is honest on a marketing surface.

Code

<h1>
  Everything around your lot is
  <GdMarkerHighlight :shape="1" :spread="10">already known</GdMarkerHighlight>.
</h1>

Start with one address. No account needed .

A full planning read for any lot we cover, in about ten seconds.

CTA — the mark on the promise, not on the buttonThe highlight sits on the phrase that removes the objection, and the button stays completely untouched. Marking a button is the single most tempting misuse of this and the one that reads as cheapest: a button already has the strongest affordance on the page, and laying a hand-drawn wash behind it makes a control look like decoration — which is also an accessibility problem, because the mark disappears entirely under forced colours and would take the button's apparent emphasis with it.

Code

<p class="cta__line">
  Start with one address.
  <GdMarkerHighlight :shape="3" :tilt="1.6">No account needed</GdMarkerHighlight>.
</p>
<GdButton variant="primary">Check an address</GdButton>

Don't — the whole line

Everything around your lot is already known

Emphasis on everything is emphasis on nothing, and at this length the mark stops reading as a gesture and starts reading as a coloured background.

Don't — behind the control

The button already carries the page's strongest affordance. The wash adds nothing it can keep — under forced colours the mark is gone entirely.

Don't — soft on soft

already known

Two arrows and a wash in one line is a scrapbook. The contrast with the hard layer is the whole effect, and there is no hard layer left here to contrast with.

What both of these are avoidingEach of these was drawn by taking one rule off the list. They are here because the failure mode is not obvious in a component specimen — it only appears once the mark is in a composition.

API

GdFlowArrow

Props

PropTypeDefault

flow"right" | "turn" | "rise" | "hook""right"

The four moves the reference drawings actually make. A free-form `d` is deliberately not offered — an arrow anyone can draw is an arrow that stops looking like the same hand drew it.

lengthnumber96

Drawn length in px. The arrow scales as a whole; the taper is proportional.

mirroredboolean—

Flip horizontally — the same hand, drawn the other way.

labelstring—

An accessible name. An arrow that MEANS something ("growth corridor") needs one; a divider does not, and stays aria-hidden by default because most of them are decoration.

GdMarkerHighlight

Props

PropTypeDefault

shape1 | 2 | 3 | 41

Which of the four swipes. Four rather than a random one per render: a page that looks different on every reload is a brand that will not hold still. They differ in where the chisel bit hardest, not in outline.

tone"default" | "accent""default"

Which pen. `default` is the marker magenta; `accent` is the same gesture in the product's indigo, for a surface already built on the accent. A choice per SURFACE, not per phrase — two tones in one view read as two categories.

strengthnumber100

How heavily the pass was laid down, 0–100.

tiltnumber-1.4

The hand-placed angle in degrees. Small — this is a wobble, not a tilt. Level and even stops looking drawn.

drawboolean—

Perform the pass: the ink swipes on once, left to right, when the mark arrives. For the one hero moment a surface gets — a page of marks each drawing themselves is a screensaver. Cue via `--gd-hl-draw-delay` (0.4s default) so the host lands its headline first; reduced motion collapses it to a plain appearance.

spreadnumber5

How far the ink overhangs what it marks, in px. A highlighter never stops exactly at the letterform, and overhanging is most of what makes it read as drawn rather than as a background colour.

GdLogo — the flow additions

Props

PropTypeDefault

flowboolean—

Draw the desire line through the mark's own roads. Editorial surfaces only.

flowMinnumber44

The size below which `flow` is suppressed. The arrow is 1.6 of 48 units and renders at `size × 0.0333` — 1.47px at 44. Enforced rather than left to a caller to remember.

Rules

Never on a map, a report, or beside a provision. The one rule with a guard behind it, and the reason the group exists in quarantine.
One hand gesture per view. Two arrows and a wash on one screen is a scrapbook. The reference drawings are busy because they are showing six land uses; a landing page is showing one idea.
The hard layer stays hard underneath. If a surface has a grid, a table or a hairline on it, that stays crisp — the whole effect is the contrast, and softening both is how it becomes a mood board.
An arrow that means something gets a label. Decoration stays aria-hidden, which is the default.
Colour is never the only signal. The highlight disappears entirely under forced colours, deliberately — it is decoration, and decoration has no business surviving a user's own palette.