The work.

Drawn at 5x, so the mark in the drawing is the 24px shipped mark multiplied by five and the label is the 11px one. Every rule is stated in u, where u is the cap height of the practice label, 7.7px at the lockup's minimum size, so the rules hold at any scale rather than being pixel measurements that stop being true the moment the mark is resized.

unit (u)

7.7px at default sizeThe cap height of the practice label, not a round number. Deriving the unit from the smallest element means the whole lockup scales from the part that fails first.

clear space

2u on every sideMeasured from the outermost ink, not from a bounding box. Nothing sits inside it, including the sticky header's own hairline.

alignment

centred on the markThe wordmark carries a descender and the practice label does not, so a shared baseline would hang the label off the bottom of the lockup. The label centres on the height of the mark instead, which is the one edge both elements share.

colourway

one mark, two inksThe mark is the practice accent and the wordmark is the near-black. The geometry is the same file every practice uses; only the two inks change, so a reader who has seen one practice recognises the next.

separation

12px, 1.56uOne rung of the spacing scale, not an optical guess. Close enough to read as one lockup, far enough that the mono tracking does not collide with the end of the wordmark.

minimum size

mark at 24px tall, label at --fs-mono-sm24px and 11px. Below this the 0.14em tracking on the label closes up and it stops reading as a separate register, and the counters in the mark begin to fill. If the lockup has to go smaller, the label is dropped rather than shrunk.

what never happens

no outline, no rotation, no stacking, no third inkThere is one horizontal lockup and one reduced form, which is the mark and wordmark without the practice label. A mark with five permitted variants has no permitted variants.

Six surfaces, one set of tokens. Nothing here is drawn or mocked up: each plate renders the class the site ships, at the size it ships at.

lockup

Growth

label, heading, copy

how the work runs

the words come before the pictures

Design that is not carrying an argument is decoration.

controls

start a conversationsee how we work

list row

• Positioning statement with the reasoning
• What you are choosing not to say

ground, rule, marks

the same, on ink

the honest part

what we turn down

A budget split six ways teaches you nothing.

The dark plate is the same three classes as the light one. Nothing was redrawn for it: --ink becomes the ground, the copy token swaps to --on-dark-mut and the accent swaps to --accent-lit, which is the variant that clears AA on this ground. That swap is what makes a system a system rather than two sets of assets.

Same page, same number of blocks, roughly the same height. Nothing was added on the right. What changed is what each block is for.

Six rules. The avoid column is written for this exhibit. The prefer column is not: every line in it is already published on this site, and the source is printed underneath it.