PROSE / NAMED SPAN
Readable text uses a subset of the real tracks.
Its width is a named placement, not a global document cap. At medium and compact sizes, the same placement values adapt with the shared column count.
LAB / LAYOUT SYSTEM
One geometry, different layout owners.
Every sample below uses the same responsive .layout-grid tracks, but only
the editorial surface reveals them. Other surfaces communicate their structure through
real edges, gutters, table cells, or panels.
EDITORIAL / LOCAL GRID
FIELD NOTE / 006
A grid that earns its visibility.
The first prompt is not the beginning. The workspace already contains decisions, constraints, and artifacts that shape what can happen next.
Here the guides belong to one editorial surface. The article, index rail, and metadata occupy real tracks; opaque reading panels keep lines from competing with the prose.
Remove the article and the grid disappears with it. It is component structure, not page atmosphere.
WIDE / NAMED SPAN
Broad compositions retain deliberate outer tracks.
- Frame
- workspace
- Columns
- 12 / 8 / 4
- Gap
- shared token
FULL / 1→-1
Dense artifacts can fill the workspace.
| Surface | Layout owner | Reading width | Visible structure |
|---|---|---|---|
| Homepage | Page grid | Prose span | 12 / 8 / 4 guides |
| Case study | Page grid | Prose + wide | Page guides |
| Notes | Panel grid | Document pane | Panel separators |
DOCUMENT / PROSE TRACK
The local reading grid belongs to the fluid center pane.
Side panels occupy the surrounding workspace, so centered reading space is functional rather than a global website margin.
WIDE DOCUMENT ARTIFACT pane edge → pane edge