Type scale · read from the tokens
Ten steps, one decision each.
Every size on this site comes from this scale, and this table is generated from the same file the stylesheets consume — so it cannot describe a scale the site does not use. Change a theme in the Studio and every row here re-renders with it.
| Token | Use | Family | Value | Specimen |
|---|---|---|---|---|
font.size.label | Mono kickers, ordinals, chips | font.family.utility | 0.7rem | Ag |
font.size.caption | Figure captions, fine print | font.family.utility | 0.8rem | Ag |
font.size.small | Secondary and metadata copy | font.family.body | 0.9rem | Ag |
font.size.body | Reading copy, every card summary | font.family.body | 1rem | Ag |
font.size.lead | Section ledes, emphasised body | font.family.body | clamp(1.05rem, 0.96rem + 0.38vw, 1.25rem) | Ag |
font.size.subhead | Standfirsts, small headings | font.family.body | clamp(1.25rem, 1.06rem + 0.78vw, 1.65rem) | Ag |
font.size.title | Card titles, h3 | font.family.display | clamp(1.6rem, 1.21rem + 1.64vw, 2.5rem) | Ag |
font.size.heading | h2 in a card or aside | font.family.display | clamp(2.25rem, 1.6rem + 2.73vw, 3.75rem) | Ag |
font.size.display | Section headings | font.family.display | clamp(2.75rem, 1.56rem + 4.98vw, 5.5rem) | Ag |
font.size.hero | The page thesis, h1 | font.family.display | clamp(3.25rem, 1.19rem + 8.64vw, 8rem) | Ag |
Responsive method · enforced at build time
Four widths, and a build that rejects the fifth.
Every layout here is authored at the narrowest width first. Wider screens add — a second column, a sticky rail, a portrait that becomes a plate — and nothing below undoes anything above. That is a claim you can check rather than take on faith: a check runs on every build and fails it if a stylesheet branches on a width that is not one of these four, or branches downward with max-width.
| Token | Value | Decision |
|---|---|---|
breakpoint.sm | 36rem 576px | Large phone. Where a two-part caption stops needing its own line. |
breakpoint.md | 48rem 768px | Tablet. Where stacked content earns a second column. |
breakpoint.lg | 60rem 960px | Small laptop. Where a case study can hold an asymmetric two-column spread. |
breakpoint.xl | 72rem 1152px | Desktop. Where a third column or a sticky rail becomes affordable. |
Where the scale deliberately stops
Four numbers cannot describe a component that changes width without the window changing at all. The same figure on a case study is 880px wide on one page and 420px on another at identical viewports; a card in the system grid goes one, two, then four across, so its own width changes fourfold. Those components ask container queries instead, and size themselves from the space they were given rather than from the window. That is the part a breakpoint ladder cannot express, and it is why the scale above is small on purpose.