Layout primitives six nouns · everything else is a composition
Six nouns.
Shared page chrome
The header and footer on this page are the shared garden components. The complete layouts retain their source structure.
Six primitives build every page: Sheet, Section, Stack, Cluster, Grid, Rule.
Primitive
Role
Composes on
CSS
Sheet ·
A page or card. The editorial container, with masthead row and bottom rule. The unit of attention.
— (top of the tree)
.card / .sheet
Section
A numbered chapter inside a Sheet. Carries a §-number, title, optional aside.
vertical
section + .sh / .sb
Stack
Children flow top→bottom with one chosen gap from the spacing scale.
vertical
flex-direction: column · gap: $space-N
Cluster
Children flow left→right, wrap when they need to. Tags, chips, button rows.
horizontal · wrap
flex-wrap: wrap · align: baseline
Grid
Two-axis composition. Default is 3fr / 7fr asymmetric — aside · body.
two-axis
grid-template: 3fr 7fr / auto
Rule
A line. The only structural decoration. 1px hair, 1px ink, or 3px ink — never a shadow.
divider
border-top: 1/1/3px
§1 · Sheet · the unit of attention
Sheet · 01 of 01 a card or a page
The page is a sheet of paper.
Top rule, bottom rule, generous margins, mono masthead row. The .card on this very preview is a Sheet. So is a one-pager. So is a slide.
A Sheet is bordered top + bottom, never on the sides. It does not float in space — it is the page, or the page is its frame.
§2 · Section · numbered chapter
§01
Decision under simulation
3 min read
A pricing change from $29 to $49 on the U.S. Pro tier, tested against three months of revealed behavior.
§02
What moved
numbers
Net revenue +3.4% · trial-to-paid −1.7pt · 90-day retention flat. The lift came from existing absorbers, not new buyers.
§03
What we'd do differently
·
Test $39 next, on the same audience. The shape of the demand curve is wrong above $45.
Sections are how a Sheet thinks. Always numbered, always with a hairline above. The §-number is the system's voice; the title is the writer's.
§3 · Stack · vertical, one gap
stack · gap-16 · default body rhythm
01 :: Population U.S. Pro · 30d active
02 :: Horizon Q3 2026
03 :: Outcome net revenue
stack · gap-40 · section rhythm
What we said "raise to $49 → +6%"
What it revealed +3.4% · existing absorb
A Stack picks one gap from the spacing scale and uses it everywhere. Mixing 12 and 18 inside one stack is not a Stack — it's noise pretending to be rhythm.
§4 · Cluster · horizontal, wraps, baseline
Filters · simulation library
FILTER
Pro tier ✕
U.S. only ✕
past 30d ✕
$39–$59 ✕
+ Add filter
Sort by
Recent
Cost
Accuracy
Author
A Cluster holds N items of one kind. It wraps freely. On mobile it stays a Cluster.
§5 · Grid · 3fr / 7fr · the asymmetric default
Aside
The aside is where Redaction lives — pull-quotes, source notes, the writer's voice in italic. A 3-column whisper next to the 7-column statement.
The body column is where the prose runs. It carries the argument. It is wider than the aside on purpose — the aside whispers, the body says.
This is the default grid for almost every editorial composition we ship: one-pagers, deck slides, marketing pages, customer stories. Symmetric grids feel corporate; asymmetric grids feel written.
§5.b · Grid · 1·1·1 · gallery
01 :: tile
02 :: tile
03 :: tile
Two grids are sanctioned: 3fr / 7fr asymmetric (the editorial default), and equal-fraction galleries for tiles, charts, or stats arranged in a row. Anything else is a custom case and earns a comment.
§6 · Rule · the only decoration
The four sanctioned rules
Four lines: 1px hair, 1px ink, 3px ink, dotted. No shadows.
§7 · Spacing scale · clamp() to viewport
space-14pxrow gap inside a chip
space-28pxtight stack
space-312pxlabel → field
space-416pxdefault body rhythm
space-524pxbetween paragraphs
space-632pxsection gap
space-748pxbetween sections
space-864pxchapter break
space-996pxpage margin
space-10128pxhero whitespace
Ten spacing steps, each a clamp(). Nothing off the scale.
§ Compose like this
Every page = a Sheet.
Inside a Sheet = Sections, separated by a 1px ink Rule.
Inside a Section = Stacks, with one gap chosen from the scale.
Inside a Stack, when you need a row of similar things = Cluster.
When you need an aside next to a body = Grid 3fr/7fr.
When the row needs a divider = 1px hair Rule.
§ Banned
box-shadow as a divider
A grid wider than 7 columns
Spacing values not on the scale (e.g. 13px, 22px)
Centered body columns at desktop width
A Section without a §-number
A Stack with mixed gaps inside it
"Hero" / "Bento" / "Pillar" component names — those are compositions, not primitives
Primitives Sheet · Section · Stack · Cluster · Grid · Rule · Grid 3fr / 7fr · Never shadows · gradients