Twelve ways a Milo page is composed.
A layout is a decision, not an arrangement. Each composition below has a name, a wireframe, a live example built from the real classes, and the rule for when it is the right one. The page practises its own ladder: statement, one line, then the detail tucked.
One grid. Twelve compositions.
Every page on this site and every product surface is one of these, or two of them stacked. Nothing is composed by hand.
+How the set was chosen
Twelve is the number that covers every page on this site and every screen in 17 without a thirteenth. Six are editorial (01–06, 08), five are operational (07, 09–12). Editorial compositions carry imagery and the serif; operational ones carry rows, numbers and the sans. A surface never mixes more than two, and the second is always below the fold.
The wireframe language: vermilion blocks are stylized imagery, moss blocks are natural imagery, black lines are type, grey lines are hairlines, the grey column is the navigation rail.
Hero + plate
The opening of an editorial page. A five-column statement in the display serif; a seven-column image that bleeds off the right margin and up to the topbar.
A personal operating system for intent.
The statement takes five columns and the image seven. The caption is the only thing that sits under the image.
+Rules
| Use when | The page opens a section of the brand (Manifesto, a campaign, a gallery landing). One image carries the page. |
|---|---|
| Breaks when | The image is natural and busy at the crop edge, or the statement runs past four lines. Two images here become a card grid. |
| Collapses | 1080: one column, image after the statement, no bleed. 720: image 16:10, caption stacks. |
| Classes | .manifesto-hero · .figure.bleed-right · .display-xl |
Statement split
Five columns of serif statement, seven of image, aligned at the baseline. No bleed. The quiet version of 01 for interior sections.
The photograph stays credited.
+Rules
| Use when | A section needs one image and one claim. Interior of editorial pages; project headers with a natural image. |
|---|---|
| Breaks when | The claim becomes a paragraph. Swap to 05 Plate left and put the paragraph in the note. |
| Collapses | 1080: stacks, statement first. |
| Classes | .two-col · .pull · .artwork-caption |
Index
A numbered list on hairlines. No boxes. The composition for tables of contents, hierarchies and any set that has an order.
- 01GOAL◎
- 02PROJECT◇
- 03TASK□
- 01TASK□
- 02RUN▶
- 03STEP–
- 04EXECUTOR⌁
- 05ARTIFACT▣
+Rules
| Use when | Items have an order or a number. Section indexes, hierarchies, the 19-section contents on Manifesto. |
|---|---|
| Breaks when | Items need more than one line of description each — that is a Ladder (07), not an Index. |
| Collapses | Two columns become one at 1080; rows keep 64px height and the 44px target. |
| Classes | .rows · .row · .index |
Plate right
A tall image bleeds off the right margin; the pull quote and caption sit low on the left, dropped below the image's top edge.
Dropped low, so the eye lands on the image first.
+Rules
| Use when | One stylized image should dominate a section. Imagery, Nature, project detail headers with a tall source. |
|---|---|
| Breaks when | Two plates in a row bleed the same side — alternate 04 and 05. A landscape source here leaves a hole; use 06. |
| Collapses | 1080: no bleed, note above image, no drop. |
| Classes | .plate.plate-tall.left · .plate-note.drop · .bleed-right |
Plate left
The mirror. A wide or tall image bleeds off the left margin and the note sits right, dropped. The two plates alternate down a page.
Natural, when the work must be seen.
+Rules
| Use when | A wide source (paintings, panoramas) or the second plate on a page. Art page opener. |
|---|---|
| Breaks when | The note runs past four lines; the drop then overshoots the image bottom. |
| Collapses | 1080: stacks, image first, no bleed. |
| Classes | .plate.plate-wide · .bleed-left · .plate-note.drop |
Full-bleed band
A 21:9 image across both margins with a single line of caption under it. The pause between two dense sections.
+Rules
| Use when | Between two text-heavy sections; as a chapter divider; the only place a natural image may run edge to edge. |
|---|---|
| Breaks when | Text is set over it. Milo never sets type on a photograph. |
| Collapses | 720: 16:10; caption stacks. |
| Classes | .figure.bleed-full · .artwork-caption |
Ladder
Summarized → tucked → revealed → expanded. A statement, one line, and the detail behind a count. The composition this page is built from.
Three files changed.
The recut kept timing; the second title card moved back 2.4 s.
+What changed
- ▣Day4-opener-v2.mp4+2.4 slocal ⌁
- ▣Day4-captions.srtretimedlocal ⌁
- ▣timeline.json1 keylocal ⌁
+Run detail
- ✓Decode founder track0.8 s
- ✓Shift title card 20.1 s
- ✓Encode H.2642m 13s
James MacBook Pro · ffmpeg 7.1 · $0.00
+Rules
| Use when | Always, below any h2. Information appears because it is relevant, not because it exists. The count badge says what is behind the fold. |
|---|---|
| Breaks when | The summary line is a teaser rather than a summary. The line must be enough on its own. More than three levels deep is a page, not a ladder. |
| Collapses | Nothing changes; the target stays 44px. |
| Classes | details.tuck · .summary-line · .tuck-body · .steps |
Catalogue
A grid of works where every sixth item takes two columns. Order stays; the rhythm stops it reading as a card grid.
+Rules
| Use when | Twelve or more works of equal weight. Art, Nature, Screens. |
|---|---|
| Breaks when | Items are actions rather than works — that is an Index. Fewer than six items: use 02 or 05. |
| Collapses | 720: one column, no double item. |
| Classes | .gallery · .gallery > :nth-child(6n+1) · .artwork-caption |
Viewer
Eight columns of image, four of metadata. Original and interpretation compare inside the eight; provenance lives in the four.
+Rules
| Use when | One work is open. Galleries, the artifact pane when the artifact is an image. |
|---|---|
| Breaks when | Metadata outgrows the four columns — tuck it, do not widen. |
| Collapses | 1080: metadata under the compare; 720: compare stacks. |
| Classes | .viewer · .compare · .image-metadata |
Ledger
A row of metrics on a rule, quota bars, then a table with tabular numbers right-aligned. The operational composition for costs, fleet and models.
| Run | Executor | Time | Cost |
|---|---|---|---|
| Day 4 opener recut | James MacBook Pro | 2m 14s | $0.00 |
| FAM proof review | Claude | 41s | $0.36 |
| Euangelion batch 7 | Codex | 6m 02s | $1.48 |
+Rules
| Use when | Numbers are the content. Costs, Fleet, Models, Quotas. |
|---|---|
| Breaks when | A number is shown without its unit or comparison; a bar is coloured Moss to mean "good" (Moss means local). |
| Collapses | Metrics stack at 720; the table scrolls horizontally inside a focusable region. |
| Classes | .metric · .quota · .ledger-table · .tnum |
Conversation
Turns in a prose measure with a mono attribution column; artifacts emerge inline; the composer sits on the strong rule at the bottom.
Recut the Day 4 opener to the founder track. Keep the timing.
On it. The founder track is 2.4 s longer, so the second title card moves back. Nothing else changes.
+Rules
| Use when | The Milo surface and any inline delegation. |
|---|---|
| Breaks when | Turns are put in bubbles. Milo's turns are marked by the vermilion attribution only. |
| Collapses | Attribution moves above the turn at 720. |
| Classes | .turns · .turn.milo · .artifact · .composer |
Transient
A Level 3 surface — voice pill, quick entry, command palette — over a dimmed Level 1. It appears, resolves, disappears; the page beneath does not move.
- ‖Pause current run⌘.
- ▶Resume Euangelion batch 8⌘⇧.
- ◉Ask Milo⌘K
+Rules
| Use when | Voice, Quick Entry, command palette, permission requests. One at a time. |
|---|---|
| Breaks when | The transient carries navigation, or two transients stack. A destructive confirmation is Level 4, with the vermilion edge and a full scrim. |
| Collapses | Palette becomes full-width with 16px gutters at 720; the pill stays top-centre. |
| Classes | .scrim · .voice-pill · .palette · .permission · --z-3 |
The gaps are the design.
Four values carry every vertical distance on this site: 4px baseline, 24px plate gutter, 96px section top, 128px section bottom. Drawn here at true size.
+Spacing scale and where each step is used
| 4 / 8 | inside components: glyph to label, meta lines |
|---|---|
| 12 / 16 | row padding, button padding, field gaps |
| 24 | grid gutter, plate gutter, caption-to-image |
| 32 / 40 | stack-l, summary line to example |
| 48 / 64 | tuck body bottom, hero kicker to statement |
| 80 / 96 | hero bottom, section top, plate top |
| 128 | section bottom, main padding bottom |
| 160 | footer top only |
Source: tokens/spacing.json. The rule of thumb: a gap between sections is at least four times the gap inside one.
Weight on one side. Air on the other.
Three page-scale compositions on the twelve-column grid. The image never sits centred; the type never fills the space it leaves.
Seven and four, with a column of nothing between.
ALBERT BIERSTADT · AMONG THE SIERRA NEVADA, CALIFORNIA · 1868 · SAAM · CC0 · MILO / NATIONAL PARK
Three up, eight down.
NASA · OCEAN SAND, BAHAMAS · LANDSAT 7 · MILO / NOUS
JOHANNES VERMEER · YOUNG WOMAN WITH A WATER PITCHER · CA. 1662 · THE MET · CC0
LEFT NATURAL · RIGHT MILO / ARCHIVE · STAGGERED ONE SECTION-TOP
+Rules for asymmetry
| Weight | The image takes 7, 8 or 4 columns; never 6. Six is symmetry. |
|---|---|
| Air | At least one empty column between image and type on desktop. The empty column is not filled at 1080; it collapses to a vertical gap. |
| Stagger | Two images in a row are offset vertically by one section-top (96px) or one section-bottom (128px). Never by an arbitrary value. |
| Type | The note is the display serif at display-m, no more than three lines. The caption is mono-micro, uppercase, one line per fact. |
| Mix | Across a page the images follow 60 / 30 / 10; within one asymmetric composition pair natural with stylized of the same work when the point is the transformation. |
What collapses, and in which order.
The rail folds first, then the columns, then the bleeds. Type scales with clamp(); nothing is hidden, everything stacks. Live frames below at 390 and 820.
+Collapse table
| Element | ≥ 1440 | 1080 – 1439 | 720 – 1079 | < 720 |
|---|---|---|---|---|
| Margins | 80px | 48px | 32px | 16px |
| Navigation rail | 232px, sticky | 232px, sticky | Index button → full-screen list | same |
| App shell | rail + main (+ inspector) | same | one column; inspector below main | same |
| Hero (01) | 5 / 7, bleed right + up | same | stacked, no bleed | image 16:10 |
| Plates (04 / 05) | bleed, drop | same | stacked, no bleed, no drop | same |
| Two-col / split | 4 / 7 or 5 / 7 | same | one column | same |
| Catalogue (08) | auto-fill ≥ 300px, 6n+1 double | same | same | one column, no double |
| Viewer (09) | 8 / 4 | same | metadata under | compare stacks |
| Ledger (10) | three metrics across | same | same | metrics stack; table scrolls |
| Transient (12) | 520px centred | same | same | full width, 16px gutters |
| Display type | clamp max | fluid | fluid | clamp min (3.5rem xl) |
| Targets | 44px minimum at every width | |||