Typography

Two families, and the line between them

Machine facts are monospaced; human sentences are not. The contrast is the brand voice and it is also functional — it tells you at a glance which parts of a screen a computer is asserting and which parts a person wrote.

A granny flat behind the existing house needs council approval.

L14 RP80432 · #4740DB · GET /v1/parcels/{lotplan}

Foundations — an eyebrow, in Inter caps

Mono is for code, hex values and identifiers. It is NOT for eyebrows: v1 set them in mono and v2 sets them in Inter caps, which is the one typographic reversal between the systems.

--gd-font-sans'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serifeverything a person reads

--gd-font-mono'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospacecode, hex, endpoints, lot/plan — things a machine asserts

The scale

Named by ROLE, not by size. The design uses half-steps on purpose — 13.5 is body and 12.5 is a control label, and those are different decisions — so a generic 4pt scale would flatten distinctions somebody made deliberately.

Aa --gd-text-display40pxthe one display line on a landing or cover

Aa --gd-text-h128pxa document or article title

Aa --gd-text-h226pxa section heading

Aa --gd-text-h317pxa card title, a panel heading, a street address

Aa --gd-text-title15pxa sub-heading inside a card

Aa --gd-text-lead14pxthe standfirst paragraph under a heading

Aa --gd-text-body13.5pxTHE readable default for prose

Aa --gd-text-ui13pxcontrol labels, list-row titles, input values

Aa --gd-text-ui-sm12.5pxbuttons, tabs, dense rows

Aa --gd-text-meta12pxsecondary facts beside a value

Aa --gd-text-caption11.5pxsub-labels and hints

Aa --gd-text-eyebrow11pxthe uppercase section label — Inter caps, never mono

Aa --gd-text-micro10.5pxmono timestamps and table micro-copy

Aa --gd-text-nano10pxthe FLOOR, and machine facts only. Nothing smaller, and no prose at this size

Weight, leading & tracking

Weights

--gd-weight-normal400prose

--gd-weight-medium500a mono identifier, a nav item

--gd-weight-semi600labels, buttons, eyebrows — the workhorse

--gd-weight-bold700headings and card titles. There is no 650 or 750 in v2

Line height

--gd-leading-none1a heading set on one line

--gd-leading-tight1.05display type

--gd-leading-snug1.45dense captions

--gd-leading-normal1.55THE body default

--gd-leading-relaxed1.65long-form reading — docs and articles

--gd-leading-mono1.75code blocks

Tracking

--gd-tracking-display-.03em40px display

--gd-tracking-h1-.028em28px page title

--gd-tracking-h2-.02em26px section heading

--gd-tracking-h3-.015em17px card title

--gd-tracking-tight-.01em15px sub-heading

--gd-tracking-normal0body and UI

--gd-tracking-eyebrow.07emuppercase eyebrows — caps need air

--gd-tracking-wordmark.035emGRIDD in Inter 600. Looser than UI type because five capitals set tight read as one blocky shape