Editorial article
A reading-first page. Motion is limited to orientation and one media moment — everything else stays out of the way.
Sections, in page order
- 01
chrome
Scroll progress ruleOrientation on a long read.
- 02
header
Eyebrow and index labelSection, date, and author as metadata.
- 03
title
Hero statementThe headline, at a step below the studio-page scale.
- 04
The page. Everything else is support.
- 05
media
Full-bleed breakOne or two per article, as paragraph breaks at page scale.
- 06
Keeps pull quotes and asides placed rather than centred.
Build order
- 01
Type scale, then measure, then grid. The article is finished at that point.
- 02
Add the progress rule.
- 03
Add at most one media moment. Resist the rest.
Acceptance checks
- Body measure stays between 55 and 75 characters at every width.
- No animation runs while the reader is stationary in the body text.
- The article is complete and correctly ordered with CSS disabled.
- Reading order matches DOM order with no grid-driven reordering.