Typography

Two families

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 — lot/plan, tokens, endpoints. It is not for eyebrows.

Code

font-family: var(--gd-font-sans);  /* Inter */
font-family: var(--gd-font-mono);  /* JetBrains Mono */

--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

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-reading18pxlong-form article prose — pair with --gd-size-reading

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

Aa --gd-text-body13.5pxTHE readable default for INTERFACE prose — an article wants `reading`

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

Long-form prose

The system had containers long before it had this: GdAppShell's widths and GdContainer both get the COLUMN right. Nothing owned what went inside the column, so every long-form page re-typed its own h2 / p / li block — and the copies drifted exactly as copies do.

Where the answers come from

Every answer is derived from the council's own published scheme, and each number links to the exact instrument and provision so you or your certifier can verify it. We do not invent rules.

A list sits at the same step as the prose around it.
Where a rule cannot be faithfully expressed, it is marked not codified.

reading — an article, a guide, a policy page18px over the relaxed leading. Headings read their step from the same size pair as the body, so they cannot drift apart: there is one place to change them. A paragraph directly under a heading is pulled tight to it, because it belongs to it.

Code

<GdAppShell width="reading">
  <GdProse>
    <section>
      <h2>Where the answers come from</h2>
      <p>Every answer is derived from…</p>
    </section>
  </GdProse>
</GdAppShell>

Scheme amendments

Schemes change. GRIDD re-ingests new versions, but there can be a lag, and each report is tied to the version named on it.

compact — a long note inside a panelThe body step, for something a person reads a paragraph of rather than start to finish: release notes, a description that ran long, a note in a side panel. Same relationships, one rung down.

Code

<GdProse size="compact">…</GdProse>

Rules

Pick a step by ROLE, not by size. A card title is --gd-text-h3 whether or not 17px is what you would have guessed.
Set prose in --gd-text-body and controls in --gd-text-ui-sm. 13.5 and 12.5 are different decisions, not rounding.
Use mono only for what a machine asserts — code, hex, endpoints, lot/plan.
Set eyebrows in Inter caps, never mono. An eyebrow is a person's label, not a machine fact.
Never set prose below --gd-text-nano (10px), and never set prose AT it — the floor is for machine facts.
If a label needs to recede, reduce its weight or size — never its contrast.
Use the four weights and nothing between them. There is no 650 or 750.
Give long-form reading --gd-leading-relaxed (1.65) and everything else --gd-leading-normal (1.55).
Give uppercase eyebrows --gd-tracking-eyebrow. Caps need air.

Behavior & Anatomy

Why two families

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.

Mono is reserved for code, hex values and identifiers. It is NOT for eyebrows: mono means "a computer asserts this", and an eyebrow is a person's label for a section.

Why the scale has half-steps

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.

Why the wordmark tracks looser than UI type

GRIDD is set in Inter 600 at --gd-tracking-wordmark (.035em) rather than the tight tracking headings take, because five capitals set tight read as one blocky shape.