Typography tokens
The type roles a page composes from. Brand · Typography owns the face and the scale; this page owns which role does what job and how many of each a page may carry.
Display roles
Four classes, one shared set of metrics. Only the size token differs, which is why display headings are a single CSS rule and not one per size.
The accented clause
A heading may carry exactly one <span>. It takes --on-ground-accent — yellow on dark, blue on light — so the same markup is correct on every surface with no per-band override.
We handle the hard ones
We handle the hard ones
Supporting roles
North Carolina injury counsel
Practice areas
A supporting sentence at the lead role, set to a 35rem measure so it breaks into two or three lines rather than running the full column.
| Class | Size | Job |
|---|---|---|
.kicker | --text-label | Sits above a hero headline. Uppercase, .14em tracking. |
.section-label | --text-label | Names the band above its heading. Uppercase, .15em tracking, muted role. |
.lead | --lead-hero | The sentence under a hero headline. Capped at 35rem. |
.section-head p | --lead-section | The intro paragraph beside a section heading. |
Measure
Line length is capped by role, not by container. A paragraph that fills a 76rem shell is unreadable no matter how good the type is.
| Role | Cap |
|---|---|
| Hero headline | 40rem |
| Hero lead | 35rem |
| Band body copy | 34rem |
| Section intro | Its grid column — 1.1fr of the section head |
| Documentation prose | 64ch |
Budget per page
Hierarchy is a scarcity system. These are limits, not targets.
| Role | Per page |
|---|---|
.display-poster | At most one, and then no .display-hero |
.display-hero | Exactly one, unless the page opens on a poster |
.section-heading | One per band |
.statement-heading | At most one |
| Accented clause | One per heading |