Utilities apply a token to an element without writing CSS. Most modify a single concern — a size, a colour, a gap — so they compose rather than compete, and none of them carries a raw value of its own. A few set a pair that always travels together: the text-size classes set line height alongside font size, and and set a whole small type treatment. Where a class resolves through a token, the token's value is on the Tokens page.
Text size
The two spellings are aliases of one rule, not two scales: and are the same declaration. Use whichever reads better and stay consistent within a page.
| Class | Alias | Resolves to | Value |
|---|---|---|---|
| 28px, stepping to 24px below 960px | |||
| 20px | |||
| 16px — body size | |||
| 14px | |||
| 14px |
.text-size-xl
Where Culture Meets Care
.text-size-l
Where Culture Meets Care
.text-size-m — body
Where Culture Meets Care
.text-size-s
Where Culture Meets Care
.text-size-xs — identical to small today
Where Culture Meets Care
- Do not reach for expecting something smaller than small. Both steps resolve to 14px today, so the two are visually identical; the distinction exists in the token layer, not on screen.
Font size
The text-size classes above are the default. These apply a step of the primitive scale directly, for the cases where the semantic scale has no rung in the right place.
| Class | Value | Class | Value |
|---|---|---|---|
| 12px | 32px | ||
| 14px | 36px | ||
| 16px | 40px | ||
| 18px | 48px | ||
| 20px | 56px | ||
| 22px | 64px | ||
| 24px | 72px | ||
| 28px |
--font-3xs (10px) exists as a token but ships no utility. Two family classes sit alongside these: sets Inter and sets Erode.
- Prefer the semantic scale. keeps following the system if the body size is ever re-stepped; is pinned to 16px whatever happens around it.
Text colour
| Class | Token |
|---|---|
What each token means and its value in both themes are on the Colour page; this table is only the mapping from class to token.
Background
| Class | Token |
|---|---|
Text alignment
· ·
Section spacing
· · · and the matching .bottom-* set the vertical space between bands of a page. The values and the token chain behind them are on the Spacing page.
Gap
Micro spacing inside a block, and the only source of vertical rhythm there — the Spacing page explains why a margin cannot be used instead.
| Class | Value | Class | Value |
|---|---|---|---|
| 0 — but see below | 16px | ||
| 4px | 24px | ||
| 8px | 32px | ||
| 12px — the default | 40px |
- does not work on a . It is the only gap utility without
!important, and sets its own 12px gap later in the stylesheet at equal specificity, soclass="grid gap-none"still renders 12px. On a it behaves as written.
Padding
| Class | Value | Class | Value |
|---|---|---|---|
| 8px | 24px | ||
| 12px | 32px | ||
| 16px | 40px |
sets the horizontal page gutter at 24px on both sides, and is the class that keeps every section's content aligned to the same edge.
Containers and max-widths
through cap width and centre; through cap width and leave the element where it is. releases a constraint set further up. The five widths and what each suits are on the Layout page.
Layout primitives
| Class | What it does |
|---|---|
| A flex column with a 12px gap. The workhorse — almost every stack of content is one | |
| A grid, two columns by default, with a 12px gap | |
| · · | Column count on a grid |
| · | Lays a block out horizontally instead |
Alignment modifiers
· · · set cross-axis alignment; and set main-axis. [data-align="center"] centres a block itself rather than its contents.
Helpers
| Class | What it does |
|---|---|
| The small tracked label above a heading | |
| A form or metadata label | |
| Shrinks an element to its content width | |
| Removes an element visually while leaving it in the accessibility tree — the correct way to label an icon-only control | |
| Removes it from both | |
| Clips overflowing children |
Elsewhere
| Utilities | Documented on |
|---|---|
, .border-* — position, width, style and colour |
Border |
| , and the other aspect ratios | Image |
Rules
- Never mix layout responsibilities. Sections carry macro spacing with
.top-*and.bottom-*, blocks carry micro spacing with.gap-*, and containers carry width. A container that sets its own padding has taken on a job that is not its own. - Never put a margin inside a block. Gap is the single source of spacing there, and a margin adds to it rather than collapsing with it.
- Ignore . It ships as
display: blockand applies no padding at all, despite the name; section spacing comes from.top-*and.bottom-*. - Never write a utility that carries a literal value. If a class needs a value the tokens do not cover, the token scale is missing a step — add the step.