A flat reference of every utility class in the system. Click any class, value, or token to copy it. For the full architecture and live demos see Typography, Color, Spacing, Border, and Layout.
Every chip on this page follows the same convention so the markdown source matches what gets copied:
`.class-name`→ utility class, copies`var(--token-name)`→ CSS variable, copies`#abc123`→ hex colour, copies and renders a swatch
Text Size
Two scales sit side by side. The semantic scale is the default. Reach for for body and only drop to the granular .font-* classes when you need a precise step on the type ramp.
Semantic sizes
Each step has two spellings and they are the same rule — write whichever reads
better. The table below is the scale as the stylesheet actually defines it:
earlier versions of this page named tokens and pixel values that the CSS never
used, and three of the five steps were wrong.
| Class | Token | Value |
|---|---|---|
| · | 14px |
|
| · | 14px |
|
| · | 16px — the body size |
|
| · | 20px |
|
| · | 28px, 24px below 960px |
The --text-size-* tokens are the semantic layer; they resolve to steps on the--font-* ramp and one of them is responsive, which is the reason to go through
them rather than naming a --font-* token directly.
Granular scale
| Class | Token | Value |
|---|---|---|
12px |
||
14px |
||
16px |
||
18px |
||
20px |
||
22px |
||
24px |
||
28px |
||
32px |
||
36px |
||
40px |
||
48px |
||
56px |
||
64px |
||
72px |
Text Color
Semantic intent. Never reach for primitive color tokens directly.
| Class | Token | Description |
|---|---|---|
| Default body text | ||
| Supporting text | ||
| Pure black | ||
| De-emphasised text | ||
| Accent / highlight | ||
| Link color |
Background Color
| Class | Token | Description |
|---|---|---|
| Off-white page background | ||
| Warm white alternate | ||
| Pure white | ||
| Subtle tinted background |
Section Spacing
Macro vertical rhythm. Apply to a <section> to control the space above or below it. Values shrink on mobile.
| Class | Token | Desktop | Mobile |
|---|---|---|---|
32px |
24px |
||
64px |
32px |
||
96px |
56px |
||
160px |
80px |
||
32px |
24px |
||
64px |
32px |
||
96px |
56px |
||
160px |
80px |
Gap
Micro spacing for and , sets the gap between flex or grid children.
| Class | Token | Value |
|---|---|---|
0px |
||
4px |
||
8px |
||
12px |
||
16px |
||
24px |
||
32px |
||
40px |
defaults to (12px) when no gap class is added.
Padding
| Class | Token | Value |
|---|---|---|
| Edge-safe horizontal padding for every screen | ||
8px |
||
12px |
||
16px |
||
24px |
||
32px |
||
40px |
Containers & Max-widths
Containers center their content with auto margins. Max-widths only constrain, no centering.
Containers
| Class | Width | Description |
|---|---|---|
640px |
Narrow centered container | |
1040px |
Default readable width | |
1200px |
Wide centered layouts |
Max-widths
| Class | Width | Description |
|---|---|---|
640px |
Narrow constraint | |
960px |
Medium constraint | |
1200px |
Wide constraint | |
100% |
No constraint |
Layout Primitives
Structural classes that compose the page hierarchy: → → → → → → .
| Class | Behaviour | Description |
|---|---|---|
| flex column, | Default content block, flex column with 12px gap | |
semantic <section> |
Vertical block, no special styling | |
width: fit-content |
Shrink an element to its content width |
Flex & Grid Modifiers
These modify (flex column by default) or (2-column by default).
Flex direction & alignment
| Class | Property | Description |
|---|---|---|
flex-direction: row |
Switch a to horizontal | |
flex-direction: row-reverse |
Reverse horizontal order | |
align-items: flex-start |
Cross-axis start | |
align-items: center |
Cross-axis center | |
align-items: flex-end |
Cross-axis end | |
justify-content: center |
Main-axis center | |
justify-content: flex-end |
Main-axis end |
Grid
| Class | Property | Description |
|---|---|---|
display: grid |
2-column grid by default with | |
grid-template-columns: 1fr 1fr |
2-column grid, explicit (same as the default) | |
grid-template-columns: 1fr 1fr 1fr |
3-column grid | |
grid-template-columns: 1fr 1fr 1fr 1fr |
4-column grid |
Borders
The composable border system. Combine one structural class with width, style, and color modifiers as needed. See Border for the full architecture.
Structural
| Class | Description |
|---|---|
| All four sides | |
| Top only | |
| Bottom only | |
| Left only | |
| Right only |
Width
| Class | Token | Value |
|---|---|---|
1.5px (default) |
||
2px |
||
4px |
Style
| Class | Style |
|---|---|
| solid (default) | |
| dashed | |
| dotted |
Color
| Class | Token | Description |
|---|---|---|
| Strong (default) | ||
| Medium | ||
| Subtle |
Image Aspect Ratios
Lock an image to a fixed ratio. Use on the <img> element directly.
| Class | Ratio | Description |
|---|---|---|
| 1:1 | Square | |
| 3:2 | Standard photo | |
| 4:3 | Classic | |
| 16:9 | Widescreen | |
| 21:9 | Cinematic |
Helpers
| Class | Property | Description |
|---|---|---|
| small uppercase label | Section eyebrows above headings | |
| the form label's family, size, weight and colour | Something that should read as a label but is not a <label> — a heading over a column of links, a caption above a control group. It also clears the margin, tracking and title family a heading would otherwise keep, so it wins when applied to an <h2>. Sets no display, so it does not decide the element's layout. Quieter than , which shouts in uppercase |
|
display: none !important |
Global visibility helper — hides from everyone, including screen readers | |
| clipped to 1px, still in the accessibility tree | Text a screen reader needs and the design does not show: the page heading of a full-space tool, a live region, an instruction the layout already makes obvious. Not interchangeable with |
Use tokens directly
A few things have tokens but no utility classes. Apply the token via var(...) directly in CSS.
| Concern | Tokens |
|---|---|
| Font weight | , , , , , , |
| Line height | , , , , , |
| Letter spacing | , , , |
| Border radius | , , , , , |
| Text alignment | use raw CSS text-align |
Every token name above is still copyable. Click to grab for your stylesheet.