Spacing and layout

A 4px scale, a 72rem container, one column of text, and three small layout helpers. That is all.

Spacing scale

Token	Value	Used for
`--ag-space-1`	4px	Gaps inside a control
`--ag-space-2`	8px	Label to control, icon to text
`--ag-space-3`	12px	Padding inside controls
`--ag-space-4`	16px	Paragraph spacing, page gutter on phones
`--ag-space-5`	24px	Between form fields
`--ag-space-6`	32px	Between sections, page gutter on desktop
`--ag-space-7`	48px	Above and below a page's main content
`--ag-space-8`	64px	Before the footer

Container and prose

ag-container centres content at up to 72rem with a 16px gutter on phones and 32px on desktop. ag-prose limits running text to 65 characters. Put headings, paragraphs and lists inside it; put tables, forms and cards outside it.

<main class="ag-main ag-container" id="main" tabindex="-1">
  <div class="ag-prose">
    <h1>…</h1>
    <p>…</p>
  </div>
  <table class="ag-table">…</table>
</main>

Left, or in the middle

The text column starts at the left edge of the container, with the space to its right free for a contents list or related links. That is the default because it lines the text up with the logo and the navigation.

For an article, a statement or a campaign page that should sit in the middle of the screen, add ag-prose--centred. It moves the column to the centre. The lines inside it still start at the column's edge. Do not centre the lines themselves with ag-text-center, except for a short heading and one line under it; centred paragraphs are hard to read because every line starts in a different place.

The column in the middle of the page

Why we are publishing our inspection results

Every household should be able to count on clean water and know who to call when it stops. Publishing the results district by district is how you can hold us to that.

Show HTML

<div class="ag-prose ag-prose--centred">
  <h2 class="ag-mt-0">Why we are publishing our inspection results</h2>
  <p class="ag-mb-0">
    Every household should be able to count on clean water and know who to call when it stops. Publishing the results
    district by district is how you can hold us to that.
  </p>
</div>

Layout helpers

Three primitives cover nearly every page. Add more only if you have tried these first.

Stack: vertical rhythm between siblings

First

Second

Third

Show HTML

<div class="ag-stack">
  <div class="ag-inset ag-mb-0"><p>First</p></div>
  <div class="ag-inset ag-mb-0"><p>Second</p></div>
  <div class="ag-inset ag-mb-0"><p>Third</p></div>
</div>

Cluster: items in a row that wrap

One Two Three Four

Show HTML

<div class="ag-cluster">
  <span class="ag-badge">One</span>
  <span class="ag-badge">Two</span>
  <span class="ag-badge">Three</span>
  <span class="ag-badge">Four</span>
</div>

Grid: equal cards that reflow

Card

Show HTML

<div class="ag-grid">
  <div class="ag-inset ag-mb-0"><p>Card</p></div>
  <div class="ag-inset ag-mb-0"><p>Card</p></div>
  <div class="ag-inset ag-mb-0"><p>Card</p></div>
</div>

Touch targets

Every link, button, control and disclosure is at least 48px tall. Links inside running text are exempt, as WCAG allows. The documentation site is tested for this at 375px wide on every pull request.

Breakpoints

Three, in em so they respect the reader's font size: sm 40em (640px), md 48em (768px), lg 64em (1024px). Design for the phone first; the breakpoints only add columns.