@mthanh/vespercli 2.2.0 → 2.3.0

package/assets/claude/packs/frontend/skills/design-taste-frontend/library/sections.json

@@ -0,0 +1,4429 @@
+[
+ {
+  "id": "features-capabilities-at-poster-scale",
+  "role": "features",
+  "name": "Capabilities at poster scale",
+  "shape": "list",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "hero-object",
+   "loud-flat-poster",
+   "borrowed-category",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "No images. The heading, two to four words, is the first line of the list itself, set at the same size as the items but in the soft ink, so no separate title sits above. Five to eight capability names follow, one per line, at clamp(40px, 5.2vw, 84px), medium to heavy weight, leading 1.0, tight tracking, flush left on the page margin across columns 1–8 of 12. Each name's one-sentence description is set at 16–18px in columns 9–12, its first baseline aligned with the name's baseline (CSS grid, align-items: first baseline). Rows are separated by 0.35em of space and nothing else. On hover one row keeps full ink while the others fall to 35% opacity. Leave 18–22vh of empty ground above and below; nothing else shares the section.",
+  "mobile": "Names drop to 11vw and stay one per line; a name that will not fit breaks onto a second line with a hanging indent. Each description sits directly under its name at 16px, indented one margin width, with 28px before the next name. The soft-ink heading line stays as the first row. All rows at full ink.",
+  "seenIn": [
+   "aww-cominvi",
+   "aww-cerebrium",
+   "opl-specia1ne"
+  ]
+ },
+ {
+  "id": "features-pinned-heading-passing-rows",
+  "role": "features",
+  "name": "Pinned heading, passing rows",
+  "shape": "pinned",
+  "tags": [
+   "colour-field",
+   "type-led"
+  ],
+  "directions": [
+   "pinned-poster",
+   "loud-flat-poster",
+   "colour-chapters",
+   "split-stage",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "One flat saturated field, full-bleed, as tall as its content. Columns 1–5: the heading, two or three words, at clamp(56px, 6.6vw, 104px) in the heaviest weight, position: sticky; top: 32px, so it holds while the right side travels. Columns 7–12: four to six capability blocks stacked with 120px between them. Each block is a title at 28px bold, then a two-part row: a portrait photograph at 3:4, 180–220px wide with square corners, and beside it, top-aligned, a plain list of four to six short lines at 18px with 14px between lines. Photographs alternate between the left and the right of their list, so the column does not read as a ladder. One ink colour, chosen for contrast on the field. The heading releases when the bottom of the last block reaches it.",
+  "mobile": "The heading becomes a sticky bar at the top of the section: one line at 9vw on the field colour with 12px padding, holding while blocks pass under it. Each block stacks its title, a full-width 4:3 photograph, then the list at 17px. 72px between blocks.",
+  "seenIn": [
+   "opl-protip-marketing",
+   "aww-cerebrium",
+   "aww-sharplink"
+  ]
+ },
+ {
+  "id": "features-one-scene-stepping-statements",
+  "role": "features",
+  "name": "One scene, stepping statements",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led"
+  ],
+  "directions": [
+   "place-carries-it",
+   "pinned-poster",
+   "dark-room",
+   "hero-object",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper 350–450vh tall holds a sticky full-bleed photograph (100vw by 100svh) with a calm, symmetrical subject and a clear upper third; a neutral dark scrim covers only that upper third. At top centre, five or six short statements of two to five words are stacked at 18–20px with 10px between them; the first of them is the section's heading. One statement is at full white and the rest at 45% opacity; the active line steps down the stack as the reader scrolls (IntersectionObserver on invisible 70vh markers). For each statement, two small photographs with square corners, 160–240px wide and of different ratios, fade in left and right of the centre line at different heights, then leave when the next pair arrives. No other text. A low-key image on a deep ground works equally well.",
+  "mobile": "The photograph stays sticky at 100svh, cropped to its centre. The statement stack moves to the bottom third over a scrim, at 17px, left-aligned on the margin. Each statement brings one small photograph only, 44vw wide, placed in the top-right corner with a 16px margin.",
+  "seenIn": [
+   "aww-seasats",
+   "opl-eagles-nest"
+  ]
+ },
+ {
+  "id": "features-stacking-colour-sheets",
+  "role": "features",
+  "name": "Stacking colour sheets",
+  "shape": "stack",
+  "tags": [
+   "colour-field",
+   "poster"
+  ],
+  "directions": [
+   "colour-chapters",
+   "page-is-the-object",
+   "pinned-poster",
+   "loud-flat-poster",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Three to five capabilities, each a full-width flat colour sheet about 86svh tall with only its top corners rounded at 28px. Every sheet is position: sticky, with top offsets rising by 72px from one sheet to the next, so each new sheet slides up over the last and leaves the previous sheet's title band showing, like tabbed folders in a drawer. Inside a sheet: the capability name top-left at clamp(28px, 3vw, 44px), sitting within that 72px band; a paragraph of up to 40ch at 18px bottom-left; and in columns 7–12 one photograph filling the sheet from below the band to the bottom edge, square corners, no inset. Sheet colours follow the palette in a fixed order, with ink chosen per sheet. The heading, two to four words at clamp(40px, 5vw, 80px), sits on the ground above the stack with 48px beneath and scrolls away normally.",
+  "mobile": "Sheets stay sticky but the offset shrinks to 52px and the name drops to 22px so it fits the visible band. Inside each sheet the photograph comes first at 4:3 and full width, then the paragraph at 17px with 20px padding. Sheets are as tall as their content, 70svh at least.",
+  "seenIn": [
+   "aww-hilden-kaira",
+   "opl-nia-creative",
+   "opl-april-leihuanani-evangelista",
+   "aww-mosbys-files"
+  ]
+ },
+ {
+  "id": "features-mosaic-of-unlike-tiles",
+  "role": "features",
+  "name": "Mosaic of unlike tiles",
+  "shape": "mosaic",
+  "tags": [
+   "dense",
+   "colour-field"
+  ],
+  "directions": [
+   "dense-tiles",
+   "editorial-report",
+   "colour-chapters",
+   "specimen-catalogue",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "A 12-column grid with 8px gaps and rows of 96px, filled with no empty cells and no outlines. Six to eight filled tiles in four sizes only: 6×5, 6×3, 3×3 and 3×2 (columns × rows). The rule that keeps it from being a card grid: no two neighbouring tiles hold the same kind of thing. One tile is the heading alone, two to four words at 4vw, top-left. One is a photograph covering its tile. One is a single figure at 6vw with a caption. One is a short list of four lines at 20px. The others are a single sentence each at 28–32px. Text sits top-left with 24px padding; tiles holding one sentence leave their lower half empty. Tile fills: the ground one tone darker, two palette colours, and photographs. One corner radius everywhere, either 0 or 8px.",
+  "mobile": "Two columns with 6px gaps. The heading tile and the photograph tile span both columns; sentence tiles span both at their natural height; the figure and list tiles sit side by side as a pair of squares. Order: heading, photograph, pair, sentence, sentence.",
+  "seenIn": [
+   "opl-sand-studio",
+   "opl-builders-table",
+   "aww-cominvi",
+   "opl-uglycash"
+  ]
+ },
+ {
+  "id": "features-statement-cell-dark-rows",
+  "role": "features",
+  "name": "Statement cell, dark rows",
+  "shape": "split",
+  "tags": [
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "dense-tiles",
+   "editorial-report",
+   "type-only-statement",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Two halves butted together, each 50vw wide and at least 90svh tall, with no gap. Left half, in a pale tone: the heading in three short lines at clamp(36px, 4.2vw, 68px), its middle line pushed flush right while the first and third stay flush left (text-align set per line), so the block zigzags inside the cell. A two-sentence paragraph of 30ch sits at the bottom-left and the single action at the bottom-right on the same baseline. Right half, in the darkest tone: four or five rows of equal height filling it, told apart by alternating two near-black tones, not by lines. Each row is a three-part grid: a title at 28px (5 parts), a short paragraph at 16px (4 parts) and a plain list of three terms at 15px (3 parts), all top-aligned with 28px padding. No images anywhere in the section.",
+  "mobile": "The halves stack. The light cell comes first at 70svh with the zigzag heading at 10vw and the paragraph at its foot. The dark rows follow at full width; each row stacks its title and paragraph, and its three terms run inline as one sentence separated by commas. Rows keep the alternating tones.",
+  "seenIn": [
+   "aww-aspen-search"
+  ]
+ },
+ {
+  "id": "features-staggered-fragment-cells",
+  "role": "features",
+  "name": "Staggered fragment cells",
+  "shape": "grid",
+  "tags": [
+   "ui-led",
+   "dense"
+  ],
+  "directions": [
+   "product-performs",
+   "dense-tiles",
+   "quiet-instrument"
+  ],
+  "needs": [
+   "product-ui"
+  ],
+  "blueprint": "A three-column grid of six filled cells with 8px gaps, each cell 420–460px tall and filled one tone off the ground, no outlines. Every cell has two parts: a text part (a title at 17px medium and three lines at 15px in the soft ink, 24px padding) and a real fragment of the interface at true size (a control, a menu, a table slice, a swatch strip) docked flush against the opposite edge of the cell and cropped by it. The stagger is the idea: across the first row cells run text-top, fragment-top, text-top; the second row runs the reverse, so fragments form a checkerboard. Fragments differ in shape and size on purpose. The heading, two to four words at 32–40px, sits left-aligned above the grid with 56px beneath it and no supporting line.",
+  "mobile": "One column of cells at their natural height with 6px gaps. Every cell runs text first, fragment second, but fragments alternate between docking to the left edge and the right edge, and they are allowed to run off the side of the cell at true size instead of shrinking.",
+  "seenIn": [
+   "opl-dabbit",
+   "opl-woblo"
+  ]
+ },
+ {
+  "id": "features-small-proof-beside-text",
+  "role": "features",
+  "name": "Small proof beside text",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "ui-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "split-stage",
+   "name-as-monument",
+   "contact-sheet"
+  ],
+  "needs": [],
+  "blueprint": "One narrow module repeated four to six times down the page, never alternating sides. Each module is 640px wide at most and starts on the page's text margin (at about 22% of the viewport on an understated page). Left part: a flat panel 360px wide and 120 to 200px tall, one tone off the ground, radius 8px, holding one small exact demonstration: a cropped interface fragment at true size, or a tightly cropped photograph covering the panel. Right part, 20px away and top-aligned: a heading of one or two lines at 18px medium and two short paragraphs at 15px in the soft ink, in a column 250px wide. Panel heights vary with their content; text always hangs from the panel's top edge. 96–120px of empty ground between modules. The section heading is 24–28px, on the same left edge, 64px above the first module. In a column under 600px the text moves beneath its panel.",
+  "mobile": "Each module stacks: the panel at full width and natural height, then heading and paragraphs 16px below on the same left edge, at 17px and 15px. 64px between modules. Panels keep their true-size contents and crop from the right instead of scaling down.",
+  "seenIn": [
+   "opl-rows"
+  ]
+ },
+ {
+  "id": "features-comparison-set-as-text",
+  "role": "features",
+  "name": "Comparison set as text",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "quiet"
+  ],
+  "directions": [
+   "type-only-statement",
+   "editorial-report",
+   "product-performs",
+   "quiet-instrument",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "A comparison table with no lines and no tick marks. A CSS grid: capability names in columns 1–5 of 12 at 22–24px medium, then three answer columns of equal width (plans, methods, or this against the usual way). Every cell answers in words at 17px: 'Yes, unlimited', 'Up to five', 'Not yet', never a symbol. Seven to ten rows, each 64–72px tall, with every other row on a ground one tone darker so the eye tracks across; rows touch. The column that matters is one filled block in the accent or ink colour running the full height of the table behind its cells and rising 24px above the first row, with its text reversed. Column names sit in the top row at 17px bold. The heading, two to four words at 40–48px, hangs top-left above column 1 with 48px beneath.",
+  "mobile": "The table turns on its side: one block per capability. The name at 20px bold, then three lines beneath, each giving a column name and its answer at 16px; the featured column's line is set on the filled colour at full width. Blocks alternate the two ground tones.",
+  "seenIn": [
+   "aww-pp-neue-montreal"
+  ]
+ },
+ {
+  "id": "features-one-size-name-columns",
+  "role": "features",
+  "name": "One-size name columns",
+  "shape": "index",
+  "tags": [
+   "quiet",
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "contact-sheet",
+   "quiet-instrument",
+   "name-as-monument",
+   "dark-room",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "Pure text at one size. Three columns start on columns 1, 4 and 7 of the 12-column grid, leaving columns 10–12 empty on purpose. Each column opens with a group name in full ink and continues with a tight stack of six to ten capability names in the soft ink, all at 16–17px, regular weight, line-height 1.25, no bullets and no symbols; one blank line separates group name from stack. Hovering a name brings it to full ink and shows a one-line description in a fixed spot: the top of the empty columns 10–12, at the same size. The heading is no larger than 28px; two or three words, alone on column 1, 96px above the columns. Give the section 20vh of empty ground above and below, so the smallness reads as decided. Works on light or deep grounds.",
+  "mobile": "Columns stack with 40px between groups; text rises to 18px with line-height 1.4 for touch. Group names stay in full ink. Hover descriptions are dropped; each group ends instead with one sentence in the soft ink that sums it up. The heading is 24px, 48px above.",
+  "seenIn": [
+   "aww-revelatio-studio",
+   "aww-pp-neue-montreal",
+   "aww-lama-lama-2"
+  ]
+ },
+ {
+  "id": "features-specimens-on-colour-tiles",
+  "role": "features",
+  "name": "Specimens on colour tiles",
+  "shape": "grid",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "specimen-catalogue",
+   "hero-object",
+   "one-motif",
+   "colour-chapters",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Each capability is represented by one object photographed alone and shown on a flat colour tile. Columns 1–3 hold the heading (two to four words at 40–52px), top-aligned, with a 30ch sentence beneath and nothing else down the rest of that column. Columns 4–12 hold a grid of five or six tiles in two rows with 10px gaps: tiles are 4:5 except one, which is double width at 8:5 and placed second in the first row. Tile colours rotate through three palette fields. Each photograph is centred at about 70% of its tile's height; on light tiles use mix-blend-mode: multiply so a white studio background disappears. Under each tile, outside it and aligned to its left edge: the capability name at 20px medium and one fact at 16px in the soft ink. No text on the tiles and no hover lift.",
+  "mobile": "The heading and its sentence sit on top at full width. Tiles become a two-column grid with 8px gaps; the double tile spans both columns at 8:5 and comes first. Names shrink to 17px and facts to 15px, still under each tile.",
+  "seenIn": [
+   "aww-noho",
+   "aww-coffeetech-r",
+   "opl-when-you-wish-upon-a-starboy"
+  ]
+ },
+ {
+  "id": "features-statements-on-colour-fields",
+  "role": "features",
+  "name": "Statements on colour fields",
+  "shape": "statement",
+  "tags": [
+   "colour-field",
+   "poster",
+   "type-led"
+  ],
+  "directions": [
+   "colour-chapters",
+   "loud-flat-poster",
+   "type-only-statement",
+   "sentence-as-layout",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Three or four full-bleed flat colour fields, each 72–80svh tall, butted together with no gap. Each field holds one benefit and is almost empty. The benefit is a phrase of two to four words at clamp(56px, 9vw, 150px), heavy, leading 0.9, on two lines at most, hugging the bottom-left corner with 28px margins. Its explanation is three lines at 17–18px, 30ch wide, placed near the top at column 8, so the eye travels the diagonal from small text to big phrase. On alternate fields the arrangement mirrors: phrase bottom-right and right-aligned, paragraph top-left at column 2. Text on each field is ink or paper, whichever contrasts more. There is no separate section heading: the first field's phrase is the heading. Nothing else appears on the fields: no images, shapes or buttons.",
+  "mobile": "Fields are 64svh tall. The paragraph sits top-left at 16px across 80% of the width; the phrase sits bottom-left at 13vw on two lines. Mirroring is dropped; alternate fields right-align the paragraph only, keeping the phrase on the left margin.",
+  "seenIn": [
+   "opl-anidachi",
+   "aww-px-push"
+  ]
+ },
+ {
+  "id": "features-rows-with-margin-photographs",
+  "role": "features",
+  "name": "Rows with margin photographs",
+  "shape": "list",
+  "tags": [
+   "type-led",
+   "photo-led"
+  ],
+  "directions": [
+   "editorial-report",
+   "uneven-photographs",
+   "place-carries-it",
+   "sentence-as-layout",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "Everything hangs from one vertical axis at column 5, about 35% of the width. First the heading: a statement of up to five words at clamp(40px, 5vw, 80px) starting on the axis, vertically centred in an otherwise empty 70svh of ground. Then four or five benefit rows, each starting on the same axis: a title at clamp(28px, 3vw, 48px) and under it a paragraph of 34ch at 17px. Columns 1–4 stay empty. At the right margin each row carries one photograph, top-aligned with its title and deliberately unequal: 240px wide at 4:5 in one row, 320px at 3:2 in the next, 180px square after that. Rows are separated by 96–120px of space, not lines. On a saturated field, set all type in one pale ink and leave the photographs ungraded.",
+  "mobile": "The axis collapses to the left margin. The statement sits at 9vw in 50svh of empty ground. Each row stacks its title at 26px, the paragraph, then its photograph at alternating widths: 100%, 70% flush right, 55% flush left. 64px between rows.",
+  "seenIn": [
+   "aww-px-push"
+  ]
+ },
+ {
+  "id": "features-paragraph-with-picture-words",
+  "role": "features",
+  "name": "Paragraph with picture words",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "one-motif",
+   "product-performs",
+   "editorial-report",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "One paragraph does the work of a feature grid. Three or four sentences, 35–50 words in total, set at clamp(30px, 3.6vw, 60px), leading 1.18, medium weight, across columns 1–11, left-aligned. Each sentence names one capability, and directly after that capability's key noun sits an inline slot: an inline-block frame 1em tall and 1.9em wide, radius 0.18em, dropped 0.12em below the baseline, holding a tight photograph crop (object-fit: cover) or a real interface control at readable size. Four slots at most, never two on one line. The nouns keep the weight and colour of the rest; the slots are the only emphasis. Mark it up as a paragraph and give the section a visually hidden heading of two or three words; nothing visible sits above. 72px lower, starting at column 7, one supporting sentence at 18px and the action.",
+  "mobile": "The paragraph drops to 7vw with leading 1.22 and fills the width. Slots stay inline at 1em tall but narrow to 1.5em wide. If a slot lands alone at the start of a line, let it; do not shrink the type. The supporting sentence and the action follow at full width.",
+  "seenIn": [
+   "aww-monolog",
+   "opl-uncle-rudy",
+   "aww-cominvi",
+   "opl-midnight-2"
+  ]
+ },
+ {
+  "id": "features-capabilities-as-a-menu",
+  "role": "features",
+  "name": "Capabilities as a menu",
+  "shape": "table",
+  "tags": [
+   "object-led",
+   "type-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "split-stage",
+   "borrowed-category",
+   "type-only-statement",
+   "quiet-instrument"
+  ],
+  "needs": [],
+  "blueprint": "The capabilities are set as a printed menu or price list. One paper-coloured sheet, 520–600px wide and taller than it is wide, sits on a contrasting flat ground, centred or starting at column 2; its top and bottom edges are cut into shallow scallops or a zigzag with clip-path, its sides straight. On it, centred at the top, the heading: two or three words at 44–56px, then 40px of space. Below, items in two or three groups; each group opens with its name at 20px bold. Each item is a row: the name at 19px on the left, a short value on the right (a price, a time, a quantity, 'included'), and between them a leader of round 4px dots (border-bottom: 4px dotted, sitting on the baseline). A description at 15px in the soft ink sits under the name, at most 34ch. 18px between items, 44px between groups.",
+  "mobile": "The sheet fills the width minus 12px margins and keeps its cut top and bottom edges. Names stay left and values right on one line with the dot leader between; descriptions wrap beneath at 15px. Group names drop to 18px. Padding inside the sheet is 20px.",
+  "seenIn": [
+   "opl-the-content-architecture",
+   "aww-pensatori-irrazionali"
+  ]
+ },
+ {
+  "id": "features-shape-marked-small-points",
+  "role": "features",
+  "name": "Shape-marked small points",
+  "shape": "split",
+  "tags": [
+   "object-led",
+   "quiet"
+  ],
+  "directions": [
+   "one-motif",
+   "hero-object",
+   "product-performs",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "For the many minor points that do not deserve a row each. Columns 1–5: one photograph inside a single large shape taken from the subject's own geometry (a circle, an arch, a chamfered block), made with clip-path or border-radius, about 78svh tall and pushed 12% past the section's left edge so the viewport crops it. Columns 7–12: the heading, two to four words at 40–48px, then 56px lower a grid of eight to twelve points in three columns with 40px column gaps and 44px row gaps, no cells and no fills. Each point is a title at 17px medium preceded by the same shape drawn at cap height (0.7em, flat fill, inline SVG or a styled span), then two lines at 15px in the soft ink. The small shapes take a different palette colour per column, which is the only colour on the right side.",
+  "mobile": "The shaped photograph comes first, 82vw wide, cropped by the left edge and no taller than 60svh. The heading follows at 30px. Points become one column with 28px between them; the small shape hangs in the margin to the left of each title, so titles and text share one edge.",
+  "seenIn": [
+   "opl-dabbit",
+   "aww-sstr-friction-reduction"
+  ]
+ },
+ {
+  "id": "showcase-two-giant-words-compared",
+  "role": "showcase",
+  "name": "Two giant words compared",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "editorial-report",
+   "loud-flat-poster",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "No photographs: the thing shown is a pair of words, characters or figures that make the point by comparison (before and after, input and output, ours and the usual). At the top of the section, on one row: the heading, two to four words at 28–36px, at the left margin, and a paragraph of up to 60 words at 17px starting at column 7. Then 12vh of space. Below, two specimens side by side, one starting on column 1 and one on column 7, each set at clamp(180px, 34vw, 520px) with leading 0.8, so each fills about half the viewport's width. The section has a fixed height and overflow: hidden, so its bottom edge cuts both specimens at roughly 60% of their height. One short caption at 16px sits above the top-left of each specimen, naming it. Both specimens share one ink; the difference is in the letterforms or values, not in colour.",
+  "mobile": "Heading first, then the paragraph, at full width. The two specimens stack, each at 62vw type size in its own 38svh box with overflow hidden so the lower part is cut. Captions sit above each box at 15px. The second box takes the inverse colours of the first.",
+  "seenIn": [
+   "aww-pp-neue-montreal"
+  ]
+ },
+ {
+  "id": "showcase-two-objects-two-fields",
+  "role": "showcase",
+  "name": "Two objects, two fields",
+  "shape": "split",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "specimen-catalogue",
+   "hero-object",
+   "colour-chapters",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Two panels side by side, each 50vw wide and 92svh tall, in two different flat tones from the palette, meeting on a clean vertical edge with no gap. Each panel is dominated by one cut-out object photograph scaled to 130–150% of the panel's width and positioned so the panel's top edge crops it: the reader sees the lower two-thirds of the object, very close. On light panels use mix-blend-mode: multiply to lose a white studio background. Along the bottom of each panel, 28px in from the edges, one row: the name at 20px medium and a price or fact at 17px on the left; on the right, two small rectangular actions, one filled with ink and one with paper. Nothing sits in the middle of a panel. The heading, two to four words at 32–40px, is set at the top-left of the first panel only, in the empty corner beside the object.",
+  "mobile": "Panels stack, each 78svh tall, the object scaled to 150% of the width and cut by the top and right edges. The bottom row becomes two lines: name and fact, then the two actions side by side at full width. The heading sits top-left on the first panel at 26px.",
+  "seenIn": [
+   "aww-noho"
+  ]
+ },
+ {
+  "id": "showcase-object-in-front-of-type",
+  "role": "showcase",
+  "name": "Object in front of type",
+  "shape": "statement",
+  "tags": [
+   "object-led",
+   "poster"
+  ],
+  "directions": [
+   "hero-object",
+   "borrowed-category",
+   "loud-flat-poster",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "Type and object share one space instead of sitting side by side. Three or four lines of display type, one or two words each, are stacked flush left at clamp(72px, 9vw, 150px) with leading 0.88, starting on the left margin and allowed to leave the right edge (white-space: nowrap; overflow: hidden on the section). The lines step through tones of one ink: one at 45%, one at full strength, the rest at 18%. The object photograph, a cut-out or a studio shot blended with multiply, is absolutely positioned over the upper right of the stack at 40–46vw wide, rotated no more than 6 degrees and above the type in the stacking order, so it hides parts of three or four letters. Under the stack, in columns 8–12, a two-paragraph block at 20px gives the facts. The full-strength line is the heading; nothing sits above it.",
+  "mobile": "Type drops to 15vw and still runs off the right edge. The object sits at 78vw wide, overlapping the last two lines from below instead of from the right, and is cropped by the right edge. The facts block follows at full width and 17px.",
+  "seenIn": [
+   "aww-the-watch",
+   "opl-aevion",
+   "aww-coffeetech-r"
+  ]
+ },
+ {
+  "id": "showcase-band-of-unequal-panels",
+  "role": "showcase",
+  "name": "Band of unequal panels",
+  "shape": "strip",
+  "tags": [
+   "photo-led"
+  ],
+  "directions": [
+   "place-carries-it",
+   "uneven-photographs",
+   "name-as-monument",
+   "editorial-report",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A modest heading, then one wide band of pictures. The heading, two to four words at 36–44px, starts at column 3, left of centre, with 64px beneath it. The band spans the full viewport width edge to edge and is 68svh tall: four photographs standing side by side with no gaps and deliberately unequal widths, a flex row with flex-grow values of 5, 2, 3 and 2. Each panel is cropped with object-fit: cover to a tall slice, so the band reads as one folded view. The first panel carries a two-line title at 28px in paper colour at its top-left, 24px in, over a neutral scrim that covers only that corner. Hovering a panel raises its flex-grow to 6 over 500ms while the others give way; without hover the widths simply stay. One caption line at 16px sits under the band at the left margin.",
+  "mobile": "The heading sits on the margin at 28px. The band becomes a two-by-two block with no gaps, 84svh tall in total: the first row split 64/36 and the second 36/64, so the slices stay unequal. The title stays on the first panel. No hover behaviour.",
+  "seenIn": [
+   "aww-white-desert",
+   "aww-tengile-malamala-collection"
+  ]
+ },
+ {
+  "id": "showcase-close-up-with-column-card",
+  "role": "showcase",
+  "name": "Close-up with column card",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "object-led"
+  ],
+  "directions": [
+   "hero-object",
+   "place-carries-it",
+   "dark-room",
+   "borrowed-category",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "A full-bleed close-up photograph, 100vw by 100svh, with nothing over most of it. A four-column grid lies on top. One solid card in the ink colour, exactly one grid column wide (about 22vw) and 52svh tall, sits in the second column, vertically centred. Inside it, centred: the item's name at 30–36px, a variant line at 17px, the price or key fact at 17px, a small 3:2 photograph of the whole object (the card shows the whole, the background shows the detail), and at the foot a square-cornered action filling the card's width. The card is opaque, radius 0–6px, with no blur. When the section presents two or three items, each gets its own full-bleed frame and its card moves one column to the right each time, so position carries the sequence. The first card's name is the section heading.",
+  "mobile": "The photograph fills 100svh, cropped to its most detailed area. The card becomes a full-width block docked to the bottom, 46svh tall, left-aligned inside with 20px padding; the small whole-object photograph sits to the right of the name at 96px wide.",
+  "seenIn": [
+   "aww-longbow"
+  ]
+ },
+ {
+  "id": "showcase-live-demo-with-controls",
+  "role": "showcase",
+  "name": "Live demo with controls",
+  "shape": "split",
+  "tags": [
+   "ui-led",
+   "quiet"
+  ],
+  "directions": [
+   "product-performs",
+   "quiet-instrument",
+   "dense-tiles"
+  ],
+  "needs": [
+   "product-ui"
+  ],
+  "blueprint": "One filled panel, 680–760px wide and about 640px tall, radius 12px, in a tone clearly darker or lighter than the ground, placed on the text column's left edge or centred, with at least 15vh of empty ground above and below. The panel is split 62/38 into two flat areas that differ by one tone. Left area: the product doing its job on real content at true size. Right area: a narrow column of working controls, six to nine stacked rows 44px tall, each with a name at 14px on the left and a slider, toggle or value on the right; changing one changes the demonstration at once. A text link sits in the panel's bottom-left corner. The heading, two to four words at 24–32px, sits above the panel on its left edge with one sentence at 16px; under the panel, one line of start instruction.",
+  "mobile": "The panel fills the width. The demonstration takes the top at 4:3; the controls follow beneath as full-width rows 52px tall, only the four most telling ones, with a text link that reveals the rest. Heading and sentence sit above at 24px and 16px.",
+  "seenIn": [
+   "opl-dialkit",
+   "opl-textmode-overlay"
+  ]
+ },
+ {
+  "id": "showcase-one-frame-three-distances",
+  "role": "showcase",
+  "name": "One frame, three distances",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "pinned-poster",
+   "hero-object",
+   "dark-room",
+   "sentence-as-layout",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper 300vh tall holds a sticky stage of 100svh. On the stage one frame is centred: 30vw wide at 4:5, square corners, overflow hidden. Inside it the same photograph is shown at three distances as the reader scrolls: the whole subject, then scaled to 180% toward one detail, then to 320% on a second detail (transform: scale with a transform-origin per stage, 700ms ease, switched by IntersectionObserver on three invisible markers). The sentence is delivered in halves: its first two or three words sit above the frame at clamp(56px, 8vw, 130px), centred; the last words arrive below the frame at the second stage, overlapping the frame's bottom edge by 0.3em. At the third stage one caption of 28ch at 17px appears to the right of the frame, top-aligned. The two halves together are the heading and stay within two lines.",
+  "mobile": "The frame grows to 70vw at 4:5 and stays sticky at centre. The first half of the sentence sits above it at 13vw, the second half below it at the same size. The third-stage caption appears under the sentence at 16px, centred.",
+  "seenIn": [
+   "aww-vero-new-york",
+   "aww-illoca",
+   "opl-screentune"
+  ]
+ },
+ {
+  "id": "showcase-one-image-across-tiles",
+  "role": "showcase",
+  "name": "One image across tiles",
+  "shape": "mosaic",
+  "tags": [
+   "photo-led",
+   "dense"
+  ],
+  "directions": [
+   "dense-tiles",
+   "contact-sheet",
+   "editorial-report",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "One photograph is cut across a board of tiles. A grid of six columns and four rows with 8px gaps spans the full width between 12px margins; every tile is square (aspect-ratio: 1). Each tile shows its own piece of the same image: set the photograph as every tile's background at background-size: 600% 400% and step background-position by column and row, so the picture reads whole through the gaps. Five of the twenty-four tiles are swapped for flat colour tiles from the palette, never two adjacent: one holds the heading (two to four words at 2.6vw, top-left, 16px padding), three hold one fact each at 18px, one holds the action. On hover a tile's piece scales to 108% inside its own clip. Choose a photograph with one clear subject, so the board is legible at a glance.",
+  "mobile": "Three columns by six rows with 6px gaps, the photograph re-cut at background-size 300% 600% from a portrait crop. Four colour tiles only; the heading tile spans two columns in the top row with the heading at 6vw. Facts drop to 15px.",
+  "seenIn": [
+   "aww-produx-design",
+   "aww-ai-in-design-report-2026"
+  ]
+ },
+ {
+  "id": "showcase-frame-run-one-lifted",
+  "role": "showcase",
+  "name": "Frame run, one lifted",
+  "shape": "strip",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "contact-sheet",
+   "uneven-photographs",
+   "specimen-catalogue",
+   "quiet-instrument"
+  ],
+  "needs": [],
+  "blueprint": "Columns 1–3 are a nearly empty column: the heading (two to four words at 24–28px) at the top, a link under it, and one or two short notes at 15px much further down, each level with the frame it describes. Columns 4–12 hold a run of six to eight frames of the same subject at one fixed height of 30vh, with natural widths and 6px gaps: the whole view, a tight crop of the same thing, a detail, the reverse side. The run is allowed to leave the right edge. One frame is lifted out of the row: shown at 2.2 times the row height with its bottom aligned to the row's bottom (flex row, align-items: end), so it stands above the others. Under each frame, at 15px: a name on the left and a single fact on the right. Square corners, no captions on the images.",
+  "mobile": "The heading and link sit on top. The lifted frame comes first at full width. The rest of the run scrolls sideways beneath it at a fixed height of 34vw with 4px gaps and scroll-snap, bleeding off the right edge. Notes are listed under the run at 15px.",
+  "seenIn": [
+   "aww-serotoninn",
+   "aww-butter",
+   "aww-no-art"
+  ]
+ },
+ {
+  "id": "showcase-output-slips-along-the-edge",
+  "role": "showcase",
+  "name": "Output slips along the edge",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "object-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "borrowed-category",
+   "place-carries-it",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "For subjects whose result is a piece of text or paper: a receipt, a note, a ticket, a written line. A full-bleed photograph, 100vw by 96svh, sets the scene. In the upper centre, left-aligned in a column starting at 18% of the width, two short paragraphs in paper colour at 28–32px, the first opening with the heading's two to four words; a neutral scrim sits behind that column only. Along the bottom, six paper-coloured slips stand side by side across the full width with 12px gaps, each a filled rectangle of a different height (between 26 and 44svh), their lower ends cut off by the section's bottom edge. Two or three of the slips, not all, are tilted by 1–2 degrees. Each slip carries a sample of real output in the text face at 15px: a bold first line, a divider made of typed characters, then four to eight lines.",
+  "mobile": "The photograph is 100svh. The paragraphs sit in the top third at 22px. Only three slips show, each 30vw wide, standing along the bottom at different heights, and the row scrolls sideways to reveal the rest. Slip text stays at 14px; do not scale it down.",
+  "seenIn": [
+   "opl-poetry-camera"
+  ]
+ },
+ {
+  "id": "showcase-object-on-a-disc",
+  "role": "showcase",
+  "name": "Object on a disc",
+  "shape": "index",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "one-motif",
+   "specimen-catalogue",
+   "hero-object",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "One section about a viewport tall on a plain ground. A flat filled disc 64vh across, in one palette colour, sits with its centre at 58% of the width; swap the disc for the subject's own shape if it has one. A cut-out object photograph stands in front of it, centred on it, about 78% of the disc's height and breaking the disc's outline at the top. Bottom-left, starting on the margin and ending level with the disc's lower edge: a vertical list of four to six item names at clamp(28px, 2.9vw, 44px), leading 1.15. The selected name is in full ink and the rest at 25%; choosing a name swaps the object (300ms crossfade) and the disc's colour. The heading, two to four words at the same size as the names but in the soft ink, is the first line of that list. One fact about the selected item sits at the disc's right edge at 17px.",
+  "mobile": "The disc comes first, 86vw across and centred, with the object in front. The names follow as a single sideways-scrolling line at 26px with 24px gaps, the selected one in full ink. The fact sits under the names at 16px.",
+  "seenIn": [
+   "aww-cominvi",
+   "opl-tara"
+  ]
+ },
+ {
+  "id": "showcase-square-plate-spare-text",
+  "role": "showcase",
+  "name": "Square plate, spare text",
+  "shape": "split",
+  "tags": [
+   "colour-field",
+   "photo-led"
+  ],
+  "directions": [
+   "split-stage",
+   "page-is-the-object",
+   "colour-chapters",
+   "editorial-report",
+   "one-motif",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "One flat field split 50/50, at least 88svh tall. Left half: a single square photograph filling the half's width minus 40px margins, vertically centred, square corners. A large simple shape may be laid over it to turn the photograph into the object it stands for: a ring 86% of its width with a 6px stroke and a small solid dot at the centre makes a record; a notch cut by clip-path makes a ticket stub. Right half, a flex column with space-between: at the top a row of three plain text tabs at 18px (editions, years, variants), the active one in full ink and the others at 40%; in the middle the title, two to four words at 32–40px bold, with a 34ch description 48px below; along the bottom two filled rectangular cells side by side, each half the column wide and 72px tall, acting as the two actions, one in ink and one a tone off the field.",
+  "mobile": "The square photograph comes first at full width with 16px margins. The tabs sit under it as one row at 17px. Then the title at 28px, the description, and the two action cells stacked, each full width and 60px tall.",
+  "seenIn": [
+   "aww-paul-kalkbrenner"
+  ]
+ },
+ {
+  "id": "how-it-works-lines-that-step-across",
+  "role": "how-it-works",
+  "name": "Lines that step across",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "sentence-as-layout",
+   "loud-flat-poster",
+   "editorial-report",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The sequence is written, not counted. Four lines of display type, one stage per line, each a complete short clause that begins with its order word: 'First you send it.' 'Then we take it apart.' 'You choose one.' 'It ships on Friday.' Set at clamp(36px, 4.6vw, 76px), leading 1.0, one line each. The first line starts on column 1 and each following line starts two columns further right (grid-column-start 1, 3, 5, 7), so the block descends as a staircase and the eye follows the diagonal. Under each line, on that line's own left edge and 12px below, a sentence of up to 34ch at 17px in the soft ink. 56px between stages. The last line may take the accent colour as the single emphasis. The first line serves as the heading; there is no title above. Leave the columns to the left of the final stage empty.",
+  "mobile": "Lines drop to 8.4vw and may wrap onto a second line. The staircase becomes a smaller indent of 6vw per stage, so the fourth line starts 18vw in. Each sentence sits under its line at 16px on the same indent. 40px between stages.",
+  "seenIn": [
+   "opl-rendez-vous-franceclat"
+  ]
+ },
+ {
+  "id": "how-it-works-photographs-down-a-diagonal",
+  "role": "how-it-works",
+  "name": "Photographs down a diagonal",
+  "shape": "stack",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "uneven-photographs",
+   "place-carries-it",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "Three stages, three photographs of different sizes placed along a falling diagonal on the 12-column grid. Stage one: a 3:4 portrait in columns 1–4. Stage two: a 1:1 square in columns 6–8, its top edge 220px lower than the first photograph's top. Stage three: a 16:10 landscape in columns 8–12, starting 180px below the bottom of the second. Each stage's text sits in the gap the stagger leaves: a paragraph of up to 36ch at 17px, top-aligned with its photograph and placed in the columns to its right (to its left for the third). Each paragraph opens with a bold run-in phrase that carries the order: 'On the first day', 'A week later', 'By the end'. Square corners; no arrows or connecting marks. The heading, two to four words at clamp(36px, 4vw, 64px) in a light weight, sits alone in columns 7–12 at the very top, level with the first photograph's top edge.",
+  "mobile": "The diagonal becomes alternating widths: the first photograph at 100%, the second at 62% flush right, the third at 78% flush left. Each paragraph follows its photograph on that photograph's left edge at 16px. 56px between stages. The heading sits above at 30px.",
+  "seenIn": [
+   "opl-fynza",
+   "opl-the-queue"
+  ]
+ },
+ {
+  "id": "how-it-works-drag-row-of-moments",
+  "role": "how-it-works",
+  "name": "Drag row of moments",
+  "shape": "carousel",
+  "tags": [
+   "photo-led"
+  ],
+  "directions": [
+   "contact-sheet",
+   "place-carries-it",
+   "uneven-photographs",
+   "page-is-the-object",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A story told left to right. Top row: the heading, two to four words at 28–36px, at the left margin; at the right margin two solid square buttons, 48px each, for back and forward. Directly beneath, a solid bar 6px tall spans the full width in a soft tone, with a full-ink segment showing how far the row has been scrolled. Then the row itself: six to nine columns, each 280px wide with 32px gaps, in a horizontally scrolling flex container with scroll-snap that bleeds off both viewport edges. Every column reads top to bottom: a one-line caption at 18px bold that carries the order in words ('We met', 'Two winters on', 'The move'), three lines at 15px in the soft ink, then 80–140px of empty space that varies per column, then a 4:5 portrait photograph. Because the spaces vary, the photographs' top edges rise and fall along the row.",
+  "mobile": "Columns are 72vw wide with 16px gaps, so the next one always shows at the right edge. The buttons are dropped; the 6px progress bar stays under the heading. The empty space inside columns shrinks to 32–64px but still varies from column to column.",
+  "seenIn": [
+   "opl-sarah-matt-wedding",
+   "aww-no-art"
+  ]
+ },
+ {
+  "id": "how-it-works-pinned-fragment-changing-state",
+  "role": "how-it-works",
+  "name": "Pinned fragment, changing state",
+  "shape": "pinned",
+  "tags": [
+   "ui-led",
+   "quiet"
+  ],
+  "directions": [
+   "product-performs",
+   "quiet-instrument",
+   "split-stage",
+   "pinned-poster"
+  ],
+  "needs": [
+   "product-ui"
+  ],
+  "blueprint": "Two columns. Right, columns 7–12: a stage that is position: sticky; top: 14vh, holding one fragment of the real interface at true size on a single flat stage colour, about 520px square. Left, columns 1–5: three statements, each in its own block 80vh tall, so one is in view at a time. A statement is a two-line sentence at 28–32px that begins with its order word ('Paste a link.', 'Then pick the parts you want.', 'Share it when it looks right.') plus one supporting line at 16px. The statement nearest the viewport's centre is in full ink; the others sit at 30%. As each statement becomes active the fragment changes to the matching state: an empty field, a filled list with two rows selected, a finished result with its confirmation. Build the states in HTML and switch a class; do not swap screenshots. The heading, two to four words at 24–28px, sits above the first statement.",
+  "mobile": "The stage is sticky at the top, 46svh tall, the fragment fitted by cropping to its active region, not by shrinking its text. Statements scroll beneath it in blocks 60svh tall at 22px. The stage releases after the third statement.",
+  "seenIn": [
+   "opl-juggle",
+   "aww-cerebrium",
+   "opl-vessa"
+  ]
+ },
+ {
+  "id": "how-it-works-itinerary-on-a-slip",
+  "role": "how-it-works",
+  "name": "Itinerary on a slip",
+  "shape": "table",
+  "tags": [
+   "object-led",
+   "type-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "type-only-statement",
+   "split-stage",
+   "quiet-instrument",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The process is printed as an itinerary or receipt. One paper-coloured slip 420–480px wide stands on a contrasting flat ground at columns 7–11; its bottom edge is a zigzag cut with clip-path and its top edge is straight. The heading, two to four words at clamp(40px, 4.4vw, 68px), sits in columns 1–5 with a 30ch paragraph, top-aligned with the slip. On the slip, in the text face at 16px with tabular figures: stages grouped under time headings that carry the order ('Monday', 'Midweek', 'Friday'), each heading in bold with 28px above it. Under a heading, two to four rows; each row has what happens on the left, a duration or time on the right, and a leader of round 4px dots between. The final row is inverted, paper-coloured text on a full-width ink bar 44px tall, and states the result: what the reader holds at the end and the total time.",
+  "mobile": "The heading and paragraph come first. The slip follows at full width minus 16px margins, keeping its zigzag bottom edge. Rows keep left text, dots and right value on one line; long descriptions wrap under the left text. The inverted final row stays full width.",
+  "seenIn": [
+   "opl-the-content-architecture",
+   "opl-lennys-newsletter-product-pass"
+  ]
+ },
+ {
+  "id": "how-it-works-accordion-of-tinted-panels",
+  "role": "how-it-works",
+  "name": "Accordion of tinted panels",
+  "shape": "strip",
+  "tags": [
+   "colour-field",
+   "poster"
+  ],
+  "directions": [
+   "colour-chapters",
+   "one-motif",
+   "loud-flat-poster",
+   "dense-tiles",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "A two-column introduction, then one horizontal accordion. Introduction: the heading, two to four words at clamp(36px, 4vw, 60px), in columns 1–5; one paragraph at 18px in columns 7–11. 64px below, a flex row across columns 1–12, 520px tall, of four to six panels with no gaps. The open stage is a panel taking about 58% of the width; the rest are vertical slivers sharing what remains. Order is carried by colour: the first stage is the darkest tone of one hue and each later stage is a lighter flat tint of it, so the row reads dark to light from left to right. A sliver shows only its stage name, rotated 90 degrees and reading upward, at 20px bold, anchored to its bottom-left. The open panel shows the name at 40px top-left, a 36ch paragraph at 18px bottom-left and, optionally, one photograph in its right half. Clicking a sliver opens it (flex-basis transition, 450ms).",
+  "mobile": "The accordion turns vertical: stages stack at full width as bars 64px tall in the same dark-to-light order, names set horizontally at 18px. The open stage expands to its content height with the paragraph at 17px. The first stage is open by default.",
+  "seenIn": [
+   "aww-white-desert"
+  ]
+ },
+ {
+  "id": "how-it-works-tiles-that-grow",
+  "role": "how-it-works",
+  "name": "Tiles that grow",
+  "shape": "grid",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "specimen-catalogue",
+   "hero-object",
+   "colour-chapters",
+   "one-motif",
+   "dense-tiles"
+  ],
+  "needs": [],
+  "blueprint": "Order is carried by size. Three flat colour tiles stand in one row, bottom-aligned (align-items: end) with 10px gaps, each larger than the one before: columns 1–3 at 30vh tall, columns 4–7 at 44vh, columns 8–12 at 60vh. Each tile holds one photograph of the subject at that stage (raw, in progress, finished), centred and scaled so the object grows from tile to tile; on light tiles mix-blend-mode: multiply removes a white studio background. One palette colour per tile. Text sits under the tiles, outside them, aligned to each tile's left edge: a stage name at 20px medium whose wording carries the order ('Picked', 'Pressed', 'Poured') and two lines at 16px in the soft ink. The heading, two to four words at 40–52px, occupies the empty ground above the two smaller tiles, top-aligned with the tallest tile. A fourth stage is possible with spans of 2, 3, 3 and 4 columns.",
+  "mobile": "Tiles stack in order and grow in height instead: 34vw, 46vw and 62vw tall, each at full width. The name and text sit under each tile at 18px and 16px. The heading comes first at 30px. 28px between stages.",
+  "seenIn": [
+   "aww-aspen-search",
+   "aww-noho"
+  ]
+ },
+ {
+  "id": "how-it-works-run-in-column",
+  "role": "how-it-works",
+  "name": "Run-in column",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "name-as-monument",
+   "editorial-report",
+   "contact-sheet",
+   "split-stage",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "The quietest sequence: one reading column and good typography. A single column 520–600px wide starts at about 30% of the viewport width (or sits on the page's text axis). The heading is a two-to-five-word question or statement at 28–32px, 48px above the first paragraph. Three to five paragraphs follow at 17–18px with line-height 1.6. Each opens with a bold run-in phrase in full ink that names its moment ('To begin,', 'Within a day,', 'After that,', 'From then on,') while the rest of the paragraph runs in the soft ink; there are no subheads, bullets or markers. After each paragraph, 20px lower, comes one small piece of evidence exactly as wide as the column: a cropped interface fragment, a photograph at 16:9, or a row of three small frames 96px tall. 72px separates stages. Nothing in the section is wider than the column, and the space to its left stays empty.",
+  "mobile": "The column fills the width between 20px margins. Type stays at 17px. Evidence pieces keep the column width; the row of three frames becomes a single sideways-scrolling row 88px tall. 56px between stages. The heading drops to 24px.",
+  "seenIn": [
+   "opl-the-queue",
+   "opl-rows",
+   "opl-dialkit"
+  ]
+ },
+ {
+  "id": "how-it-works-many-into-one",
+  "role": "how-it-works",
+  "name": "Many into one",
+  "shape": "band",
+  "tags": [
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "one-motif",
+   "dense-tiles",
+   "editorial-report",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "A diagram drawn with one repeated shape instead of arrows. The heading (two to four words on two lines at clamp(36px, 4vw, 60px)) and a short paragraph at 17px sit in columns 1–4. Beneath, a wide inline SVG spans columns 1–12 at about 4.5:1. It is built from 120–160 small filled squares (or the page's own motif), each 10–14px. In the left third they are scattered loosely in two pale tones. In the middle third they are pulled into a tight horizontal ribbon three squares high. In the right third they fan out again into neat, evenly spaced rows in the accent colour. The eye reads disorder, compression, order, from left to right. Under the diagram, three text columns aligned to its thirds: a bold one-word name at 20px and two lines at 16px each; the words carry the sequence ('Gather', 'Reduce', 'Release'). No connecting marks.",
+  "mobile": "The diagram turns to run top to bottom: a 3:4 SVG with the scatter at the top, the ribbon as a vertical band in the middle and the ordered rows at the bottom. The three names and their text sit to its right in a 38vw column, each level with its zone.",
+  "seenIn": [
+   "opl-wild-as",
+   "opl-shelf"
+  ]
+ },
+ {
+  "id": "how-it-works-one-verb-at-a-time",
+  "role": "how-it-works",
+  "name": "One verb at a time",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "pinned-poster",
+   "loud-flat-poster",
+   "dark-room",
+   "hero-object",
+   "sentence-as-layout",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "Three to five full-bleed panels, each 100svh tall, stacked with no gap; each is one stage and holds one photograph covering it. In every panel a single word, the verb for that stage ('Cut', 'Fold', 'Stitch', 'Press'), is set at clamp(96px, 17vw, 300px), heavy and centred, inside a wrapper that is position: sticky; top: 50% and shifted up by half its own height. Because each word is sticky only within its own panel, it holds the centre of the screen while its photograph passes behind it, and is then pushed out by the next panel's verb. Use mix-blend-mode: difference in white, or one solid colour tested on every image. One sentence at 18px sits in the bottom-left corner of each panel over a neutral scrim limited to that corner. There is no separate heading: the verbs, read in order, are both the heading and the sequence.",
+  "mobile": "Panels stay 100svh, each photograph cropped to a vertical slice. The verb is 24vw, still sticky at the centre. The sentence sits along the bottom over a scrim at 16px, full width with 16px margins.",
+  "seenIn": [
+   "opl-eagles-nest",
+   "aww-seasats",
+   "aww-vero-new-york"
+  ]
+ },
+ {
+  "id": "stats-one-figure-owns-the-screen",
+  "role": "stats",
+  "name": "One figure owns the screen",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "editorial-report",
+   "colour-chapters",
+   "loud-flat-poster",
+   "borrowed-category",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "One number, one screen. A flat field at least 90svh tall. At the top-left, starting on the page's main axis, a one-line claim of two to five words at 36–44px: this is the heading. Then a long gap of 22–28vh. At the bottom-left on the same edge, a single figure at clamp(180px, 23vw, 380px), leading 0.8, tight tracking, with its unit (a percent sign, 'x', 'hrs') set as a superscript one third of the figure's size and aligned to the figure's cap height. Directly beneath, flush with the figure's left edge, a caption of three lines at 16–17px, 32ch wide, saying exactly what was measured and when. The right half of the field stays empty; resist filling it. The figure is static text in lining numerals and does not animate. A source line, if needed, sits at the bottom-right at 15px.",
+  "mobile": "The claim sits at the top at 28px. The figure is 46vw, flush left, with its superscript unit; if it has four characters or more, drop it to 34vw so it stays on one line. The caption follows at 16px across 80% of the width. Minimum height 80svh.",
+  "seenIn": [
+   "opl-the-state-of-software-delivery-in-health",
+   "opl-the-content-architecture"
+  ]
+ },
+ {
+  "id": "stats-figures-inside-a-sentence",
+  "role": "stats",
+  "name": "Figures inside a sentence",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "quiet"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "type-only-statement",
+   "dark-room",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "The numbers are written into prose and the prose is set at display size. One paragraph of two or three sentences, 22–34 words, containing three or four true figures, in the pattern 'Since 2014 we have rebuilt 340 roofs in 9 towns, and 312 of them have never leaked.' Set at clamp(32px, 4.4vw, 72px), leading 1.12, in columns 2–11, left-aligned and vertically centred in a section of 80–90svh with nothing else in it. Words are in the soft ink at regular weight; the figures alone are in full ink (or the accent) at the same size, in lining numerals, with non-breaking spaces binding each figure to its unit. No boxes, underlines or colour chips behind the figures. A visually hidden two-word heading names the section for structure; to the eye the paragraph stands alone. On a deep ground use a light weight and a soft light ink, with the figures in the brightest ink.",
+  "mobile": "The paragraph is 7.4vw with leading 1.2, at full width between 20px margins, vertically centred in 70svh. Keep each figure and its unit together on one line with non-breaking spaces. Nothing else appears in the section.",
+  "seenIn": [
+   "aww-made-with-gsap-1",
+   "aww-united-carriers"
+  ]
+ },
+ {
+  "id": "stats-column-aligned-on-the-decimal",
+  "role": "stats",
+  "name": "Column aligned on the decimal",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "editorial-report",
+   "type-only-statement",
+   "page-is-the-object",
+   "contact-sheet",
+   "product-performs",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "A tall column of figures set like a ledger. Left, columns 1–5: the heading as a statement of up to five words on two lines at clamp(32px, 3.2vw, 52px), its first line in the soft ink and its second in full ink, placed at mid-height. Right, columns 7–12: four to six figures stacked, each at clamp(64px, 7vw, 112px), leading 1.0, in tabular lining numerals. They align on the decimal point: each row is a three-part grid in which the whole-number part is right-aligned in the first track, the point and decimals are left-aligned in the second, and a caption of one or two lines at 16px sits in the third, on the figure's baseline. Whole numbers simply leave the second track empty. Rows are separated by 20px of space only. Units are written in the captions, not attached to the figures, so the numerals form one clean vertical shape.",
+  "mobile": "The heading comes first at 28px. Figures drop to 15vw and keep the decimal alignment, with the split at 52% of the width. Each caption moves under its figure at 15px, starting from the left margin. 28px between rows.",
+  "seenIn": [
+   "aww-united-carriers",
+   "aww-moto-finance"
+  ]
+ },
+ {
+  "id": "stats-photograph-with-figure-tiles",
+  "role": "stats",
+  "name": "Photograph with figure tiles",
+  "shape": "mosaic",
+  "tags": [
+   "colour-field",
+   "photo-led"
+  ],
+  "directions": [
+   "editorial-report",
+   "colour-chapters",
+   "dense-tiles",
+   "split-stage",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "A mosaic without gutters spanning the full width, about 66vw tall in total. A single photograph fills the left two-thirds at roughly 1:1 with object-fit: cover and square corners. The right third is split into two stacked flat colour tiles of equal height, in two palette colours that differ clearly in lightness as well as hue. Each tile carries one figure at clamp(56px, 5.6vw, 96px) in its top-left corner, 28px in from the edges, with a two-line caption at 17px directly beneath it; the rest of the tile is empty colour, which is the point. Photograph and tiles touch, with no gaps and no rounding. The heading, two to four words at 32–40px, sits above the mosaic's left edge with 40px beneath, or is left out when the section follows a text page whose title already introduces it. Never add a third tile; with three figures choose another layout.",
+  "mobile": "The photograph comes first, full-bleed at 4:3. The two colour tiles follow side by side as squares, each 50vw, with the figure at 13vw top-left and the caption at 15px beneath. No gaps between any of the three pieces.",
+  "seenIn": [
+   "aww-ai-in-design-report-2026"
+  ]
+ },
+ {
+  "id": "stats-stepped-figure-tiles",
+  "role": "stats",
+  "name": "Stepped figure tiles",
+  "shape": "grid",
+  "tags": [
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "dense-tiles",
+   "one-motif",
+   "loud-flat-poster",
+   "colour-chapters",
+   "specimen-catalogue",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Three figures on three tiles that refuse to line up. A tall tile in the accent colour fills columns 1–6 and is 70vh high; it holds one figure at clamp(56px, 5.4vw, 92px) in its top-left corner, 28px in, and its caption at 17px in its bottom-left corner, with empty colour between. On the right, an ink-coloured tile in columns 7–9 starts 14vh lower and is 44vh high: a paper-coloured figure top-left, a caption along its bottom edge. A third tile in a mid tone takes columns 10–12, starts 26vh down and is 34vh high, with the same internal layout. Gaps are 8px. The unequal heights leave notches of bare ground above and below the right-hand tiles; the heading, two to four words at 28–36px, sits in the upper notch on column 7. If the page has a motif, cut one corner of each tile to its geometry with clip-path.",
+  "mobile": "The tall tile comes first, at full width and 56vw high, with its figure at 15vw. The two smaller tiles follow side by side with a 6px gap, the right one starting 32px lower than the left, each with its figure at 11vw and its caption at the bottom. The heading sits above at 26px.",
+  "seenIn": [
+   "aww-aspen-search"
+  ]
+ },
+ {
+  "id": "stats-total-and-its-receipt",
+  "role": "stats",
+  "name": "Total and its receipt",
+  "shape": "split",
+  "tags": [
+   "object-led",
+   "type-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "product-performs",
+   "borrowed-category",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "A total at giant size, and beside it the slip that adds up to it. Left, columns 1–6: at the top the heading, two to five words at 40–44px, with a two-line note at 16px; at the bottom-left, anchored to the section's lower edge, the total at clamp(160px, 18vw, 300px) with leading 0.8, and one caption line at 17px under it. The space between heading and total is left empty. Right, columns 8–11: a paper-coloured slip 380–440px wide on the section's contrasting ground, top-aligned with the heading, its bottom edge a zigzag made with clip-path. The slip lists eight to fourteen rows in the text face at 15–16px with tabular numerals, grouped under bold group names; each row has a description on the left, a right-aligned value, and a leader of round 4px dots between. The last row is inverted on a solid ink bar and repeats the total. The slip's values must truly sum to the figure.",
+  "mobile": "Heading and note come first. The total follows at 40vw, flush left, with its caption. The slip comes last at full width minus 16px margins with its zigzag edge, rows at 15px, and the inverted total row closing it.",
+  "seenIn": [
+   "opl-the-content-architecture"
+  ]
+ },
+ {
+  "id": "stats-figure-on-the-photographs-edge",
+  "role": "stats",
+  "name": "Figure on the photograph's edge",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "place-carries-it",
+   "dark-room",
+   "hero-object",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "One full-bleed photograph, 100vw by 88svh, and one figure set on it the way a film title sits on a frame. The figure, with its unit, is at clamp(120px, 17vw, 280px), leading 0.8, in paper colour, hugging the bottom-left corner with 24px margins, its baseline nearly on the photograph's lower edge. A neutral dark scrim covers only the bottom 35% of the image for legibility. On the same baseline at the right margin, right-aligned, a sentence of up to 26ch at 18px explains the figure. At the top-left, small at 20–24px, sits the heading of two to four words; the middle of the photograph stays clear. Two smaller supporting figures may follow below the photograph, on the ground: each at 40px with a one-line caption beside it, starting at columns 1 and 7, 40px under the image. Choose a figure that belongs to the picture: a height, a distance, a temperature, a year.",
+  "mobile": "The photograph is 80svh, cropped to its subject. The figure sits bottom-left at 30vw; the sentence moves above it at 16px, left-aligned. Supporting figures stack under the photograph at 32px, each with its caption on the line beneath.",
+  "seenIn": [
+   "aww-the-state-of-the-gallery"
+  ]
+ },
+ {
+  "id": "stats-quiet-figure-lines",
+  "role": "stats",
+  "name": "Quiet figure lines",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "uneven-photographs",
+   "split-stage",
+   "contact-sheet",
+   "name-as-monument",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "Numbers stated without raising the voice. In columns 2–7, a definition-list layout: three to five rows, each a two-track grid. The first track is 132px wide and holds the figure, right-aligned, at 28–32px in medium weight and full ink with tabular numerals. The second track, after a 24px gap, holds one sentence at 16–17px in the soft ink, at most 40ch, whose first baseline matches the figure's baseline. Sentences share one left edge and figures one right edge, so a clean channel of space runs down between them. 28px between rows. The heading, two to four words at 24–28px, sits 56px above on the sentences' left edge, not the figures'. Optionally, a single small square photograph occupies columns 9–11, its top 80px lower than the first row, with no caption. Leave at least 18vh of empty ground above and below the block.",
+  "mobile": "The grid stays two-track, with the figure track narrowed to 88px and figures at 24px; sentences at 16px wrap beside them. If the photograph is used it comes after the rows at 56% width, flush right. The heading is 22px on the sentences' left edge.",
+  "seenIn": [
+   "aww-cominvi"
+  ]
+ },
+ {
+  "id": "testimonial-name-block-quote-block",
+  "role": "testimonial",
+  "name": "Name block, quote block",
+  "shape": "split",
+  "tags": [
+   "colour-field",
+   "type-led"
+  ],
+  "directions": [
+   "editorial-report",
+   "colour-chapters",
+   "dense-tiles",
+   "loud-flat-poster",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "Two flat blocks butt together across the full width with no gap, about 70svh tall, built as a two-column grid (5fr 7fr) whose cells stretch to equal height. The left block, columns 1–5, is in the page's ink colour and holds only the speaker: name at 20px medium and role at 16px in a softer tone, pinned to the bottom-left corner with 32px padding; the rest of the block is empty. The right block, columns 6–12, is in one palette colour and carries the quotation at clamp(28px, 3vw, 44px), leading 1.15, top-left with 48px padding and a measure of about 24ch, so the lower third of the colour stays empty. Curly quotation marks are part of the text, with the opening mark hung outside the left edge by a negative `text-indent`. There is no heading; the quotation does that job.",
+  "mobile": "The blocks stack with the colour block first: the quotation at 26px with 24px padding and a clear band of empty colour beneath it. The dark block follows directly, only about 96px tall, with name and role on one line each at the bottom-left. No gap between the two.",
+  "seenIn": [
+   "aww-ai-in-design-report-2026"
+  ]
+ },
+ {
+  "id": "testimonial-lead-quote-corner-quotes",
+  "role": "testimonial",
+  "name": "Lead quote, corner quotes",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "quiet"
+  ],
+  "directions": [
+   "dark-room",
+   "name-as-monument",
+   "borrowed-category",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "A single field one viewport tall (min-height 100svh), usually the darkest tone of the palette. The lead quotation sits in the upper third: two lines at about 4vw in a light weight, centred, no wider than 60% of the viewport, with nothing near it. Two further short quotations are pushed into the bottom-left and bottom-right corners, each a block three columns wide set at 16px with leading 1.5, left-aligned, with the speaker's name and role on the two lines beneath in the softer ink. The bottom centre, about six columns wide, is deliberately empty. Use a three-row grid (auto 1fr auto) so the corner blocks hold a bottom margin of 32px while the lead quotation keeps its place at any height. There is no heading and there are no portraits; the contrast between one large voice and two small ones is the composition.",
+  "mobile": "The lead quotation moves to the top at 8vw over three or four lines, left-aligned, with 96px of empty field under it. The two small quotations then stack at 16px, the first full width, the second indented by a quarter of the screen so they do not read as a list.",
+  "seenIn": [
+   "aww-hilden-kaira"
+  ]
+ },
+ {
+  "id": "testimonial-paper-slips",
+  "role": "testimonial",
+  "name": "Quotes on paper slips",
+  "shape": "strip",
+  "tags": [
+   "object-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "specimen-catalogue",
+   "borrowed-category",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "A heading of two to four words at about 3vw sits top-left in columns 1–6. Beneath it three paper slips fan across columns 2–11 on a contrasting flat ground: each is a filled paper-coloured panel about 300px wide, of three different lengths (440, 520 and 600px), rotated −4, 2 and 5 degrees and overlapping its neighbour by roughly 40px. The top and bottom edges of each slip are zigzag tears cut with `clip-path: polygon()`. On a slip, from the top: the speaker's name centred at 18px bold, the role on one line, a square greyscale photograph of the speaker 120px wide, then the quotation at 16px in the text face, left-aligned with 24px padding. The longest slip runs past the bottom of the section, which clips it with `overflow: hidden`, so the slips look freshly printed rather than laid out as cards.",
+  "mobile": "One slip per row, each 78% of the screen wide and kept rotated by two or three degrees in alternating directions, the first hugging the left margin, the second the right, each overlapping the one above by 32px. The heading sits above at 8vw on two lines.",
+  "seenIn": [
+   "opl-poetry-camera"
+  ]
+ },
+ {
+  "id": "testimonial-quote-over-photograph",
+  "role": "testimonial",
+  "name": "Quotation over a photograph",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led"
+  ],
+  "directions": [
+   "place-carries-it",
+   "dark-room",
+   "hero-object",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "One photograph fills the section edge to edge at 100vw by 90svh with `object-fit: cover`; choose a frame with a calm lower half. The quotation is set directly on it in the paper colour: two or three lines at clamp(36px, 5vw, 80px), leading 1.0, flush left in columns 1–9, its last baseline 64px above the bottom edge. The speaker's name and role sit at 16px on that same baseline, right-aligned in columns 10–12. For legibility, darken the whole image evenly with `filter: brightness(0.7)` instead of placing a panel behind the words; the photograph must still read as a photograph. There is no heading, no frame and no oversized quotation-mark ornament, only plain curly quotes in the text. The section butts directly against its neighbours with no margin, so the image edge is the section edge.",
+  "mobile": "The photograph becomes 100vw by 80svh, cropped to its strongest vertical slice. The quotation sits in the lower half at 9vw over four lines at most, flush left with 20px margins; the name and role follow under it on one line at 15px.",
+  "seenIn": [
+   "opl-berd"
+  ]
+ },
+ {
+  "id": "testimonial-gutter-quotes-pinned",
+  "role": "testimonial",
+  "name": "Quotes in the gutters",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "pinned-poster",
+   "hero-object",
+   "colour-chapters",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "A sticky stage (`position: sticky; top: 0; height: 100svh`) inside a wrapper three or four viewports tall. The section's title, two or three words at 10–12vw, stays pinned across the top of the stage. In the centre a portrait photograph, 4:5 and about 30vw wide, changes at each scroll step. Each step also brings one quotation, placed in an outer gutter in a column 280px wide and at a different height each time: right gutter in the upper third, then left gutter at mid-height, then right gutter in the lower third. Quotations are bold at 22px with tight leading; the speaker's name follows at 15px in the softer ink. Only one quotation shows at a time. Each step may switch the stage to its own flat ground colour. Drive the steps with an IntersectionObserver on spacer blocks; never hijack the scroll.",
+  "mobile": "No pinning. The title sits once at 16vw. Each speaker then gets a block: the portrait at 72% width, flush left and flush right in turn, the quotation at 20px beneath it on the same edge, and the name under that. Leave 72px between blocks.",
+  "seenIn": [
+   "opl-city-of-angels"
+  ]
+ },
+ {
+  "id": "testimonial-portrait-offset-quote",
+  "role": "testimonial",
+  "name": "Portrait and offset quotation",
+  "shape": "split",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "split-stage",
+   "uneven-photographs",
+   "place-carries-it",
+   "one-motif",
+   "editorial-report",
+   "hero-object"
+  ],
+  "needs": [],
+  "blueprint": "A 12-column row on the page ground with wide margins. A portrait of the speaker, 3:4, fills columns 2–5 and is tall, about 70svh; it takes whatever mask the page gives its photographs (square corners, or the page's one motif shape). The quotation occupies columns 7–12 and starts 120px lower than the top of the portrait: four to six lines at clamp(26px, 2.6vw, 40px) in a light or regular weight, leading 1.2, measure about 26ch. The name and role sit 32px beneath the quotation at 16px, on its left edge. A second, small photograph (1:1, columns 10–11) hangs 96px below the attribution and shows the place or the thing the speaker is talking about. There is no heading. Nothing is centred; every edge lands on a column line, and the two vertical offsets are the design.",
+  "mobile": "The portrait runs at 72% width from the left margin, 3:4. The quotation follows at 24px, full width, starting 32px beneath. Name and role sit under it. The small second photograph sits at 44% width against the right margin, 48px lower, overlapping nothing.",
+  "seenIn": []
+ },
+ {
+  "id": "testimonial-words-spread-wide",
+  "role": "testimonial",
+  "name": "Quotation spread edge to edge",
+  "shape": "band",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "type-only-statement",
+   "name-as-monument",
+   "loud-flat-poster",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A full-width field with no image. One short quotation, six to ten words, is set at about 9vw in the display face and broken by hand into two or three lines. Each line is a flex row with `justify-content: space-between`, so its first word sits hard against the left margin, its last word hard against the right, and any middle word floats between them. Lines are 0.6em apart, far looser than a headline, which lets the gaps read as pauses. The attribution is spaced the same way on a final row at 18px: name at the left margin, role centred, organisation at the right. Opening and closing quotation marks belong to the first and last words. There is no separate heading. Leave at least 140px of empty field above and below, and give the field its own flat colour when the palette allows.",
+  "mobile": "Lines break after every two words and keep the spread: one word at each margin, at 13vw. A single-word line alternates between the left and right margins. The attribution stacks as three short lines at 15px, aligned left, centre and right in turn.",
+  "seenIn": [
+   "opl-poetry-camera",
+   "opl-rsquad"
+  ]
+ },
+ {
+  "id": "testimonial-letter-reading-column",
+  "role": "testimonial",
+  "name": "One long letter",
+  "shape": "stack",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "split-stage",
+   "editorial-report",
+   "type-only-statement",
+   "page-is-the-object"
+  ],
+  "needs": [],
+  "blueprint": "A single testimonial given room to be read, set like a letter. One column 34–38ch wide begins at column 5 of 12, or shares the page's own reading column. The first sentence of the quotation is pulled up as the opening line at 28–32px in medium weight, two lines at most. The rest follows as two or three ordinary paragraphs at 18–19px with leading 1.55 and 20px between paragraphs, in the full ink, not grey. It closes the way a letter does: 40px of space, then the name on one line and the role on the next at 16px. In columns 1–3, top-aligned with the first line, sits either nothing or one small square photograph of the writer, 120px wide. There are no quotation marks at all; the letter form makes them unnecessary. Space above and below is 140px.",
+  "mobile": "The column takes the full width with 20px margins. If there is a photograph it goes first at 96px square, left-aligned. Opening sentence at 24px, body at 17px, sign-off beneath. Nothing else changes; this section is already a phone composition.",
+  "seenIn": []
+ },
+ {
+  "id": "testimonial-shallow-portrait-bands",
+  "role": "testimonial",
+  "name": "Shallow portraits, small quotes",
+  "shape": "grid",
+  "tags": [
+   "dense",
+   "photo-led"
+  ],
+  "directions": [
+   "contact-sheet",
+   "dense-tiles",
+   "quiet-instrument",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "Speakers are shown as wide, shallow crops rather than headshots. A two-word heading at 15px sits in columns 1–2, top-aligned with the frames, not above them. In columns 3–12 three frames sit side by side with 8px gaps at unequal widths (4, 3 and 3 columns), all exactly 110px tall: each is a photograph of the person cropped with `object-fit: cover` to a band across the eyes and shoulders. Directly under each frame, on its left edge, come the name in the brighter ink and the role in the softer ink on one line at 15px, then the quotation at the same 15px over three to five lines, no wider than its frame. Everything shares one type size; hierarchy comes from ink alone. If interview clips exist, each frame can be the poster of its clip, but the section must work with stills.",
+  "mobile": "Frames go full width one after another, each 84px tall, with its name, role and quotation at 15px beneath and 40px before the next. The heading leads as a plain line at the same size, in the brighter ink, 24px above the first frame.",
+  "seenIn": [
+   "aww-oimachi"
+  ]
+ },
+ {
+  "id": "proof-names-run-on-sentence",
+  "role": "proof",
+  "name": "Names as one sentence",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "sentence-as-layout",
+   "name-as-monument",
+   "dark-room",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "Client, press or partner names are written out as one run-on sentence and set large: clamp(40px, 5vw, 76px), leading 1.0, flush left across all twelve columns, wrapping naturally over five to seven lines. Names are separated by commas and the list ends with a full stop. All names are set in a dimmed ink (still at least 3:1 against the ground), so the block reads as texture; one name at a time is lit in the full ink, and the lit name moves through the list every two seconds (a class toggled by a short script, with a 400ms colour transition). The sentence opens with two or three plain words in the full ink that act as the heading: the phrase that introduces the names. Nothing else is in the section: no logos, no columns, and 120px of space above and below.",
+  "mobile": "The same sentence at 9vw, wrapping over ten to fourteen lines; cut the list to the twelve strongest names so it stays within one and a half screens. The lit name still cycles. Margins are 20px and there are no other elements.",
+  "seenIn": [
+   "aww-revelatio-studio"
+  ]
+ },
+ {
+  "id": "proof-plain-columns",
+  "role": "proof",
+  "name": "Plain names in columns",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "contact-sheet",
+   "editorial-report",
+   "split-stage",
+   "uneven-photographs",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "A typographic list with no logos. The heading, two or three words at 28–32px, sits in columns 1–3 and stays top-aligned with the first row of names. Columns 5–12 hold the names in three or four text columns (`columns: 4; column-gap: 32px`), each name on its own line at 20–22px with leading 1.5, sentence case, in the full ink. Where names fall into kinds (clients, press, partners), each kind starts a new column and its first line names the kind in the softer ink at the same size, so no small labels are needed. Columns are of unequal length and are not balanced; ragged bottoms are intended. Twelve to thirty names work best. There are no boxes, bullets or separators: the column edges and the shared baseline do the organising. Leave 120px above and below.",
+  "mobile": "The heading leads at 26px. Names follow in two columns at 17px with a 20px gap; each kind begins after a 32px break with its name in the softer ink on the first line. Long names wrap inside their column rather than shrinking.",
+  "seenIn": [
+   "opl-ayush-halder-portfolio"
+  ]
+ },
+ {
+  "id": "proof-single-logo-row",
+  "role": "proof",
+  "name": "One quiet logo row",
+  "shape": "strip",
+  "tags": [
+   "quiet"
+  ],
+  "directions": [
+   "product-performs",
+   "quiet-instrument",
+   "hero-object",
+   "dark-room",
+   "place-carries-it",
+   "split-stage",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "Only for real logos supplied by the project; if none are supplied, set the names in the text face at 22px in the same row and never draw stand-ins. The row reads as a sentence: it opens at the left margin with two to four plain words at 18px (the phrase that introduces the names), vertically centred on the logos, and five to seven logos follow on the same line, spread to the right margin with `justify-content: space-between`. Every logo is normalised to one optical height (28–32px for wordmarks, 36px for compact marks) and one colour, the page ink, using single-colour SVGs with `fill: currentColor`. The band is tall and almost empty: 120–150px of ground above and below the row, no box, no background change and no separate heading. Logos stay still; nothing scrolls or fades at the edges.",
+  "mobile": "The opening words sit alone on the first line at 17px. Logos follow in a grid of two per row, each 26px tall and left-aligned in its cell, with 36px between rows. Show six at most; there is no sideways scrolling.",
+  "seenIn": [
+   "aww-ai-in-design-report-2026",
+   "aww-lama-lama-2",
+   "opl-mammut-studios"
+  ]
+ },
+ {
+  "id": "proof-recognition-table",
+  "role": "proof",
+  "name": "Recognition as a table",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "editorial-report",
+   "type-only-statement",
+   "contact-sheet",
+   "borrowed-category",
+   "name-as-monument",
+   "quiet-instrument"
+  ],
+  "needs": [],
+  "blueprint": "Awards, press mentions or credits set as a four-column table with no lines. The heading is two or three words at about 5vw, stepped over two lines with the second line indented by two columns, and occupies columns 1–7. The table begins 72px below and spans columns 1–12 on a fixed grid: year in columns 1–2, project or title in 3–6, awarding body or publication in 7–10, the award itself in 11–12, right-aligned. Rows are set at 16–17px with 14px of padding above and below; every second row carries a background tone one step from the ground, running the full table width, which replaces rules. Year groups are separated by one blank row, and the year is printed only on the first row of its group. Use a real `<table>` with `border-collapse: collapse` and no borders.",
+  "mobile": "The heading drops to 11vw. Each table row becomes a two-line block: title on the first line in the full ink, then body and award on the second in the softer ink. The year stands once as a 22px figure above its group. Alternate blocks keep the background tone.",
+  "seenIn": [
+   "aww-bleibtgleich26"
+  ]
+ },
+ {
+  "id": "proof-large-marks-on-tiles",
+  "role": "proof",
+  "name": "Large marks on tiles",
+  "shape": "grid",
+  "tags": [
+   "dense",
+   "colour-field"
+  ],
+  "directions": [
+   "dense-tiles",
+   "specimen-catalogue",
+   "colour-chapters",
+   "one-motif",
+   "product-performs",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "A board of filled tiles, four across and two or three rows deep, with 8px gaps, spanning the full content width. Each tile is about 3:2, one step lighter or darker than the page ground, with no border. A tile holds one supplied logo, shown far larger than a usual logo strip: about 72px tall, centred, in the page ink as a single-colour SVG. When no logo files exist, the tile holds the name instead, set at 28–32px bold, top-left with 24px padding; never draw a mark. One tile, twice the width of the others and placed first, is in the accent colour and carries the heading: two to four words at about 3vw, top-left. Tile corners follow the page's one radius, or the page's motif shape if it has one. Tiles sit still; there is no hover lift.",
+  "mobile": "Two tiles per row with 6px gaps, logos at 44px tall. The heading tile runs full width first, about 120px tall. Show eight tiles at most so the board stays under one and a half screens. Names set in type drop to 20px.",
+  "seenIn": [
+   "aww-monolog"
+  ]
+ },
+ {
+  "id": "proof-printed-guest-list",
+  "role": "proof",
+  "name": "The printed guest list",
+  "shape": "stack",
+  "tags": [
+   "object-led",
+   "type-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "borrowed-category",
+   "specimen-catalogue",
+   "place-carries-it",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "Names are printed on a card, the way a programme lists its patrons or an invitation its hosts. On a contrasting flat ground, a paper-coloured panel about 56% of the viewport wide with 5:7 proportions sits centred and rotated by one or two degrees; the section is shorter than the card and clips it with `overflow: hidden`, so the card is cut by the bottom edge rather than framed whole. Inside, 56px padding. At the top, a centred heading of two to four words at 28px. Below it the names run as centred lines at 20–22px with leading 1.7, several names to a line, separated by middots with a non-breaking space either side. One photograph may be tipped in between the heading and the names: 16:9, the full inner width, square corners. The card is a plain filled shape with no outline.",
+  "mobile": "The card becomes 92% of the screen wide, keeps a one-degree tilt and is still cut off by the section's bottom edge. Heading at 22px, names at 17px with two names to a line. Padding drops to 28px, and the tipped-in photograph keeps the full inner width.",
+  "seenIn": [
+   "opl-hebbia"
+  ]
+ },
+ {
+  "id": "proof-names-off-both-edges",
+  "role": "proof",
+  "name": "Names running off the edges",
+  "shape": "band",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "pinned-poster",
+   "loud-flat-poster",
+   "name-as-monument",
+   "borrowed-category",
+   "hero-object",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A full-bleed band in a flat colour, about 34vh tall, holding a single line of names that is cropped by both viewport edges. The names are set at 8vw in the display weight, `white-space: nowrap`, separated by a solid round dot one third of the cap height, and the line moves slowly to the left (a CSS `translateX` animation over 40 seconds on a duplicated track, paused under `prefers-reduced-motion`). The band has no heading. Its meaning comes from one sentence at 18px set directly below the band at the left margin on the page ground, stating plainly who these names are. Supplied logos may replace names if all are available as single-colour SVGs at 0.8em height; do not mix logos and set names in one line. The band butts against the sections above and below with no gap.",
+  "mobile": "The band is 22vh tall with names at 15vw, still cropped at both edges and still moving. The explaining sentence sits under it at 16px with 20px margins. Do not add a second line running the opposite way; one line is the idea.",
+  "seenIn": [
+   "aww-made-with-gsap-1"
+  ]
+ },
+ {
+  "id": "pricing-price-as-display-figure",
+  "role": "pricing",
+  "name": "The price, very large",
+  "shape": "split",
+  "tags": [
+   "type-led",
+   "object-led"
+  ],
+  "directions": [
+   "product-performs",
+   "hero-object",
+   "name-as-monument",
+   "one-motif",
+   "dark-room",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "One plan, no card. Columns 1–4 hold a heading of two to four words at 28–36px and one paragraph at 17px, top-aligned. Columns 6–12 hold the price as a display figure: numerals at clamp(120px, 16vw, 240px), tight tracking, leading 0.85, with the currency sign at half that size raised to the cap line and the period (per month, once) at 18px beside the last numeral on the baseline. One thing from the page overlaps the numerals by 10–15% of their height: the product photograph, the interface fragment or the motif shape, placed over the top-right of the figure. Beneath the figure, on its left edge, four plain lines at 18px state what is included, one per line, without ticks or bullets, then a single rectangular button. The section is at least 80svh tall with the figure vertically centred.",
+  "mobile": "The heading and paragraph come first, full width. The figure follows at 34vw, flush left, with the overlapping object tucked at its top-right corner at a third of the screen wide. Included lines at 17px and a full-width button close the block.",
+  "seenIn": [
+   "opl-dabbit"
+  ]
+ },
+ {
+  "id": "pricing-large-typographic-table",
+  "role": "pricing",
+  "name": "Plans as a large table",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "type-only-statement",
+   "editorial-report",
+   "dense-tiles",
+   "product-performs",
+   "contact-sheet"
+  ],
+  "needs": [],
+  "blueprint": "Two to four plans compared in a table whose type is far larger than a table usually gets. The first column (columns 1–4) lists what is compared, in words, at 22px. Each plan takes an equal share of columns 5–12. The header row gives each plan's name at about 3vw bold, left-aligned, with its price directly beneath at the same size in the regular weight and the period at 16px. Body rows are 22px with 20px padding; cells answer in words or numbers (“Unlimited”, “3 seats”, “Not included”), never with ticks. Every second row has a background tone one step from the ground, spanning all columns. The recommended plan is marked only by its whole column sitting on the accent tone from header to last row. The final row holds one rectangular button per plan. A two-to-four-word heading sits in the top-left cell.",
+  "mobile": "Plans stack as separate blocks. Each opens with the plan name and price at 9vw, then its rows as pairs: the compared item in the softer ink, the answer beneath in the full ink, both at 17px. The recommended plan's block sits on the accent tone. A full-width button ends each block.",
+  "seenIn": []
+ },
+ {
+  "id": "pricing-one-sentence-price",
+  "role": "pricing",
+  "name": "One plan as a sentence",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "type-only-statement",
+   "loud-flat-poster",
+   "name-as-monument",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "The whole offer is one sentence of five to seven short words that contains the price, set at 8–9vw across the full width on two lines, leading 0.95, flush left; it replaces any heading. The price is not styled as a different word. Instead it sits on a filled block of the accent colour exactly one line-height tall with 0.15em of padding at each side, so the figure reads as an object in the line. Below, on one shared baseline 64px under the sentence: a supporting sentence at 20px in columns 1–6 saying what the price includes, and one rectangular button right-aligned in columns 10–12. If a second option exists (annual, team), it is a plain text link under the button, not a second panel. The section is one flat colour field at least 80svh tall.",
+  "mobile": "The sentence is set at 11vw on two lines, with the price block on a line of its own between them, as wide as its figure. The supporting sentence follows at 17px, then a full-width button, then the text link for the second option.",
+  "seenIn": []
+ },
+ {
+  "id": "pricing-two-plans-two-fields",
+  "role": "pricing",
+  "name": "Two plans, two fields",
+  "shape": "split",
+  "tags": [
+   "colour-field",
+   "poster"
+  ],
+  "directions": [
+   "colour-chapters",
+   "loud-flat-poster",
+   "borrowed-category",
+   "one-motif",
+   "editorial-report",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "Two plans stand side by side as two full-height colour fields that meet at a hard vertical edge with no gap: the left field spans columns 1–5, the right 6–12, both 90svh tall and bleeding to the viewport edges. Each field has its own flat colour and its assigned text colour. Inside each, on a shared grid: the plan name at about 5vw top-left with 40px padding; one sentence at 20px beneath it, no wider than 26ch, saying who the plan is for; then, anchored to the bottom-left, the price at about 10vw with the period at 18px beside it; and a rectangular button anchored bottom-right on the price's baseline. What is included is written as a short paragraph, not a tick list. The unequal widths say which plan matters more without any badge. No heading spans the two fields.",
+  "mobile": "The fields stack, each 70svh tall, the more important plan first. Name at 12vw top-left, sentence beneath, price at 24vw at the bottom-left, and the button full width along the bottom edge inside 20px padding. The hard colour edge between the two is kept.",
+  "seenIn": []
+ },
+ {
+  "id": "pricing-menu-list",
+  "role": "pricing",
+  "name": "Prices like a menu",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "place-carries-it",
+   "split-stage",
+   "uneven-photographs",
+   "quiet-instrument",
+   "specimen-catalogue",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "Prices set the way a good menu sets them. A heading of two to three words at 32–40px sits in columns 1–3. Columns 5–12 hold the list in two text columns with a 64px gap. Items are grouped under plain group names at 24px in medium weight with 48px above each group. Each item is a row: the name at 19px on the left, the price at the same size on the right on the same baseline, with tabular figures and the currency sign shown only once per group; beneath the name, one line of description at 16px in the softer ink, no wider than 36ch. Rows are 22px apart. Name and price are joined only by empty space (flex with `justify-content: space-between`), with no dot leaders and no lines. One small photograph (4:5, three columns wide) may sit under the heading in the left zone.",
+  "mobile": "One column. The heading at 28px, then the photograph at 60% width if used. Each item keeps name left and price right on one line at 17px, with its description beneath in the softer ink. Group names at 20px with 40px above.",
+  "seenIn": []
+ },
+ {
+  "id": "pricing-ticket-with-stub",
+  "role": "pricing",
+  "name": "The ticket",
+  "shape": "strip",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "borrowed-category",
+   "loud-flat-poster",
+   "pinned-poster",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "The price is printed on a ticket. On a flat contrasting ground, one filled panel about 64vw wide with 2.3:1 proportions sits centred and straight, built as a two-part grid (7fr 3fr). A half-round notch 28px across is bitten out of the top and bottom edges where the two parts meet (two absolutely positioned circles in the ground colour), and a column of round dots 6px across in the ground colour runs between the notches as the perforation. The main part holds, top-left with 40px padding, what is being bought in two to four words at about 4vw, and along its bottom three or four short lines at 17px (dates, what is included, terms) in two tidy columns. The stub holds the price at about 6vw, centred, and under it the action as a solid bar the full width of the stub, 56px tall.",
+  "mobile": "The ticket turns upright: full width less 20px margins, main part on top, stub beneath, the notches now on the left and right edges and the dot perforation running across. Title at 9vw, price at 16vw, the action bar full width inside the stub.",
+  "seenIn": []
+ },
+ {
+  "id": "pricing-itemised-receipt",
+  "role": "pricing",
+  "name": "The itemised receipt",
+  "shape": "stack",
+  "tags": [
+   "object-led",
+   "quiet"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "hero-object",
+   "specimen-catalogue",
+   "borrowed-category",
+   "quiet-instrument"
+  ],
+  "needs": [],
+  "blueprint": "For offers made of parts: a base price plus options, a kit, a bundle. A tall paper-coloured slip 380px wide sits in columns 8–11 on a contrasting ground, its bottom edge cut into a zigzag with `clip-path: polygon()`, its top edge running off the top of the section. On the slip, with 28px padding: the name centred at 20px bold, then each item as a row with the description left and the amount right at 16px with tabular figures, 14px between rows; a thick 4px bar in the ink colour; then the total as the largest thing on the slip at 44px, right-aligned. Columns 1–6 carry the heading (two to four words at about 4vw), one paragraph at 18px and the button, starting 96px from the top. If options are selectable, ticking one in the left column adds its row to the slip and updates the total.",
+  "mobile": "Heading, paragraph and any options come first. The slip follows at 86% width, centred, keeping its zigzag foot, with rows at 16px and the total at 36px. The button sits under the slip at full width, 52px tall.",
+  "seenIn": [
+   "opl-poetry-camera"
+  ]
+ },
+ {
+  "id": "pricing-plan-index-live-figure",
+  "role": "pricing",
+  "name": "Plan names, one live figure",
+  "shape": "index",
+  "tags": [
+   "type-led",
+   "ui-led"
+  ],
+  "directions": [
+   "pinned-poster",
+   "product-performs",
+   "contact-sheet",
+   "name-as-monument",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "Plans are a list of names; the price shown belongs to whichever name is selected. Columns 1–6 hold the plan names stacked at about 5vw, leading 1.1, each a `<button>`; the selected one is in the full ink, the others in the softer ink, and the selected name carries a solid dot 0.3em across at its left. Columns 8–12 hold one stage that stays in place while its contents change: the selected plan's price at about 9vw at the top, the period beside it at 18px, a paragraph of three or four lines at 18px saying what that plan includes, and one rectangular button whose label names the plan. Changing plan swaps the stage contents with a 200ms crossfade; the figure's position never moves. Selection follows click and keyboard focus. The middle plan is selected on load. There is no heading: the names are the heading.",
+  "mobile": "Plan names stack at 10vw, each on its own line. Tapping one opens its stage directly beneath that name (price at 20vw, paragraph at 17px, full-width button) and closes the others, like a large accordion without lines. The middle plan starts open.",
+  "seenIn": []
+ },
+ {
+  "id": "pricing-stepped-colour-tiles",
+  "role": "pricing",
+  "name": "Plans that step up",
+  "shape": "grid",
+  "tags": [
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "dense-tiles",
+   "colour-chapters",
+   "specimen-catalogue",
+   "loud-flat-poster",
+   "one-motif",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Three plans as flat colour tiles whose heights step like a bar chart, so the bigger plan is literally bigger. The tiles sit in one row with 8px gaps, bottoms on a common base line, each 4 columns wide: the first 360px tall, the second 480px, the third 600px. Each has its own palette colour, no border and one shared radius. Inside, top-left with 28px padding: the plan name at 28px bold, the price at 56px beneath it, then what is included as plain lines at 17px (the taller tiles simply have room for more lines). The bottom 64px of every tile is a strip in a darker flat tone of that tile's colour, and the whole strip is the button with its label left-aligned. A heading of two to four words at about 4vw occupies the empty space above the two shorter tiles, top-left.",
+  "mobile": "Tiles stack full width in rising order, each as tall as its content, keeping its colour and its darker button strip along the bottom. Gaps of 8px. The heading leads at 9vw on two lines, and prices drop to 44px.",
+  "seenIn": []
+ },
+ {
+  "id": "faq-large-questions-answers-beside",
+  "role": "faq",
+  "name": "Large questions, answers beside",
+  "shape": "table",
+  "tags": [
+   "type-led"
+  ],
+  "directions": [
+   "editorial-report",
+   "type-only-statement",
+   "sentence-as-layout",
+   "name-as-monument",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "Every answer is open; nothing collapses. Each question-and-answer pair is a row on the 12-column grid: the question in columns 1–6 at clamp(26px, 2.6vw, 40px), medium weight, leading 1.1, no more than two lines; its answer in columns 8–12 at 17–18px with leading 1.55 and a measure near 40ch, its first baseline level with the question's first baseline. Rows are separated by 72–88px of empty space and nothing else. Five to seven rows. The section heading, two or three words, is set at the same size as the questions but in the softer ink and sits as the first row's left cell with an empty right cell, so it reads as the top of the same table rather than a title above it. Because questions are large and answers small, the left column works as a scannable index.",
+  "mobile": "Each pair stacks: question at 24px, answer 12px beneath at 17px, then 56px of space before the next. The heading leads at the same 24px in the softer ink. Answers stay open; there is no accordion on the phone either.",
+  "seenIn": []
+ },
+ {
+  "id": "faq-alternating-tone-bands",
+  "role": "faq",
+  "name": "A band per question",
+  "shape": "band",
+  "tags": [
+   "colour-field",
+   "type-led"
+  ],
+  "directions": [
+   "colour-chapters",
+   "loud-flat-poster",
+   "borrowed-category",
+   "dense-tiles",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "Each question owns a full-bleed band, and the bands alternate between two flat tones (ground and one step away, or two palette colours with their assigned inks) and butt together with no gap. Inside every band the same grid applies: the question in columns 1–5 at 28–32px bold, top-aligned with 56px of padding above; the answer in columns 7–12 at 18px with leading 1.5, the same padding, and 56px below. Bands are as tall as their content, so their heights differ, which gives the stack its rhythm. Four to seven bands. The heading is the first band: two to four words at about 7vw on the accent colour, flush left, taller than the rest at about 40svh with the words anchored to its bottom-left. All answers are visible; there are no toggles.",
+  "mobile": "Bands stay full-bleed and alternate. Inside each, the question at 22px then the answer at 17px, with 32px padding top and bottom and 20px at the sides. The heading band is 30svh tall with its words at 13vw at the bottom-left.",
+  "seenIn": []
+ },
+ {
+  "id": "faq-filled-tile-accordion",
+  "role": "faq",
+  "name": "Accordion of filled tiles",
+  "shape": "stack",
+  "tags": [
+   "dense",
+   "colour-field"
+  ],
+  "directions": [
+   "dense-tiles",
+   "one-motif",
+   "product-performs",
+   "specimen-catalogue",
+   "loud-flat-poster",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A two-part row. Columns 1–4 hold the heading, two to four words at about 4vw, `position: sticky; top: 96px` so it stays while the list scrolls past. Columns 5–12 hold the accordion: each question is a filled tile one step from the page ground, with 8px between tiles, no border and the page's one radius (or its motif's corner). A closed tile is 72px tall with the question at 20px medium on the left, 24px padding, and on the right a plus sign drawn from two 3px bars 16px long. The open tile switches to the accent colour with its assigned ink, the plus becomes a minus by rotating one bar, and the answer appears at 17px, no wider than 52ch. Build each tile as `<details>` with a shared `name` so one opens at a time. Six to nine tiles.",
+  "mobile": "The heading sits above at 9vw, not sticky. Tiles run full width with 6px gaps, questions at 18px wrapping to two lines, closed height at least 64px. The open tile keeps the accent colour, and answers are set at 16px with 20px padding.",
+  "seenIn": [
+   "opl-locker-land"
+  ]
+ },
+ {
+  "id": "faq-open-two-column-reading",
+  "role": "faq",
+  "name": "Answers as reading text",
+  "shape": "grid",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "editorial-report",
+   "type-only-statement",
+   "page-is-the-object",
+   "contact-sheet",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "The questions and answers are set as continuous reading text, like the notes at the back of a programme. A heading of two or three words at 28–32px sits in columns 1–3, top-aligned. Columns 5–12 hold the text in two columns (`columns: 2; column-gap: 56px`), each about 36ch wide, at 16–17px with leading 1.55. Each item is one paragraph: the question is the opening run-in, set in the medium weight in the full ink and ending with its question mark, and the answer continues on the same line in the regular weight. Paragraphs are separated by 20px and carry `break-inside: avoid` so none splits across columns. No toggles, no icons, no boxes. Eight to fourteen items fit on one screen, which is the point: everything is answered at a glance. Where the page's reading column is narrow, use one column.",
+  "mobile": "One column at 16px with 20px margins. The heading leads at 24px. Each paragraph keeps its run-in question in the medium weight, with 18px between paragraphs. The section may run to two screens; do not collapse it into an accordion.",
+  "seenIn": []
+ },
+ {
+  "id": "faq-accordion-beside-tall-photo",
+  "role": "faq",
+  "name": "Questions beside a tall photograph",
+  "shape": "split",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "place-carries-it",
+   "split-stage",
+   "uneven-photographs",
+   "dark-room",
+   "hero-object",
+   "page-is-the-object"
+  ],
+  "needs": [],
+  "blueprint": "One field in a deep or pale flat tone, split 5 to 7. Left, columns 1–5: a heading of two to four words at 36–44px; under it the three or four practical facts people ask first (address, times, how to arrive) as plain lines at 18px; then five or six questions as an accordion with no lines between rows, only 28px of space. Each question is a `<summary>` at 20px with a small chevron drawn from two 2px strokes at its right; the open answer sits beneath at 17px in the softer ink, on the same left edge. One filled button and one text link close the column. Right, columns 7–12: a tall photograph (3:4) that bleeds off the top edge of the section and stops 80px short of the bottom, with a second, square photograph a third of its width overlapping its lower-left corner by 40px.",
+  "mobile": "The tall photograph leads at full width, 4:5, with the square one overlapping its bottom-right corner at 38% width. Heading at 30px, facts at 17px, then the accordion at full width with 24px between questions and 44px touch targets. Button full width at the end.",
+  "seenIn": [
+   "opl-sarah-matt-wedding"
+  ]
+ },
+ {
+  "id": "faq-wide-heading-indented-list",
+  "role": "faq",
+  "name": "Wide heading, indented questions",
+  "shape": "list",
+  "tags": [
+   "type-led"
+  ],
+  "directions": [
+   "name-as-monument",
+   "type-only-statement",
+   "uneven-photographs",
+   "hero-object",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "A heading of three to five words at about 5.5vw runs from the left margin on one or two lines and is the only large thing in the section. 80px beneath it the questions begin, indented to start at column 5 and running to column 12, so the left third under the heading stays empty. Each question is a row at 22–24px in the regular weight with a chevron of two 2px strokes at the far right; rows are separated by 36px of space and no rules. Opening a row lays a tile of the one-step tone behind that row and its answer (24px padding, extending 24px beyond the text on both sides) and shows the answer at 17px with a 48ch measure. Six questions. Nothing else shares the screen; the indent against the wide heading is the composition. Build with `<details>`.",
+  "mobile": "The heading sits at 10vw on two lines. Questions lose the indent and run full width at 19px with 28px between rows; the open row keeps its tone tile, now bleeding to both screen edges, with the answer at 16px inside it.",
+  "seenIn": [
+   "opl-neuropelvic-surgery"
+  ]
+ },
+ {
+  "id": "faq-question-index-answer-pane",
+  "role": "faq",
+  "name": "Question index, one answer",
+  "shape": "index",
+  "tags": [
+   "quiet",
+   "ui-led"
+  ],
+  "directions": [
+   "contact-sheet",
+   "product-performs",
+   "quiet-instrument",
+   "pinned-poster",
+   "dense-tiles"
+  ],
+  "needs": [],
+  "blueprint": "Questions on the left, one answer on the right, and the answer changes as the reader moves through the questions. Columns 1–5 list all questions at one size, 18px, with 18px between them; each is preceded by a solid dot 8px across, in the softer ink when idle and in the accent colour when selected. The selected question is in the full ink, the rest in the softer ink. Columns 7–12 hold the answer pane, `position: sticky; top: 120px`: the selected answer at 24–28px in the regular weight, leading 1.3, measure about 30ch, so the answer, not the question, is the large type. Selection follows hover, click and keyboard focus; the pane crossfades in 150ms. The first question is selected on load. A two-word heading in the softer ink is the first line of the list, at the same 18px.",
+  "mobile": "The list runs full width at 18px. Tapping a question colours its dot and opens its answer directly beneath at 19px, indented to line up with the question text; other answers close. There is no pane and no sticky element.",
+  "seenIn": [
+   "opl-weeksync"
+  ]
+ },
+ {
+  "id": "faq-tabbed-index-cards",
+  "role": "faq",
+  "name": "Tabbed index cards",
+  "shape": "stack",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "specimen-catalogue",
+   "borrowed-category",
+   "loud-flat-poster",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "Questions are filed like cards in a drawer. A heading of two to four words at about 4vw sits in columns 3–10. Beneath it, in the same columns, five or six filled panels are stacked so that each overlaps the one above, leaving 96px of every card showing. Each card has a tab on its top edge, 200px wide and 40px tall, stepping right by 150px per card, cut with `clip-path: polygon()` so card and tab are one filled shape. The cards rotate through two or three palette colours. The tab carries the topic in one or two words at 16px; the visible strip under it shows the question at 20px medium. Choosing a card expands it to show the answer at 17px over at most 50ch and pushes the cards below it down. One card is open at a time; the first is open on load.",
+  "mobile": "Cards run full width with the same overlap, 88px of each showing. Tabs shrink to 120px wide and step right by 48px per card. The open card expands in place with its answer at 16px and 20px padding, and the heading leads at 9vw.",
+  "seenIn": []
+ },
+ {
+  "id": "cta-idea-restated-inverted",
+  "role": "cta",
+  "name": "The idea again, inverted",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster",
+   "colour-field"
+  ],
+  "directions": [
+   "type-only-statement",
+   "name-as-monument",
+   "sentence-as-layout",
+   "editorial-report",
+   "loud-flat-poster",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "The close flips the page's colours: ink becomes the ground and the ground becomes the ink, across a full-bleed field at least 90svh tall. The page's opening idea returns as a headline of three to five words at 9–11vw on two lines, leading 0.9, flush left, positioned in the upper two-thirds; it should echo the hero's wording, not repeat it. Along the bottom, on one shared baseline 40px above the edge: one supporting sentence at 20px in columns 1–5 and one rectangular button in the accent colour, right-aligned in columns 10–12, about 56px tall. Nothing else: no image, no second button, no logo. The field's top edge is a hard horizontal line where it meets the section above. If the footer follows on the same inverted field, leave 160px before it so the close still reads as its own screen.",
+  "mobile": "The same inverted field at 80svh. Headline at 15vw on two lines at the top. The sentence sits lower at 17px, and the button spans the full width at the bottom, 56px tall, with 20px margins. Nothing else is added.",
+  "seenIn": [
+   "opl-textmode-overlay",
+   "aww-made-with-gsap-1"
+  ]
+ },
+ {
+  "id": "cta-giant-word-is-the-button",
+  "role": "cta",
+  "name": "One word is the button",
+  "shape": "band",
+  "tags": [
+   "poster",
+   "colour-field"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "colour-chapters",
+   "borrowed-category",
+   "name-as-monument",
+   "type-only-statement",
+   "pinned-poster",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "The entire band is one link. A full-bleed field in the accent colour, about 60svh tall, contains a single verb of four to eight letters set at 24–30vw in the heaviest weight, tight tracking, sized with `clamp()` so it spans the content width on one line with its baseline 24px above the bottom edge. The `<a>` wraps the whole band; on hover and focus the field and the word swap colours instantly. In the top-left corner, at 20px, one sentence says what happens next; in the top-right, an arrow drawn as a simple inline SVG, 48px, points up and right. There is no other button anywhere in the section. In a page with a motif, the band's top corners take the motif's shape (a large radius, or a chamfer cut with `clip-path`). Keep the word honest: the action itself, not a slogan.",
+  "mobile": "The band is 46svh tall. The word is set at whatever size fills the width on one line; choose a shorter verb rather than going below 22vw. Sentence top-left at 17px across two lines, arrow top-right at 32px. The whole band stays tappable.",
+  "seenIn": [
+   "aww-lacoste-ace-breaker",
+   "aww-made-with-gsap-1"
+  ]
+ },
+ {
+  "id": "cta-object-returns",
+  "role": "cta",
+  "name": "The object returns",
+  "shape": "split",
+  "tags": [
+   "object-led",
+   "photo-led"
+  ],
+  "directions": [
+   "hero-object",
+   "specimen-catalogue",
+   "dark-room",
+   "one-motif",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The thing shown in the hero comes back once, from another angle, to close the page. On one flat field 90svh tall, the object's photograph occupies columns 1–8, scaled to about 130% of that area and anchored so the section's bottom and left edges crop it (`overflow: hidden` on the section; on light fields `mix-blend-mode: multiply` removes a white studio background). The text sits small in columns 10–12, vertically centred: a closing line of three to five words at 32–40px, one sentence at 17px, the price or key fact on its own line at 22px, and one rectangular button. Nothing overlaps the object's focal area. Where the page's subject is a shape rather than a photograph, the page's motif takes the object's place at the same scale as a flat filled shape. The closing line is the only heading.",
+  "mobile": "The text block comes first: closing line at 28px, sentence, fact, full-width button. The object follows at 130% of the screen width, shifted so the right and bottom edges crop it, filling about 55svh on the same flat field.",
+  "seenIn": [
+   "opl-dabbit",
+   "opl-monte"
+  ]
+ },
+ {
+  "id": "cta-plain-sentence-one-action",
+  "role": "cta",
+  "name": "A plain sentence, one action",
+  "shape": "stack",
+  "tags": [
+   "quiet"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "contact-sheet",
+   "uneven-photographs",
+   "split-stage",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "The page ends on an almost empty screen. On the page ground, with no band and no panel, one sentence of eight to fourteen words is set at 18–22px in the regular weight, in the full ink, no wider than 34ch, on the same left edge as the page's text column (or centred only if the whole page is centred). 24px beneath it sits one small filled button, about 40px tall with 18px side padding, and optionally one text link beside it on the same baseline. That is all. Above the sentence leave at least 30svh of empty ground and below it at least 20svh before the footer line, so the emptiness reads as decided. The sentence is written as something a person would say, and it names the action plainly. No headline-sized type appears anywhere in this section.",
+  "mobile": "Identical in spirit: the sentence at 18px with 20px margins, the button beneath at its natural width (not full width), 44px tall. Keep 20svh of empty ground above the sentence and 14svh below the button, before the footer line.",
+  "seenIn": [
+   "opl-compile",
+   "opl-rows"
+  ]
+ },
+ {
+  "id": "cta-photograph-text-one-half",
+  "role": "cta",
+  "name": "Last photograph, text beside",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "place-carries-it",
+   "uneven-photographs",
+   "dark-room",
+   "split-stage",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "A final full-bleed photograph, 100vw by 90svh, chosen so its subject sits in the left half and its right half is calm. All text is confined to the right half and never crosses the centre line: in columns 8–12, anchored to the lower third, a closing line of three to five words at about 3.4vw in a light weight, a paragraph of two or three lines at 17px, and one filled button in the paper colour with ink text, about 52px tall. If the image behind the text is not calm enough, darken the whole photograph slightly with `filter: brightness(0.8)` rather than laying a panel behind the words. The section butts directly against a footer in one solid colour, so the photograph's bottom edge is a hard line. No logo, no second action.",
+  "mobile": "The photograph is 100vw by 70svh, cropped to keep its subject. The text leaves the image and sits beneath it on the footer's solid colour: closing line at 28px, paragraph at 17px, full-width button. Image and colour meet at a hard edge.",
+  "seenIn": [
+   "aww-tengile-malamala-collection",
+   "opl-neuropelvic-surgery"
+  ]
+ },
+ {
+  "id": "cta-photo-strip-then-field",
+  "role": "cta",
+  "name": "Three photographs, then a field",
+  "shape": "strip",
+  "tags": [
+   "photo-led",
+   "colour-field"
+  ],
+  "directions": [
+   "contact-sheet",
+   "editorial-report",
+   "uneven-photographs",
+   "place-carries-it",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "Two parts with no gap between them. First, a strip of three photographs butted edge to edge across the full viewport, each one third wide and 40svh tall, `object-fit: cover`, no gutters and no captions; give all three the same treatment. Directly beneath, a band in one flat palette colour, about 44svh tall. In the band, columns 1–7: the closing statement at 26–30px over three lines in the band's assigned ink, with exactly one phrase underlined by a 4px bar (`text-decoration-thickness: 4px; text-underline-offset: 6px`), and that phrase is the link; two lines at 16px follow 32px lower. In the lower-right corner, columns 11–12, a small portrait photograph (4:5, about 150px wide) sits 40px from the band's edges: the person who will answer. There is no button; the underlined phrase is the action.",
+  "mobile": "The strip becomes one full-width photograph at 4:3 with the other two side by side beneath it at half width each, still gutterless. The band follows: statement at 22px, the two small lines, and the portrait at 96px wide in the bottom-right corner.",
+  "seenIn": [
+   "opl-nia-creative"
+  ]
+ },
+ {
+  "id": "cta-reply-card",
+  "role": "cta",
+  "name": "The reply card",
+  "shape": "split",
+  "tags": [
+   "object-led"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "borrowed-category",
+   "dark-room",
+   "specimen-catalogue",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "The invitation to act is a printed card lying on the page. On a dark or strongly coloured flat field about 80svh tall, a paper-coloured panel 44vw wide with 7:5 proportions sits in columns 6–12, rotated two degrees, with its lower edge hanging 60px past the section's bottom so the section crops it. On the card, with 48px padding, everything is centred the way stationery is: a heading of two to four words at 32px, one or two lines at 17px, then the action as a solid bar across the card's full inner width, 56px tall, in the ink colour with paper-coloured text. Columns 1–4 hold only a short paragraph at 20–24px in the field's light ink, bottom-aligned 64px above the edge. The card is a plain filled rectangle with square corners and no outline; its rotation and crop make it an object.",
+  "mobile": "The paragraph comes first at 20px. The card follows at 90% width, tilted one degree, centred, its bottom edge still cropped by the section. Heading at 24px, lines at 16px, and the action bar 52px tall across the full inner width of the card.",
+  "seenIn": [
+   "opl-hebbia",
+   "opl-monte",
+   "opl-specia1ne"
+  ]
+ },
+ {
+  "id": "cta-blank-in-the-sentence",
+  "role": "cta",
+  "name": "A sentence with a blank",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "ui-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "product-performs",
+   "type-only-statement",
+   "one-motif",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "The closing sentence has a gap in it, and the gap is the form. A sentence of five to eight words is set at about 6vw on two lines, flush left across columns 1–11; there is no separate heading. Where the reader's email (or name, or city) belongs, an `<input>` sits inline on the baseline: a filled block of the one-step tone, exactly one line-height tall and about 7em wide, with the placeholder in the same face and size in the softer ink, no border, and the page's radius or motif corner. The sentence's last word is the submit `<button>`, set in the same type on a block of the accent colour of the same height. Field and button use `em` units so they scale with the sentence. One line at 16px under the sentence, in the softer ink, says what happens after sending. Nothing else is in the section.",
+  "mobile": "The sentence is set at 10vw on two lines; the input drops to a line of its own between them at full width and one line-height tall, and the final word, as the button, ends the second line. The explaining line follows at 15px.",
+  "seenIn": [
+   "opl-shelf"
+  ]
+ },
+ {
+  "id": "cta-action-tile-row",
+  "role": "cta",
+  "name": "The action tile",
+  "shape": "grid",
+  "tags": [
+   "dense",
+   "colour-field"
+  ],
+  "directions": [
+   "dense-tiles",
+   "colour-chapters",
+   "specimen-catalogue",
+   "one-motif",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "The close is one row of the board. Three filled tiles sit side by side with 8–14px gaps, all 360px tall and sharing one radius: a wide centre tile spanning columns 3–10 in the accent colour, flanked by two narrow tiles (columns 1–2 and 11–12) that run off the left and right viewport edges, as if the row had been cropped from a longer one. The centre tile holds, left-aligned and vertically centred with 40px padding: a heading of three to five words at 40px, two lines at 17px, and the action. The action is either one rectangular button or an email field 420px wide in the paper colour with the submit button nested inside its right end. The flanking tiles hold no text: one is a photograph covering the tile, the other a flat palette colour. No shadows, no outlines.",
+  "mobile": "The accent tile runs full width, about 300px tall, heading at 28px, field and button stacked at full width. The two flanking tiles follow beneath as a pair, each half width and 120px tall, with the same gap and the same radius.",
+  "seenIn": [
+   "opl-shelf"
+  ]
+ },
+ {
+  "id": "footer-columns-then-wordmark",
+  "role": "footer",
+  "name": "Columns above, wordmark below",
+  "shape": "stack",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "name-as-monument",
+   "place-carries-it",
+   "uneven-photographs",
+   "dark-room",
+   "editorial-report",
+   "type-only-statement",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The footer inverts ground and ink and fills a whole viewport (min-height 100svh), arranged as three rows in a grid (auto 1fr auto). Top row, 40px from the edge: four small columns on the 12-column grid (address, navigation, social, hours or contact), each a plain list at 15–16px with its first line in the full ink and the rest in the softer ink. Middle row: empty. Bottom row: the wordmark alone, sized to run from the left margin to the right margin on one line. Set it as inline SVG text with a `viewBox` fitted to the word and `width: 100%`, or tune `font-size` in `vw` to the letter count, so it never wraps; its baseline sits 20px above a single line of legal text at 13px. With `position: sticky; bottom: 0` and a lower `z-index` than the page, the last section slides away to uncover it.",
+  "mobile": "Columns become two by two at 15px with 32px between rows, at the top. A gap of about 20svh follows. The wordmark spans the full width at the bottom; a name longer than ten letters stacks on two lines, each fitted to the width. Legal line beneath at 12px.",
+  "seenIn": [
+   "aww-kononenko-architectural-bureau",
+   "aww-zeroz-brand-site",
+   "opl-eagles-nest",
+   "aww-white-desert",
+   "opl-lovably"
+  ]
+ },
+ {
+  "id": "footer-wordmark-first-places-below",
+  "role": "footer",
+  "name": "Name first, places under it",
+  "shape": "list",
+  "tags": [
+   "type-led"
+  ],
+  "directions": [
+   "name-as-monument",
+   "editorial-report",
+   "type-only-statement",
+   "colour-chapters",
+   "pinned-poster",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "The wordmark opens the footer instead of closing it. On a full-bleed field in the page's inverse or final chapter colour, the name spans the full content width as the first thing, its cap line pushed 8% above the footer's top edge so the tops of the letters are sliced off by the section (`overflow: hidden` and a negative top margin in `em`). 72px beneath, a two-part row: columns 1–5 list the places or ways to reach the studio (cities, or email and telephone), one per line at 32–36px in the accent ink, each a link; columns 7–12 hold three columns of small links at 15px, top-aligned with the first place. A final row 96px lower carries the legal line at the left and a back-to-top text link at the right, both 13px. The field is about 90svh tall, and nothing sits between the wordmark and the row but space.",
+  "mobile": "The sliced wordmark stays at the top, fitted to the width. Places follow as a list at 26px, then the link columns two across at 15px. Legal line and back-to-top link share the last row at 12px, at opposite margins.",
+  "seenIn": [
+   "aww-alethia",
+   "aww-hilden-kaira",
+   "aww-px-push",
+   "aww-pensatori-irrazionali"
+  ]
+ },
+ {
+  "id": "footer-invitation-over-cropped-wordmark",
+  "role": "footer",
+  "name": "Invitation over a cropped name",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "name-as-monument",
+   "borrowed-category",
+   "pinned-poster",
+   "type-only-statement",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "Close and footer in one full-viewport field of the inverse colour. Upper third, columns 1–7: a two-line invitation at about 5vw, three to five words, with one filled rectangular button beneath it. At columns 10–12, top-aligned with the invitation, three or four social or contact links stacked at 16px. The wordmark fills the bottom of the screen at 26–30vw on one line, `white-space: nowrap`, heavier and larger than the viewport can hold: it is pushed down with `transform: translateY(30%)` so the bottom edge cuts through the letters, and a long name also runs off the right edge. `overflow: hidden` on the footer does the cropping. One row of credits and legal links at 13px sits directly above the wordmark's cap line, spread left and right. The cropped name must be recognisable from its upper two-thirds alone; test that it is.",
+  "mobile": "Invitation at 11vw on two lines at the top with a full-width button. Links follow as one row of words at 15px. The wordmark sits at 34vw at the bottom, cropped by both the bottom and the right edge, with the legal row above it at 12px.",
+  "seenIn": [
+   "aww-nothin",
+   "opl-goodgoodgreat",
+   "opl-marina-rachello",
+   "aww-butter"
+  ]
+ },
+ {
+  "id": "footer-wordmark-on-last-photograph",
+  "role": "footer",
+  "name": "Name across the last photograph",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "place-carries-it",
+   "uneven-photographs",
+   "dark-room",
+   "hero-object",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "The footer is the page's last photograph, full-bleed at 100vw by 100svh, darkened evenly with `filter: brightness(0.62)` so paper-coloured type reads everywhere on it. Three layers of text sit on the image. Top row, 32px from the edge: a short link list at 16px at the left margin and contact details at the right margin, each no wider than three columns. Mid-height is left to the photograph. Along the bottom, the wordmark runs the full width in the paper colour, letters about 12–20vw tall depending on the name's length, baseline 56px above the edge; under it one line of legal text at 13px. Choose an image whose interest is in its middle band, since the top and bottom carry text. No panel, no box and no colour block separates the footer from the image: the photograph is the footer.",
+  "mobile": "The photograph is 100vw by 88svh, cropped to its strongest vertical slice. Links stack at the top-left at 16px, contact beneath them. The wordmark is fitted to the width along the bottom, with the legal line under it at 12px.",
+  "seenIn": [
+   "aww-seasats",
+   "aww-alethia",
+   "opl-vestris"
+  ]
+ },
+ {
+  "id": "footer-mark-built-from-shapes",
+  "role": "footer",
+  "name": "The mark, built large",
+  "shape": "band",
+  "tags": [
+   "colour-field",
+   "object-led"
+  ],
+  "directions": [
+   "one-motif",
+   "specimen-catalogue",
+   "colour-chapters",
+   "loud-flat-poster",
+   "dense-tiles",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "On a flat colour field, the brand closes the page as a construction rather than as set type. Across the full content width and about 34svh tall, the wordmark is built from blocks: each letter is knocked out of its own solid rectangle in a palette colour, the rectangles differ in height (60–100% of the band) and butt together with 4px gaps, bottoms on one line. Where the project has a simple geometric mark or motif, enlarge that instead, drawn as inline SVG from flat rectangles, circles and quarter-arcs with the same 4px gaps. Below, 56px lower: four columns of plain links at 15px across columns 1–8, and two addresses or contact lines in columns 9–12. A last row carries the copyright at the left and one small filled button at the right. Space and the block construction do all the separating.",
+  "mobile": "The block wordmark spans the full width at about 22svh tall; a long name breaks into two rows of blocks. Link columns go two across at 15px, contact lines beneath at full width, then copyright and the small button on one row.",
+  "seenIn": [
+   "aww-house-of-honey-1",
+   "opl-woblo",
+   "aww-2xa-studio",
+   "opl-uglycash"
+  ]
+ },
+ {
+  "id": "footer-single-quiet-line",
+  "role": "footer",
+  "name": "A single quiet line",
+  "shape": "strip",
+  "tags": [
+   "quiet"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "contact-sheet",
+   "product-performs",
+   "split-stage",
+   "dark-room",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "No footer block at all. After at least 30svh of empty page ground, one baseline 30px above the bottom edge carries three items in the page's ordinary small text size (14–16px), the same size and weight as the navigation: at the left margin, what this is in three or four words; centred, two to five links separated by 24px of space; at the right margin, the year and a privacy link. Use a three-column grid (1fr auto 1fr) so the centre group is truly centred whatever the side lengths. No logo, no background change, no line above it, no columns. Links are in the full ink; the rest in the softer ink. If the page has a narrow text column, the three items may instead sit on that column's left edge as one wrapped line. The restraint only works if the page above has already made its invitation.",
+  "mobile": "Three short lines at 14px on the left margin with 8px between them: the description, the links on one wrapped line, then year and privacy. Links stay in the full ink. Leave 20svh of empty ground above and 24px below.",
+  "seenIn": [
+   "aww-studio-k95-3",
+   "aww-gil-huybrecht",
+   "opl-rows",
+   "opl-compile",
+   "opl-tiny-computer-co"
+  ]
+ },
+ {
+  "id": "footer-contact-set-large",
+  "role": "footer",
+  "name": "Contact as the headline",
+  "shape": "statement",
+  "tags": [
+   "colour-field",
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "colour-chapters",
+   "loud-flat-poster",
+   "type-only-statement",
+   "borrowed-category",
+   "sentence-as-layout",
+   "editorial-report",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "A full-bleed field in one saturated palette colour, at least 90svh tall. Top row, 40px from the edge: two or three short notes at 15px in columns 1–7 (address, hours, a one-line description) and a back-to-top text link at the right margin. Then a tall empty gap. In the lower half, the way to get in touch is the display line: the telephone number or the email address itself, set at 8–9vw, flush left, hard against the margin, as one link. An email address may break once, before the @, giving two lines. Size it with `clamp()` so the longest line fills at least 80% of the width. Under it, one row of small text at 14px spread across three positions: links at the left, credits in the centre, city and year at the right. The wordmark appears only small, in the top row.",
+  "mobile": "Notes stack at the top at 15px. The contact line sits in the lower half at 12vw; a telephone number stays on one line, an email breaks before the @ and is sized so each half fits the width. The meta row becomes three stacked lines at 13px.",
+  "seenIn": [
+   "aww-era-residence",
+   "aww-coffeetech-r",
+   "opl-ohhmydesign",
+   "opl-mammut-studios",
+   "opl-belgrade-architecture"
+  ]
+ },
+ {
+  "id": "footer-back-of-the-card",
+  "role": "footer",
+  "name": "The back of the card",
+  "shape": "stack",
+  "tags": [
+   "object-led",
+   "quiet"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "specimen-catalogue",
+   "borrowed-category",
+   "hero-object",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "The footer is the reverse side of the page's artefact, laid out as the back of a postcard. A paper-coloured panel spans columns 2–11 on the contrasting ground, about 420px tall, its top edge cut into a row of twelve semicircular scallops (an inline SVG path or `clip-path`, each scallop about 100px wide). The panel is divided by space into two halves. Left half: a short sign-off of two to four words at 32px, then two or three lines at 16px, written like a message. Right half: the address block, four left-aligned lines at 18px with 12px between them, each line a link (email, telephone, street, social); above it in the top-right corner, a stamp: one small photograph, 3:4 and 88px wide, with a 6px paper-coloured margin. Along the panel's bottom edge, a single centred line at 12px gives the copyright like a printer's imprint.",
+  "mobile": "The panel runs full width with six scallops across its top edge. The stamp sits top-right at 64px wide; the sign-off and message come first, then the address lines at 17px beneath them, then the imprint line centred at 12px.",
+  "seenIn": [
+   "opl-zara-webb",
+   "opl-britt-taylor",
+   "opl-sarah-matt-wedding",
+   "opl-transport"
+  ]
+ },
+ {
+  "id": "footer-row-of-tiles",
+  "role": "footer",
+  "name": "A footer of tiles",
+  "shape": "grid",
+  "tags": [
+   "dense",
+   "colour-field"
+  ],
+  "directions": [
+   "dense-tiles",
+   "colour-chapters",
+   "product-performs",
+   "contact-sheet",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "The footer is the last two rows of a board: filled tiles with 8px gaps and 8–12px outer margins, every cell used. Upper row, each tile 220px tall: a statement tile in columns 1–4 with one sentence at 24px top-left and the legal text at 12px bottom-left; a navigation tile in columns 5–7 with a plain list at 16px; a tile in columns 8–9 giving the city and local time as text; an email tile in columns 10–12 with the address at 20px as a link, bottom-left. Lower row, 320px tall: a tile in the ink colour spanning columns 1–8 with the wordmark set large (about 9vw) and centred, and a tile in the accent colour in columns 9–12 with a two-to-four-word invitation top-left at 28px and an arrow, drawn as inline SVG with 4px strokes, in its bottom-right corner; the whole accent tile is a link.",
+  "mobile": "Two columns of tiles with 6px gaps: the wordmark tile full width first at 160px tall, the accent tile full width next, then navigation and email side by side, then time and statement. Every tile keeps 20px padding and top-left text.",
+  "seenIn": [
+   "aww-aspen-search",
+   "aww-oimachi"
+  ]
+ },
+ {
+  "id": "footer-photograph-and-large-menu",
+  "role": "footer",
+  "name": "Photograph half, menu half",
+  "shape": "split",
+  "tags": [
+   "photo-led",
+   "type-led"
+  ],
+  "directions": [
+   "split-stage",
+   "loud-flat-poster",
+   "hero-object",
+   "uneven-photographs",
+   "pinned-poster",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "A split footer one viewport tall. The left half is a single photograph filling columns 1–6 edge to edge, cropped hard by the left and bottom viewport edges: a close crop of the page's main subject, larger than it appeared anywhere above. The right half, on a flat field, is the site's menu set large: five or six section names stacked as links at about 2.6vw bold, 28px apart, starting at column 8 and 80px from the top. Rows are separated by space only; on hover a row's label shifts right by 12px and the others drop to the softer ink. Under the menu, 64px lower, two short blocks at 15px side by side: contact and social. The legal line runs along the very bottom of the right half at 12px. The wordmark sits small at the top of the right half, on the menu's left edge.",
+  "mobile": "The photograph leads at full width and 50svh, cropped tight. The menu follows on the flat field at 8vw per item with 20px between items, then contact and social stacked at 15px, then the legal line at 12px. The wordmark sits small above the menu.",
+  "seenIn": [
+   "aww-trevor-noah",
+   "aww-monolog"
+  ]
+ },
+ {
+  "id": "intro-right-half-paragraph",
+  "role": "intro",
+  "name": "Right-half paragraph, lone photo",
+  "shape": "split",
+  "tags": [
+   "type-led",
+   "quiet"
+  ],
+  "directions": [
+   "uneven-photographs",
+   "dark-room",
+   "place-carries-it",
+   "editorial-report",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "No heading. On a 12-column grid with 5vw margins, one statement paragraph of 45–70 words occupies columns 7–12 only, set at clamp(24px, 2.2vw, 34px) with leading 1.25 and a first-line indent of 3em. Its top edge sits 18vh below the section top. Columns 1–6 stay empty except for a single square photograph, 20vw wide, in columns 1–3, placed so its top aligns with the paragraph's last line and it hangs below the text by most of its height. A five-line note at 14px, 180px wide, sits in columns 1–2, 96px beneath the photograph. Section padding is 160px top and bottom. Nothing is centred: the paragraph's left edge is the midpoint of the page, and later text blocks on the page may reuse that line. Holds one paragraph, one photograph and one note.",
+  "mobile": "The paragraph comes first at 22px, full width with 20px margins and no indent. The photograph follows at 62% width, pushed to the right margin, in a 4:5 crop instead of square. The small note sits to its left, bottom-aligned with the photograph, in the remaining 30% of the width.",
+  "seenIn": [
+   "aww-tengile-malamala-collection",
+   "aww-normal-is-boring",
+   "aww-px-push",
+   "aww-monolog"
+  ]
+ },
+ {
+  "id": "intro-edge-to-edge-paragraph",
+  "role": "intro",
+  "name": "Edge-to-edge heavy paragraph",
+  "shape": "band",
+  "tags": [
+   "type-led",
+   "colour-field",
+   "poster"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "colour-chapters",
+   "type-only-statement",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "A full-bleed flat colour field, at least 90svh tall, filled by one paragraph and nothing else. The paragraph is 35–55 words in the heaviest weight at clamp(36px, 5vw, 76px), leading 0.98, left-aligned, running from a 16px left margin to a 16px right margin so its lines reach both edges; use `text-wrap: pretty` and no hyphenation. No heading: the paragraph is the section. In two or three places a word-sized gap (an inline-block spacer 2.5em wide) opens inside a line. One small photograph, 9vw wide at 4:5 with square corners, is absolutely placed over the first two lines, rotated 4 degrees, covering parts of two words; a second chip at 6vw may sit in one of the gaps. Text takes the field's assigned ink at full contrast. The field butts against the section above with no space between them. On a page without images, drop the chips and close the gaps.",
+  "mobile": "The same field and weight at 9.5vw with leading 1.0 and 14px margins, so each line holds two or three words and the paragraph runs about fourteen lines. Remove the inline gaps. The photograph chip grows to 26vw and sits over the right end of lines three and four, still tilted.",
+  "seenIn": [
+   "aww-warm-fuzzy",
+   "opl-belgrade-architecture"
+  ]
+ },
+ {
+  "id": "intro-inline-thumbnails",
+  "role": "intro",
+  "name": "Statement with inline thumbnails",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "object-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "specimen-catalogue",
+   "one-motif",
+   "product-performs",
+   "hero-object"
+  ],
+  "needs": [],
+  "blueprint": "A centred statement of 18–28 words, four lines at clamp(32px, 4.2vw, 62px), medium or bold weight, leading 1.12, in a block 60–66% of the viewport wide with 22vh of empty ground above and below. Three to five small frames sit inline between words: each is an `inline-block` 0.85em tall and 0.85–1.3em wide, `vertical-align: -0.1em`, radius 0.14em, holding a tightly cropped photograph (or a crop of real interface) of the thing the neighbouring word names. Frames are part of the line, never floating over it, with 0.12em of space either side. No heading above and no paragraph below; the statement is set as a `p`. Directly under the section the page may split into two flat colour halves or begin the first product row, so the thumbnails read as a preview of what follows. On a motif-driven page every frame takes the motif's shape.",
+  "mobile": "Left-aligned instead of centred, at 8vw with leading 1.15, about seven lines inside 20px margins. Keep at most three inline frames, each exactly one cap-height tall, and make sure none lands at the start of a line. Vertical padding drops to 96px.",
+  "seenIn": [
+   "aww-noho",
+   "aww-butter",
+   "opl-sand-studio"
+  ]
+ },
+ {
+  "id": "intro-narrow-column",
+  "role": "intro",
+  "name": "Narrow column, empty field",
+  "shape": "stack",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "split-stage",
+   "hero-object",
+   "name-as-monument",
+   "contact-sheet",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "A single text column 300–340px wide, its left edge at 15% of the viewport width, starting 64px below the section top. It holds four or five short paragraphs at 15–16px with leading 1.5 and one blank line between them; the first paragraph is in medium weight and full ink, the rest in regular weight and the soft ink. No heading, no image, no button; one underlined text link may end the last paragraph. The remaining three-quarters of the 1440 screen is untouched ground, and the section is only as tall as the text plus 160px of padding below. The column's left edge must match a line used elsewhere on the page (the wordmark's left edge or a later column). Where the page has a large object or a fixed photograph, this column is the small text beside it. Holds 90–150 words comfortably.",
+  "mobile": "The column becomes 78% of the width, left-aligned at the 20px margin, so a strip of empty ground remains on the right as a deliberate margin. Text stays at 15–16px with the first paragraph in medium weight. Padding is 72px above and 96px below.",
+  "seenIn": [
+   "opl-when-you-wish-upon-a-starboy",
+   "opl-deeo-studio-2",
+   "aww-vero-new-york"
+  ]
+ },
+ {
+  "id": "intro-title-note-facts",
+  "role": "intro",
+  "name": "Title, note, facts row",
+  "shape": "split",
+  "tags": [
+   "type-led",
+   "quiet"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "editorial-report",
+   "name-as-monument",
+   "uneven-photographs",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "First row: a heading of two to four words in a light weight at clamp(44px, 5vw, 76px) sits on the left margin in columns 1–6; a three-line paragraph at 16px, 260px wide, sits in columns 10–12 with its last line on the heading's baseline. Columns 7–9 stay empty. 120px lower, a second row sets three or four facts (a date, a time, a place, a price) as large light text at clamp(28px, 3vw, 44px), spread across the 12 columns with `justify-content: space-between`. Each fact has a one-line explanation at 14px directly under it in the soft ink, left-aligned to the fact. Facts are separated only by the space between them, so the row reads like the line of times on a printed programme. A photograph may start under the right half of the facts row, 5 columns wide at 4:3. Padding 140px top, 120px bottom.",
+  "mobile": "Heading at 11vw on the left margin; the note follows directly under it at 16px, full width. The facts become a two-column grid with a 32px row gap, each fact at 26px with its explanation beneath. Any photograph goes last, full width.",
+  "seenIn": [
+   "opl-sarah-matt-wedding",
+   "aww-no-art"
+  ]
+ },
+ {
+  "id": "intro-staircase-statement",
+  "role": "intro",
+  "name": "Staircase statement",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster",
+   "colour-field"
+  ],
+  "directions": [
+   "colour-chapters",
+   "loud-flat-poster",
+   "type-only-statement",
+   "dark-room",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "On a flat dark or saturated field one sentence of 12–18 words is broken into five short lines at clamp(36px, 4.4vw, 64px), bold, leading 1.02, marked up as one paragraph (a statement, so it may run past two lines at this size). Each line starts further right than the one above: indents of 0, 6, 12, 18 and 24vw from a 4vw left margin, set with `padding-left` per line, so the block descends like stairs and ends near the 75% mark. Each line takes its own flat colour from the palette, or lines alternate between two inks. The block is vertically centred in a section 100svh tall. The right quarter (columns 10–12) holds two stacked photographs, each 3:2 and 20vw wide with a 16px gap, top-aligned with the first line. No heading; a two-line note at 15px sits at the bottom-left margin, on the first line's left edge. On a page without images, leave the right quarter empty.",
+  "mobile": "Five lines at 9vw (35px on a 390px screen) with indents of 0, 5, 10, 15 and 20vw, so the stair still reads on a 390px screen. The two photographs follow below as one row of two equal 3:2 frames. The note sits last, left-aligned.",
+  "seenIn": [
+   "aww-pp-neue-montreal",
+   "aww-trevor-noah",
+   "aww-izanami"
+  ]
+ },
+ {
+  "id": "intro-heading-captions-panorama",
+  "role": "intro",
+  "name": "Heading captions a panorama",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "type-led"
+  ],
+  "directions": [
+   "place-carries-it",
+   "hero-object",
+   "uneven-photographs",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "The section is exactly 100svh. Its top third holds a two-line heading of three to six words at clamp(48px, 6.5vw, 96px) with leading 0.95, either centred or flush left on the page margin. 28px beneath the heading sit two small captions side by side, each two lines at 13px and 150px wide with a 48px gap, aligned to the heading (centred as a pair, or both starting at its left edge). 40px below them a full-bleed photograph begins and runs off the bottom of the viewport: it is 100vw wide at 21:9 or wider, and only its top 55–60svh is visible before the fold, the rest arriving with scroll. The heading therefore reads as a large caption to the picture. On an object-led page the image is the object on a flat dark panel inset by the page margin instead of bleeding to the edges.",
+  "mobile": "Heading at 12vw on two lines, left-aligned, taking the top 30% of the screen. The two captions merge into one four-line block at 14px. The photograph begins at 45% of the screen height in a 4:5 crop, full-bleed, and runs off the bottom.",
+  "seenIn": [
+   "aww-kononenko-architectural-bureau",
+   "aww-nothin",
+   "opl-kereliott"
+  ]
+ },
+ {
+  "id": "intro-statement-tiles",
+  "role": "intro",
+  "name": "Statement tiles",
+  "shape": "mosaic",
+  "tags": [
+   "dense",
+   "colour-field",
+   "type-led"
+  ],
+  "directions": [
+   "dense-tiles",
+   "editorial-report",
+   "colour-chapters",
+   "contact-sheet",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "A board of filled tiles with 8px gaps and 8px outer margins: 12 columns by two rows of 38svh each. Tile A, columns 1–8 across both rows, is the darkest tile and carries a slogan of two to four words in capitals at clamp(64px, 9vw, 132px), leading 0.86, on two lines, set hard against the tile's 20px left padding and bottom-aligned. Tile B, columns 9–12 of row one, is a pale tile with one word or figure at the same size, bottom-aligned, cropped by `overflow: hidden` if it runs long. Tile C, columns 9–12 of row two, is a photograph covering the tile. Below the board a fourth tile spans all 12 columns in the page ground colour: its left half is empty and a text of 90–130 words at 22–24px with leading 1.35 runs in columns 7–12 with 40px padding. No separate heading: the slogan in tile A is the heading.",
+  "mobile": "A two-column board with 6px gaps. The slogan tile spans both columns at 46svh with type at 17vw on two lines; the word tile and the photograph tile sit side by side as squares; the long text tile spans both columns with 20px padding at 18px.",
+  "seenIn": [
+   "aww-aspen-search"
+  ]
+ },
+ {
+  "id": "intro-lead-over-four-columns",
+  "role": "intro",
+  "name": "Lead line over four columns",
+  "shape": "grid",
+  "tags": [
+   "type-led",
+   "dense",
+   "quiet"
+  ],
+  "directions": [
+   "contact-sheet",
+   "quiet-instrument",
+   "editorial-report",
+   "type-only-statement",
+   "product-performs",
+   "dense-tiles"
+  ],
+  "needs": [],
+  "blueprint": "Two parts on one 12-column grid with 20px margins. First, a lead paragraph of 30–40 words spans all 12 columns at clamp(22px, 2.2vw, 32px), regular weight, leading 1.2: three lines that read as the opening of a text, with no heading before it. 72px below, four equal columns (three grid columns each, 24px gutters) carry small text at 14–15px with leading 1.45. Each column is one paragraph of 40–70 words that opens with a bold run-in phrase of two or three words in full ink, the rest continuing on the same line in the soft ink. Columns top-align and end ragged at different depths. No cards, icons or dividers; the bold run-ins are the only markers. The four columns answer four plain questions: who, what, where, how to reach them. Padding is modest, 96px top and bottom, so a sheet of images can start straight after.",
+  "mobile": "The lead paragraph at 20px, full width. The four columns become a two-by-two grid with a 20px gutter and 40px row gap at 14px; if any paragraph exceeds 60 words, switch to one column with 32px between paragraphs. Run-in phrases stay bold.",
+  "seenIn": [
+   "opl-april-leihuanani-evangelista",
+   "aww-2xa-studio",
+   "opl-wild-as"
+  ]
+ },
+ {
+  "id": "intro-pinned-sentence-photos-pass",
+  "role": "intro",
+  "name": "Pinned sentence, photographs pass",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "type-led"
+  ],
+  "directions": [
+   "pinned-poster",
+   "uneven-photographs",
+   "dark-room",
+   "sentence-as-layout",
+   "place-carries-it"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper 300svh tall. Inside it a `position: sticky; top: 0` layer of 100svh holds one sentence of 8–14 words, centred, three lines at clamp(36px, 4.6vw, 68px), leading 1.1, in a block 62% of the viewport wide. The sentence is a paragraph, not a heading; it is white with `mix-blend-mode: difference` (or a solid ink that reads over every photograph) and has a higher `z-index` than the images. Behind it, three photographs sit in normal flow at different sizes and sides and scroll past the fixed sentence: a 4:5 portrait 24vw wide with its left edge at 6vw; 70svh lower a 16:10 landscape 38vw wide touching the right margin; 70svh lower a 1:1 frame 18vw wide starting at 30vw. Each crosses the sentence once. When the wrapper ends, the sentence releases and scrolls away with the last photograph. No scroll hijacking.",
+  "mobile": "Wrapper 260svh. The sentence pins at 40% of the screen height at 8.4vw, four or five lines, with 20px margins. Photographs alternate: 64% wide on the left margin, 78% wide on the right margin, then 52% on the left, with 50svh between them.",
+  "seenIn": [
+   "opl-the-deep-end",
+   "aww-revelatio-studio"
+  ]
+ },
+ {
+  "id": "about-portrait-drop-cap",
+  "role": "about",
+  "name": "Portrait as drop cap",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "photo-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "name-as-monument",
+   "dark-room",
+   "editorial-report",
+   "contact-sheet"
+  ],
+  "needs": [],
+  "blueprint": "No heading. One biography paragraph of 50–80 words is set large at clamp(24px, 2.5vw, 38px), regular weight, leading 1.2, across columns 3–12 of the grid. A square portrait is floated at the paragraph's start with `float: left`: its side equals three lines of text (3.6em), with 0.5em of space to its right, so the first three lines wrap beside it and the fourth returns to the paragraph's left edge, like a drop capital. Square corners. The person's name, the first words of the paragraph, is in full ink; the rest may be in a softer ink with linked names in full ink and underlined. A second paragraph follows after one blank line in the soft ink at the same size. Columns 1–2 hold three short facts (place, since when, how to reach) at 14px, top-aligned with the portrait. Section padding 140px.",
+  "mobile": "Text at 22px with leading 1.25, full width. The portrait keeps its float but grows to four lines tall, about 110px square. The three facts move below the second paragraph as a single row of three small blocks at 13px.",
+  "seenIn": [
+   "aww-haoqi-design",
+   "aww-coffeetech-r",
+   "aww-monolog"
+  ]
+ },
+ {
+  "id": "about-side-facts-wide-paragraph",
+  "role": "about",
+  "name": "Side facts, wide paragraph",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "quiet"
+  ],
+  "directions": [
+   "editorial-report",
+   "name-as-monument",
+   "type-only-statement",
+   "quiet-instrument",
+   "contact-sheet"
+  ],
+  "needs": [],
+  "blueprint": "Two rows share one vertical line at 34% of the viewport width. Row one: in a 160px column at the left margin, three label and value pairs stack with 20px between them, each a label in the soft ink with its value beneath in full ink, all at 13px (founded, based in, team size). From the 34% line a five-line paragraph at clamp(20px, 1.7vw, 26px), leading 1.35, runs to 90% of the width. Row two starts 120px lower and repeats the logic for the record of the practice: one plain word at 13px at the far left (awards, press, clients), then from the 34% line two list columns, each 260px wide with a 64px gutter, at 13px with 10px between lines: name at the left, year at the right in the soft ink. No heading; the paragraph opens the section. Each list comfortably holds 6–12 lines. No photographs are needed.",
+  "mobile": "Everything aligns to the left margin. The paragraph comes first at 19px. The three label and value pairs follow as a two-column grid at 14px. The two record lists stack with 40px between them, each opened by its plain word in full ink.",
+  "seenIn": [
+   "aww-kononenko-architectural-bureau",
+   "opl-brikkenco"
+  ]
+ },
+ {
+  "id": "about-team-colour-tiles",
+  "role": "about",
+  "name": "Team on colour tiles",
+  "shape": "grid",
+  "tags": [
+   "photo-led",
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "specimen-catalogue",
+   "contact-sheet",
+   "colour-chapters",
+   "dense-tiles",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "A one-line heading of two or three words at 28–36px sits top-left; nothing sits to its right. 40px below, a grid of portrait tiles: six columns with 12px gaps across the full content width for 12 or more people, four columns for 4–8. Every tile is a 4:5 photograph treated identically so mixed-quality headshots look like one set: `filter: grayscale(1) contrast(1.15)` with `mix-blend-mode: multiply` over a flat tint, the tints rotating through four palette colours in a fixed order. Square corners or one small radius. Under each tile, left-aligned to its edge with 10px of space: the name at 15px in full ink and the role at 13px in the soft ink, up to two lines. Rows are 36px apart. A leftover tile in the last row stays at the left; it is not centred. No hover lift and no social icons.",
+  "mobile": "Two columns with 8px gaps; tiles stay 4:5 with names at 14px beneath. For more than ten people, switch to three columns and show the name only. The heading sits above at 24px. Tints keep their rotation, so the grid reads as a checkerboard of colours.",
+  "seenIn": [
+   "opl-compile",
+   "opl-select26",
+   "opl-alterg-resources"
+  ]
+ },
+ {
+  "id": "about-highlighted-columns",
+  "role": "about",
+  "name": "Two columns, highlighted words",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "colour-field"
+  ],
+  "directions": [
+   "type-only-statement",
+   "loud-flat-poster",
+   "colour-chapters",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The story is set as text far larger than anything else on the page: 110–160 words at clamp(22px, 2.1vw, 32px), tight leading 1.18, in the soft ink, flowing through two columns that fill the full width between 24px margins (`columns: 2; column-gap: 32px`, justified, with hyphenation on). No heading. The name at the start is in full ink. Six or seven single words or short phrases carry a flat highlighter background in three or four palette colours, built with an inline `background-color`, `box-decoration-break: clone` and 0.1em of horizontal padding; they mark the facts a scanning reader wants (a place, a year, a client, a skill). The final short sentence is highlighted entire in the strongest colour and is the link to contact. Padding 120px top and bottom. No image and no portrait.",
+  "mobile": "One column at 20px, left-aligned and unjustified, leading 1.25, with 18px margins. Keep four or five highlights so no line carries two. The final highlighted sentence sits on its own line with 24px above it and works as a full-width tap target.",
+  "seenIn": [
+   "opl-adam-ho"
+  ]
+ },
+ {
+  "id": "about-founders-letter",
+  "role": "about",
+  "name": "Founder's letter",
+  "shape": "stack",
+  "tags": [
+   "quiet",
+   "type-led",
+   "object-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "page-is-the-object",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "A letter in a centred column 520px wide with at least 160px of empty ground above and below. At the column's top-left, a round portrait 44px across. 28px below it, four or five short paragraphs at 16–17px with leading 1.55, each two to four lines and separated by one blank line, written in the first person. No heading. The sign-off is the writer's name at 22px in the text face's italic, with the role at 14px in the soft ink beneath it. One phrase in the letter may carry a flat marker-colour background. Variant for a page built as an object: the letter sits on a filled paper-colour sheet 640px wide with 60px padding on a contrasting ground, square corners, its bottom edge cut into small scallops with `clip-path`, and below a row of 5px round dots a tear-off strip 72px tall that carries the email address.",
+  "mobile": "The column takes the full width with 24px margins; text at 16px, portrait 40px. In the sheet variant the sheet spans edge to edge with 24px padding and keeps its shaped bottom edge; the tear-off strip stacks the email above a full-width button.",
+  "seenIn": [
+   "opl-mat",
+   "opl-heyclicky",
+   "opl-rafael-derolez-2026"
+  ]
+ },
+ {
+  "id": "about-pinned-title-portraits",
+  "role": "about",
+  "name": "Pinned title, portraits pass",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "poster",
+   "type-led"
+  ],
+  "directions": [
+   "pinned-poster",
+   "name-as-monument",
+   "loud-flat-poster",
+   "dark-room",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper tall enough for its portraits: about 90svh per person, up to six people. A `position: sticky; top: 0` layer of 100svh holds the heading, two words at clamp(88px, 12vw, 180px), leading 0.85, centred at mid-height, in white with `mix-blend-mode: difference` so it reads over ground and photographs alike. Beneath it in the stacking order, portraits scroll past in normal flow: each a 4:5 photograph 26–30vw wide, alternately starting at column 2 and ending at column 11, 60svh apart, so each one passes behind a different half of the heading. Under each portrait's left corner: the name at 18px, the role at 14px in the soft ink, and one sentence of up to 30 words in a 280px measure. The last portrait is followed by 40svh of empty ground before the heading releases. Square corners. Nothing else is on screen.",
+  "mobile": "The heading shrinks to 17vw and pins 16px from the top instead of at mid-height. Portraits become 72% wide, alternating between the left and right margins, 48px apart, each with name, role and sentence beneath at the portrait's width.",
+  "seenIn": [
+   "aww-glitch-grit",
+   "opl-the-deep-end"
+  ]
+ },
+ {
+  "id": "about-photo-tile-facts",
+  "role": "about",
+  "name": "Wide photo, colour tile, facts",
+  "shape": "mosaic",
+  "tags": [
+   "photo-led",
+   "colour-field"
+  ],
+  "directions": [
+   "place-carries-it",
+   "uneven-photographs",
+   "dense-tiles",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "Top: a heading of two to four words at clamp(40px, 4vw, 60px) on the left margin, then 24px below it a three-line lead paragraph at 21–22px across columns 1–6. 72px lower, two tiles sit side by side with a 16px gap. The left tile spans columns 1–8: a landscape photograph at 16:10 with one radius (0 or 10px). A short paragraph of up to 35 words at 16px is set in a solid paper-colour block 320px wide with 20px padding, placed over the photograph's top-right corner and flush with both edges. The right tile spans columns 9–12 and is a flat palette colour, 60% of the photograph's height: it holds a simple inline SVG outline of the region or the floor plan as one filled shape, with one solid dot marking the location. Under the colour tile, four label and value pairs at 14px in a two-by-two grid: altitude, distance, season, local time.",
+  "mobile": "Heading at 9vw, lead at 18px. The photograph goes full width at 4:3 and its overlaid paragraph moves beneath it as ordinary text. The colour tile follows at full width and 3:2, and the four label and value pairs sit under it in two columns.",
+  "seenIn": [
+   "opl-eagles-nest",
+   "opl-le-petit-bleu"
+  ]
+ },
+ {
+  "id": "about-shaped-portrait-panel",
+  "role": "about",
+  "name": "Inset panel, shaped portrait",
+  "shape": "split",
+  "tags": [
+   "colour-field",
+   "photo-led",
+   "object-led"
+  ],
+  "directions": [
+   "one-motif",
+   "hero-object",
+   "borrowed-category",
+   "colour-chapters",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A deep-toned panel inset 20px from the page edges with a 12px radius, about 110svh tall, `overflow: hidden`. Left half: a two-line statement of four to seven words at clamp(40px, 4.4vw, 64px) in a pale ink, top-left with 56px padding; it is the heading and has nothing above it. Below it a photograph of the person or the workshop, masked with `clip-path` or an SVG `mask` to one bold shape taken from the subject (a four-lobed flower, a circle, an arch, a chamfered block), 38vw across, positioned so the panel's bottom edge crops its lowest fifth. Right side, starting at 63% of the width and 56px from the top: two text blocks 300px wide and 64px apart, each a subhead at 22px over a four-line paragraph at 15px; then one solid button in the accent colour. Between the statement and the text blocks the panel is empty. One photograph only.",
+  "mobile": "The panel is inset 10px and stacks: the statement at 8.5vw, then the two text blocks at full width, the button, and last the shaped photograph at 86vw across, centred and cropped by the panel's bottom edge by a quarter of its height.",
+  "seenIn": [
+   "opl-zara-webb"
+  ]
+ },
+ {
+  "id": "work-big-names-fixed-preview",
+  "role": "work",
+  "name": "Big names, fixed preview",
+  "shape": "index",
+  "tags": [
+   "type-led",
+   "photo-led"
+  ],
+  "directions": [
+   "name-as-monument",
+   "borrowed-category",
+   "loud-flat-poster",
+   "dark-room",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "Project names are the index. In columns 1–8, five to nine names stack one per line at clamp(44px, 5.4vw, 80px), leading 1.0, each row a link with 10px of vertical padding. All names rest in the ink at 35% opacity except the active one, which is full ink; the first is active by default, and hover or keyboard focus moves the state. To the right of each name, on its baseline at 14px: the discipline and the year. In columns 9–12 a `position: sticky; top: 15vh` frame, 4:5 and 26vw wide with square corners, shows the active project's photograph; all images are stacked in the frame and swapped by opacity over 200ms. A two-word heading at 28px sits top-left, 48px above the first name. Nothing is drawn between rows: the size of the type and the dimming do the separating.",
+  "mobile": "Names at 9.5vw, all in full ink, one per line; discipline and year sit beneath each name at 13px. There is no sticky frame: each name is preceded by its own photograph at 16:10, full width, so the list becomes image then name, repeated, with 40px between projects.",
+  "seenIn": [
+   "opl-belen-jones",
+   "opl-specia1ne",
+   "aww-artem-shcherbakov",
+   "opl-neuropelvic-surgery"
+  ]
+ },
+ {
+  "id": "work-one-strip-per-project",
+  "role": "work",
+  "name": "One strip per project",
+  "shape": "strip",
+  "tags": [
+   "dense",
+   "photo-led"
+  ],
+  "directions": [
+   "contact-sheet",
+   "dark-room",
+   "dense-tiles",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "The left 13% of the width is a `position: sticky` column holding the section name at 28px and, beneath it, two text filters at 15px, the active one in full ink. To its right each project is one horizontal strip of four to six images, all exactly 190px tall at their natural widths (`height: 190px; width: auto`), 8px apart, the last one cut off by the right viewport edge with `overflow: hidden`. Under each strip, one line at 13px spread across the strip's width: project name flush left, a three-word descriptor at the centre, the year flush right. 45px separate one strip from the next, so four projects fit on a 900px screen and ten make a page. Square corners; no captions on individual frames. Hovering a strip dims the other strips to 40% opacity. There is no heading beyond the section name in the rail.",
+  "mobile": "The rail becomes a single line above the list: section name left, filters right. Strips are 120px tall and each scrolls sideways on its own with `overflow-x: auto` and scroll snapping. The caption line keeps the name left and the year right; the descriptor is dropped.",
+  "seenIn": [
+   "aww-boc-studio",
+   "aww-gil-huybrecht",
+   "aww-lama-lama-2"
+  ]
+ },
+ {
+  "id": "work-giant-title-uneven-wall",
+  "role": "work",
+  "name": "Giant title, uneven wall",
+  "shape": "mosaic",
+  "tags": [
+   "poster",
+   "photo-led",
+   "dense"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "dense-tiles",
+   "name-as-monument",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A one- or two-word title in capitals at clamp(72px, 9vw, 136px), leading 0.9, sits flush left at the 16px margin; on its baseline at the far right, one underlined link at 15px to the full archive. 32px below, thumbnails pack into an uneven wall with 8px gaps: a flex-wrap layout in which each row has a different fixed height (cycle 240, 360, 200, 300px) and each tile's width follows its image ratio, so widths range from one-sixth to one-half of the page and tile edges do not line up between rows. Rows are justified to both margins with `flex-grow`. Under each image, one caption line at 12px: project name left, year in the soft ink right. Square corners; no hover overlay beyond a slight dimming of the other tiles. Holds 9–16 projects. The section ground is one flat colour, dark or saturated, edge to edge.",
+  "mobile": "Title at 17vw on one line. The wall becomes rows of alternating composition: one full-width tile, then two tiles splitting the width 62/38, then 38/62, with 6px gaps and fixed row heights of 220 and 150px. Captions stay as one line under each tile.",
+  "seenIn": [
+   "aww-warm-fuzzy",
+   "aww-oimachi"
+  ]
+ },
+ {
+  "id": "work-loose-scatter",
+  "role": "work",
+  "name": "Loose scatter with pauses",
+  "shape": "stack",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "uneven-photographs",
+   "dark-room",
+   "place-carries-it",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "One word as heading at 32–40px, top-left on the margin. Projects then appear one at a time down the page, each a single photograph at its own width and side, with 22–30vh of empty ground between them. Use a repeating set of three placements on the 12-column grid: columns 1–6 hugging the left margin at 3:2; columns 9–12 hugging the right margin at 4:5, starting 80px above where the previous image ended so the two overlap in height; columns 3–9 inset at 16:9. Above each image's top-left corner, the project name at 13px in the soft ink; beneath its bottom-left corner, a one-line description at clamp(15px, 1.1vw, 17px) in full ink. Once, in the gap beside the narrow right-hand image, a two-line remark at 20px sits alone in columns 2–5. Square corners. Holds five to eight projects; more belongs in a denser index.",
+  "mobile": "Images alternate widths against alternating margins: 100%, 68% right, 82% left, with 72px between projects. The name above and the description below each image stay left-aligned to that image's edge. The two-line remark sits full width between the second and third project.",
+  "seenIn": [
+   "aww-nothin",
+   "opl-deeo-studio-2",
+   "opl-kereliott"
+  ]
+ },
+ {
+  "id": "work-panels-midline-row",
+  "role": "work",
+  "name": "Full panels, one midline row",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "place-carries-it",
+   "pinned-poster",
+   "dark-room",
+   "borrowed-category",
+   "hero-object"
+  ],
+  "needs": [],
+  "blueprint": "Four to seven consecutive panels, each 100vw by 100svh, butted together with no gap. Each panel is one photograph of the project cropped much tighter than its frame (`object-fit: cover` with the image scaled to 130%), so a detail fills the screen. The same three-part text row sits at exactly 50% of the height on every panel, in white with `mix-blend-mode: difference` or over a neutral dark scrim band 90px tall: the date or year at the left margin at 15px, the project title in capitals at clamp(22px, 2vw, 30px) starting 10% in from the left, and one fact (location, client, number of pieces) at the right margin at 15px. Because the row never moves, scrolling reads like turning plates in a book. Panels may be `position: sticky; top: 0` so each slides over the last. There is no section heading; the first panel's title row is the heading.",
+  "mobile": "Panels are 100vw by 82svh. The row drops to the bottom of each panel, 20px above its edge: the title at 22px on the first line, then date at the left and fact at the right on a second line at 13px, over the same scrim band.",
+  "seenIn": [
+   "aww-julien-calot",
+   "aww-milledollars",
+   "aww-depo-luxe",
+   "aww-risk"
+  ]
+ },
+ {
+  "id": "work-stacked-folders-tabs",
+  "role": "work",
+  "name": "Stacked folders with tabs",
+  "shape": "band",
+  "tags": [
+   "colour-field",
+   "object-led",
+   "poster"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "colour-chapters",
+   "one-motif",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "Projects are filed as folders: four to six full-width flat colour bands stacked so that each shows a 64px strip above the next, built with `position: sticky` and increasing `top` offsets (0, 64, 128px) so the bands pile up as the page scrolls. From the top-left edge of each band one or two tabs rise: filled shapes 44px tall and 200–320px wide with shouldered corners cut by `clip-path: polygon()` or an inline SVG path, side by side with 6px gaps, each in a flat colour that contrasts with its band. The project name sits inside the tab at 26–28px; the category sits right-aligned in the band's visible strip at 15px. An open band is 80svh: a 16:10 photograph in columns 1–7 and, top-aligned in columns 9–12, a 60-word description with a link. A two-word heading at 32px precedes the stack.",
+  "mobile": "Bands do not stick; they stack in normal flow, each led by one tab 40px tall with the name at 20px and the category beside it. Inside a band the photograph is full width at 4:3 with the description beneath at 16px and 20px padding.",
+  "seenIn": [
+   "aww-mosbys-files",
+   "opl-medium-rare"
+  ]
+ },
+ {
+  "id": "work-book-spine-index",
+  "role": "work",
+  "name": "Book-spine index",
+  "shape": "index",
+  "tags": [
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "type-only-statement",
+   "contact-sheet",
+   "borrowed-category",
+   "dense-tiles",
+   "page-is-the-object"
+  ],
+  "needs": [],
+  "blueprint": "The complete index in the footprint of a banner. Twenty to forty project names are set as single lines rotated to read top to bottom with `writing-mode: vertical-rl`, packed side by side like book spines across the full content width. Each spine is a column 30–34px wide and 420px tall: the name at 18px starts at the top, and the discipline follows after a 12px gap on a flat highlighter-colour background chosen from four palette colours by discipline. Spines are separated only by 6px of space. Hovering or focusing a spine turns it to full ink and dims the others to 40%; the whole spine is the link. A two- or three-word heading at 28px sits top-left above the shelf with a one-sentence note at 15px to its right on the same baseline. No images. Below the shelf, 96px of empty ground. It turns a long client list into one dense typographic object.",
+  "mobile": "Rotation is dropped. Names become a horizontal wrap: each name at 17px followed by its highlighted discipline, items flowing inline with 10px gaps and 14px of line spacing, so the index reads as one dense paragraph of links filling the width.",
+  "seenIn": [
+   "opl-adam-ho"
+  ]
+ },
+ {
+  "id": "work-staggered-tiles-empty-cells",
+  "role": "work",
+  "name": "Staggered tiles, empty cells",
+  "shape": "grid",
+  "tags": [
+   "photo-led",
+   "colour-field"
+  ],
+  "directions": [
+   "uneven-photographs",
+   "editorial-report",
+   "specimen-catalogue",
+   "one-motif",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A four-column grid with 16px gutters and 5vw margins in which tiles snap to columns but vary in span and height, and some cells are deliberately left empty. Pattern for eight projects: row one, a wide tile spanning columns 1–2 at 3:2 and a single tile in column 4 at 4:5, column 3 empty; row two, single tiles in columns 2 and 3, columns 1 and 4 empty; row three, a wide tile in columns 3–4 and a single in column 1. Each tile is a photograph, or a project image centred with 12% padding on a flat pastel or dark ground from the palette. Square corners, or one consistent shape detail such as a large radius on the bottom-right corner only. Under each tile one caption row at 14px: project name left, year and category right. The heading, two words stacked at clamp(40px, 4.5vw, 68px), occupies the empty cell of row one.",
+  "mobile": "Two columns with 10px gutters. Wide tiles span both columns; single tiles alternate left and right with the other cell left empty beside every second one, so the stagger survives. The heading sits above at 10vw. Captions stack the name over the year.",
+  "seenIn": [
+   "aww-haoqi-design",
+   "aww-revelatio-studio",
+   "opl-nia-creative",
+   "opl-mammut-studios"
+  ]
+ },
+ {
+  "id": "work-quiet-ledger-preview",
+  "role": "work",
+  "name": "Quiet ledger, side preview",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "split-stage",
+   "type-only-statement",
+   "contact-sheet"
+  ],
+  "needs": [],
+  "blueprint": "A plain ledger in one column 560px wide whose left edge sits at 22% of the viewport width. A heading of two or three words at 24–28px in medium weight, then 32px of space, then one row per project, 44px tall: the name at 16px in full ink at the left, the kind of work at 14px in the soft ink starting at 55% of the column, and the year right-aligned with tabular figures. Nothing is drawn between rows; the three fixed starts make the columns. Hovering or focusing a row keeps it in full ink, drops the others to the soft ink, and shows that project's image in the empty area right of the column: a 4:3 frame 300px wide, `position: absolute`, its top aligned to the hovered row, 64px from the column's right edge, appearing with a 150ms fade. Holds 6–20 rows; group by year with 28px of extra space.",
+  "mobile": "The column fills the width with 20px margins. Rows are 52px tall: name at the left, year at the right, kind of work on a second line at 13px. There is no hover preview; instead the first three projects each show a 16:10 image at full column width above their row.",
+  "seenIn": [
+   "opl-shawn-golden",
+   "opl-britt-taylor",
+   "opl-george-wood"
+  ]
+ },
+ {
+  "id": "work-oversized-visual-small-cluster",
+  "role": "work",
+  "name": "Oversized visual, small cluster",
+  "shape": "split",
+  "tags": [
+   "object-led",
+   "photo-led"
+  ],
+  "directions": [
+   "hero-object",
+   "specimen-catalogue",
+   "borrowed-category",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "One project per block, three or four blocks, 140px apart. In each, one oversized visual fills columns 1–7 and bleeds off the left viewport edge: an object photograph scaled to 120% of its box and cropped by `overflow: hidden` on the section, 80svh tall, sitting on the page ground (use `mix-blend-mode: multiply` on a light ground so a white studio background disappears). The right third, columns 9–12, holds a small cluster bottom-aligned with the visual: a landscape image at 16:10 with 6px corners, then 28px below it a two-column row with the project title at clamp(28px, 3vw, 44px) on two lines at the left and a five-line description at 13–14px at the right. Column 8 stays empty. Blocks do not mirror; the second visual is 60svh tall and the third 90svh, so the rhythm changes while the structure holds. No section heading: each title leads its block.",
+  "mobile": "The visual comes first at 110% of the width, bleeding off the left edge in a 4:5 crop. Beneath it the title at 8vw, then the description at 15px, then the small landscape image at 70% width against the right margin. 88px between blocks.",
+  "seenIn": [
+   "opl-artem-taradash",
+   "aww-normal-is-boring"
+  ]
+ },
+ {
+  "id": "work-names-as-paragraph",
+  "role": "work",
+  "name": "Names as one paragraph",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "type-only-statement",
+   "name-as-monument",
+   "loud-flat-poster",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "All project or client names run together as one paragraph at poster scale: 10–18 names at clamp(40px, 5.2vw, 78px), leading 1.1, flowing inline across the full width between 24px margins and wrapping where they fall, five to seven lines in all. Names are separated by a comma, or by a small inline frame: an `inline-block` 0.8em tall and 1.2em wide, aligned to the cap height, holding that project's photograph and placed directly after its name. Every name is a link; all names rest in the soft ink, and the hovered one takes full ink while its inline frame scales to 1.6 times from its left edge. A heading of two words opens the paragraph as its first words in full ink, on the same line and at the same size, followed by a colon. Below the paragraph at the left margin, one line at 15px gives the count and the years covered.",
+  "mobile": "The paragraph is set at 9vw, left-aligned, about twelve lines, with names separated by commas. Inline frames are removed except after the first three names, where they stay at cap height. All names are full ink; each remains a link with 6px of extra line spacing for touch.",
+  "seenIn": [
+   "opl-adam-ho",
+   "aww-noho",
+   "aww-artem-shcherbakov"
+  ]
+ },
+ {
+  "id": "gallery-staggered-pairs",
+  "role": "gallery",
+  "name": "Staggered pairs in empty ground",
+  "shape": "stack",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "uneven-photographs",
+   "dark-room",
+   "place-carries-it",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "No heading. Photographs are placed one or two per screen so that more than half of every screen stays empty ground. Screen one: a 3:4 portrait in columns 1–4 against the left margin, and a near-square 5:4 image in columns 7–12 against the right margin whose top edge starts 30vh lower than the portrait's. Screen two: a 3:2 landscape in columns 6–11 and, 24vh lower, a small 4:5 image in columns 2–4. Repeat the two arrangements, mirrored on the second pass, for six to ten photographs. Under each image's left corner, a one-line caption at 13px in the soft ink, 10px below the image. Vertical gaps between pairs are 22–28vh. Every edge sits on a column line and offsets come from only two values. Square corners. If motion is used, images enter with a short `clip-path` wipe from the bottom edge.",
+  "mobile": "A single column in which widths and sides alternate: 70% against the left margin, 84% against the right, 56% left, then 100% full-bleed, with 64px between images. Captions sit under each image's left corner at 13px. Portrait crops are preferred so each image fills most of the screen height.",
+  "seenIn": [
+   "opl-kereliott",
+   "opl-the-deep-end",
+   "aww-tengile-malamala-collection"
+  ]
+ },
+ {
+  "id": "gallery-drag-row-mixed-modules",
+  "role": "gallery",
+  "name": "Drag row of mixed modules",
+  "shape": "carousel",
+  "tags": [
+   "photo-led",
+   "dense"
+  ],
+  "directions": [
+   "place-carries-it",
+   "split-stage",
+   "dense-tiles",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "One horizontal row, 68svh tall, running off both viewport edges with 12px gaps, draggable and scrollable sideways (`overflow-x: auto`, `scroll-snap-type: x proximity`, scrollbar hidden). The row is built from three module types: a tall single image at 3:4 filling the row height; a column of two stacked 4:3 images sharing the height with a 12px gap; and a wide 16:10 landscape at full height. Sequence for nine photographs: tall, stacked pair, wide, stacked pair, tall, wide. The row starts 6vw in from the left, so the first module is whole and the last visible one is cut by the right edge. A heading of two or three words at 28–36px sits 32px above the row's left start; the count of photographs sits at the right margin on the same baseline. No captions and no arrows. Inside a narrow reading column the same row runs 300px tall and is cut by the column's edge.",
+  "mobile": "The row is 62svh tall with 8px gaps and starts 20px in. Modules are sized so one and a third are visible: tall images 72vw wide, stacked pairs 64vw wide, landscapes 88vw wide at reduced height and centred vertically. Scroll snapping aligns each module to the left margin.",
+  "seenIn": [
+   "opl-transport",
+   "opl-marina-rachello",
+   "opl-le-petit-bleu"
+  ]
+ },
+ {
+  "id": "gallery-full-bleed-sequence",
+  "role": "gallery",
+  "name": "Full-bleed sequence, text interlocked",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led"
+  ],
+  "directions": [
+   "place-carries-it",
+   "dark-room",
+   "hero-object",
+   "pinned-poster",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Three photographs, each 100vw by 100svh, shown one after another with nothing between them. Each is `position: sticky; top: 0` inside a wrapper 300svh tall, so the second slides up over the first and the third over the second like a curtain; no scroll hijacking. The section above interlocks with the first photograph: a narrow paragraph at 13–14px, 220px wide, sitting on the column line at 58% of the width, is pulled down with a negative bottom margin so its last four lines overlap the photograph's top edge, in a colour that reads on both ground and image. Each photograph carries one caption line at 15px in white at the bottom-left margin, over a neutral dark scrim limited to the lowest 120px. No heading. Choose three frames with the same light and a calm lower-left corner. The last photograph releases into the next section.",
+  "mobile": "Each photograph is 100vw by 88svh in a portrait crop and still sticks so the next covers it. The interlocking paragraph sits at the left margin, 60% wide, overlapping the first photograph by three lines. Captions stay bottom-left at 14px.",
+  "seenIn": [
+   "aww-white-desert",
+   "aww-squarespace-foundations"
+  ]
+ },
+ {
+  "id": "gallery-small-frames-wide-space",
+  "role": "gallery",
+  "name": "Small frames, wide space",
+  "shape": "strip",
+  "tags": [
+   "quiet",
+   "object-led",
+   "photo-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "specimen-catalogue",
+   "hero-object",
+   "contact-sheet",
+   "dark-room",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "A flat, quiet viewport 100svh tall in which about 70% of the screen is empty. At mid-height a single row of small portrait frames runs across and off both sides: each frame 11vw wide and 24svh tall (roughly 2:3), spaced 5vw apart, vertically centred, six or seven visible at 1440. Frames have square corners and sit directly on the ground with no border. The row scrolls sideways by drag or trackpad (`overflow-x: auto` with the scrollbar hidden) and may hold 12–24 frames. One line of text overlaps the top-left of the first frame by 12px: a title of two or three words at 20–24px followed by the count, placed above the frame in the stacking order. Hovering a frame scales it to 1.1 from its centre over 250ms; nothing else moves. No captions under frames, no arrows, and no other text in the section.",
+  "mobile": "The row sits at 45% of an 80svh section. Frames are 34vw wide at 2:3 and 5vw apart, so two and a half are visible and the row scrolls by touch with snapping. The title line sits 20px above the row at the left margin.",
+  "seenIn": [
+   "aww-julien-calot",
+   "aww-2xa-studio"
+  ]
+ },
+ {
+  "id": "gallery-prints-over-headline",
+  "role": "gallery",
+  "name": "Prints dropped on the headline",
+  "shape": "statement",
+  "tags": [
+   "poster",
+   "photo-led",
+   "colour-field"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "name-as-monument",
+   "borrowed-category",
+   "colour-chapters",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "A flat colour field 100svh tall. A two-line headline of two to four words in an ultra-condensed or ultra-heavy face is centred, each line clamp(120px, 14vw, 210px) tall with leading 0.85. Two portrait photographs, each about 26vw wide at 3:4 with an 8px solid white border like a print, are absolutely placed on top of the headline's centre: one rotated −8 degrees, one +6 degrees, overlapping each other by a third and hiding roughly half the letters, so the eye completes the words. A third, smaller print (16vw) may sit at the lower right, cropped by the section's bottom edge. One plain sentence at 16px sits at the bottom-left margin, 24px from the edges. The prints are above the type in the stacking order; hovering one brings it to the front and straightens it to 0 degrees over 200ms. Nothing else is on the field.",
+  "mobile": "Headline lines at 30vw, still two lines, centred in a 78svh field. Two prints only, each 52vw wide, rotated −6 and +5 degrees, overlapping at the headline's centre. The small sentence sits at the bottom-left margin at 15px.",
+  "seenIn": [
+   "aww-decathlon-yestalgia",
+   "aww-pp-neue-montreal"
+  ]
+ },
+ {
+  "id": "gallery-dense-masonry-sheet",
+  "role": "gallery",
+  "name": "Dense masonry sheet",
+  "shape": "mosaic",
+  "tags": [
+   "dense",
+   "photo-led"
+  ],
+  "directions": [
+   "contact-sheet",
+   "dense-tiles",
+   "editorial-report",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "A three-line statement at 22px, 30ch wide, sits at the 66% column with 64px of space below it; it is the only large text. Then a dense masonry of about twenty tiles in six columns with 4px gaps and 12px outer margins, built with CSS `columns: 6; column-gap: 4px` and `break-inside: avoid` on each figure. Tile sizes range from 90px squares to one feature tile of 280 by 160px that sits above the first two columns, outside the column flow. Images keep their natural ratios, so column bottoms are ragged. Every tile has one caption line at 12px directly beneath, 6px below the image and 14px above the next tile, in the form name, comma, type. Mix photographs, posters, details and textures. No hover chrome; the sheet reads at a glance and fills the full width.",
+  "mobile": "Three columns with 4px gaps and 10px margins; the feature tile spans the full width at the top. Captions stay at 12px but shorten to the name only. The statement sits above at 19px, full width and left-aligned.",
+  "seenIn": [
+   "aww-oimachi",
+   "opl-lovably"
+  ]
+ },
+ {
+  "id": "gallery-wall-of-word-tiles",
+  "role": "gallery",
+  "name": "Wall of word tiles",
+  "shape": "grid",
+  "tags": [
+   "type-led",
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "type-only-statement",
+   "editorial-report",
+   "colour-chapters",
+   "loud-flat-poster",
+   "dense-tiles",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "A gallery that works with no photographs: a four-column grid of identical square cells with 8px gaps running three or more rows, edge to edge with 8px margins. Each cell is a flat filled tile and centres one large element about 55% of the cell's width: a single word, a letter, a figure with its unit, or a simple inline SVG shape taken from the subject, set at clamp(56px, 9vw, 150px) in the display face. A one- or two-word caption at 14px sits centred 18px above the cell's bottom edge. Tile and ink colours rotate through three or four palette pairs in a fixed order, so a uniform grid looks varied. Where photographs exist, every third or fourth cell is a photograph covering its tile, all given one treatment. There is no hierarchy between cells: it is a specimen sheet. A heading is optional; if used, it occupies the first cell as that cell's word.",
+  "mobile": "Two columns with 6px gaps; cells stay square and the central element is set at 22vw. Captions stay at 13px. Twelve cells make six rows; if there are more than sixteen, show twelve and let the rest follow after a full-width tile holding a text link.",
+  "seenIn": [
+   "opl-beige-force",
+   "opl-proooof",
+   "opl-hebbia"
+  ]
+ },
+ {
+  "id": "gallery-one-frame-changing",
+  "role": "gallery",
+  "name": "One frame, contents change",
+  "shape": "pinned",
+  "tags": [
+   "object-led",
+   "quiet",
+   "photo-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "hero-object",
+   "pinned-poster",
+   "product-performs",
+   "split-stage",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "Instead of many pictures side by side, one frame stays in place and its contents change. The frame is small and exact: 300px square on a quiet page, or up to 40vw at 4:5 on an object-led one, centred or sitting on the text column's left edge, with at least 20vh of empty ground above and below. Five to seven photographs are stacked inside it with `position: absolute` and crossfade in turn (opacity over 600ms, each held for 2.4 seconds, via CSS keyframes with staggered delays). All are shot or cropped alike: same scale, same light direction, the subject at the same position, so only the subject seems to change. On a flat ground use `mix-blend-mode: multiply` so studio backgrounds vanish. One caption line at 14px sits 16px below the frame and changes with the image. No arrows and no counter. On a motif-led page the frame takes the motif's shape through `clip-path`.",
+  "mobile": "The frame is 72vw wide, centred, in a section 70svh tall. The crossfade continues on its own; tapping the frame advances to the next image at once. The caption sits beneath, centred, at 14px. When reduced motion is requested the first image holds and tapping still advances.",
+  "seenIn": [
+   "opl-archiv"
+  ]
+ },
+ {
+  "id": "gallery-tiles-with-label-strips",
+  "role": "gallery",
+  "name": "Photo tiles with label strips",
+  "shape": "grid",
+  "tags": [
+   "photo-led",
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "specimen-catalogue",
+   "page-is-the-object",
+   "colour-chapters",
+   "dense-tiles",
+   "product-performs",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Four columns with 12px gaps; every tile is a photograph with a filled label strip attached directly beneath it, the two forming one object like a print with its swing tag. The photograph is 1:1 or 4:5 with square corners. The strip is the same width, 84–96px tall with 12px padding, and holds two or three rows of text at 12–13px in the text face with tabular figures: row one spreads four short values evenly across the width with `justify-content: space-between`; row two puts a date at the left end and a time or place at the right end; row three names the maker or model. Strip and text colours change per tile through four palette pairs (dark on bright, bright on dark), so a uniform grid looks varied. Rows of tiles are 28px apart. A two- or three-word heading at 32px sits top-left, 40px above the grid. Holds 8–16 tiles.",
+  "mobile": "Two columns with 8px gaps. Strips keep two rows only: the four values wrap to two per row, and the date and place line is dropped. Text stays at 12px. The heading sits above at 24px. Colour pairs keep rotating so adjacent tiles never match.",
+  "seenIn": [
+   "opl-proooof",
+   "opl-compile"
+  ]
+ },
+ {
+  "id": "list-lineup-one-size",
+  "role": "list",
+  "name": "Line-up at one type size",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "type-only-statement",
+   "dark-room",
+   "loud-flat-poster",
+   "name-as-monument",
+   "borrowed-category",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "A full-bleed flat section. The programme is a four-column table spanning the full width between 24px margins, with every cell at one size, clamp(20px, 2.1vw, 30px), one weight, no bold: the act or session flush left, the format starting at 33%, the room or stage at 66%, and the time range right-aligned at the far edge with tabular figures. Rows are 1.5em tall and separated by nothing but that leading; the fixed column starts do the organising. Day or part headings are a single line at the same size in the accent ink with 72px above and 20px below, and may be `position: sticky; top: 0` on a strip of the section's ground colour so the current day stays in view. Breaks and changeovers are rows set in capitals in the soft ink. There is no other heading. Comfortably holds 12–40 rows; with fewer than eight, raise the size to 3vw.",
+  "mobile": "Each entry becomes two lines: the act at 22px on the first, then format, room and time on one line at 14px in the soft ink with the time right-aligned. 18px between entries. Day headings stay sticky at the top on the ground colour.",
+  "seenIn": [
+   "opl-spatial",
+   "opl-select26"
+  ]
+ },
+ {
+  "id": "list-menu-photo-bullets",
+  "role": "list",
+  "name": "Two-column menu, photo bullets",
+  "shape": "grid",
+  "tags": [
+   "object-led",
+   "photo-led"
+  ],
+  "directions": [
+   "specimen-catalogue",
+   "one-motif",
+   "hero-object",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A menu or catalogue list in which each item has a small cut-out photograph where a bullet would be. Each category opens with its name at clamp(32px, 3.4vw, 50px) at the left margin and the number of items at 16px right-aligned on the same baseline, with 96px above and 40px below. Items then run in two columns with a 64px gutter and 36px between rows. Each item is a two-part row: a 64px photograph of the item on a plain background at the left (multiplied onto the ground with `mix-blend-mode: multiply`, or masked to the page's one shape), then 20px to its right the name in bold at 17–18px with the price right-aligned on the same line, and beneath it a two- or three-line description at 15px in the soft ink, max 38ch. A short note such as an allergen follows the description in the accent ink. No boxes. Holds 6–10 items per category.",
+  "mobile": "One column. Photographs shrink to 52px and stay at the left; name and price share the first line with the description beneath at 15px. Category names at 8.5vw with the count on the same baseline. A sticky row of category names as text links lets the reader jump.",
+  "seenIn": [
+   "opl-madie",
+   "opl-zara-webb"
+  ]
+ },
+ {
+  "id": "list-giant-word-bar-rows",
+  "role": "list",
+  "name": "Giant word, filled bar rows",
+  "shape": "stack",
+  "tags": [
+   "type-led",
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "split-stage",
+   "page-is-the-object",
+   "name-as-monument",
+   "dense-tiles",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "Sized for a reading column 520–640px wide, or centred at that width on a full page. The heading is one word (menu, hours, prices) in tall condensed capitals, its `font-size` set in container units (around 46cqw for four letters, tuned per word) so the letters fill the column from edge to edge, leading 0.8. 20px below, a stack of full-width filled bars, each 56px tall with 6px gaps, in a flat tone one step from the ground, with square corners or a 6px radius. Each bar carries a category name at 16px in medium weight at the left with 18px padding and a plus sign at the right. A bar opens in place as a `details` element: it keeps its fill, and its panel lists items at 16px, name left and price right-aligned with tabular figures, 14px between items, 20px padding. Six to nine bars; the first is open by default.",
+  "mobile": "The column is the full width with 16px margins, so the one-word heading spans the screen. Bars are 54px tall with 6px gaps and open the same way. Item descriptions, if any, sit under the name at 14px in the soft ink.",
+  "seenIn": [
+   "opl-le-petit-bleu"
+  ]
+ },
+ {
+  "id": "list-day-tabs-banded-agenda",
+  "role": "list",
+  "name": "Day tabs, banded agenda",
+  "shape": "list",
+  "tags": [
+   "dense",
+   "type-led",
+   "colour-field"
+  ],
+  "directions": [
+   "editorial-report",
+   "product-performs",
+   "dense-tiles",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "A two-line heading at clamp(36px, 4vw, 60px), first line in the soft ink and second in full ink, with the booking button on the same row at the far right. 56px below, left: a 150px column of stacked day tabs, each a filled block 150 by 64px with 6px gaps showing the weekday at 16px and the date at 13px; the active tab takes the darkest fill with inverted text. Right, from 190px to the right margin: the day's sessions as alternating tone bands, each 76px tall with an 8px radius and 4px gaps, the two tones one step apart. Inside a band, on fixed column starts: the time at 20px with tabular figures, 20px from the left; the title at 18px in medium weight at 22%, with a one-line note at 13px in the soft ink under it; speaker names right-aligned at 14px beside up to three overlapping 32px round portraits.",
+  "mobile": "The heading stacks above a full-width button. Day tabs become a horizontal row of equal filled blocks, sticky under the top edge. Each band stacks time over title over speakers with 16px padding and grows to fit; portraits sit at the band's top-right corner.",
+  "seenIn": [
+   "opl-builders-table",
+   "opl-select26"
+  ]
+ },
+ {
+  "id": "list-poster-lines",
+  "role": "list",
+  "name": "One item per poster line",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster",
+   "colour-field"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "type-only-statement",
+   "name-as-monument",
+   "colour-chapters",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "A short list set as a poster. Four to seven items (services, headline acts, courses, opening days) stack one per line at clamp(64px, 10vw, 150px) in the display weight, all capitals or all lowercase, leading 0.92, flush left at a 20px margin on a flat field. Its one detail (a price, a date, a time range) sits at the right margin on the same baseline at 18–20px with tabular figures, so the page has two alignments only: giant words left, small facts right. Items too long for one line at this size are shortened, not shrunk. Between items there is only the tight leading. Hovering an item swaps its ink for the accent. There is no heading: the first item starts 80px below the section top and the last ends 80px above the bottom. The list reuses the hero title's exact type size, so it reads as another poster.",
+  "mobile": "Items at 15vw, one per line, flush left with 16px margins. Each detail moves beneath its item at 15px, left-aligned, with 6px above and 22px below. If any single word is wider than the screen at 15vw, drop the whole list to 12vw rather than breaking a word.",
+  "seenIn": [
+   "opl-city-of-angels"
+  ]
+ },
+ {
+  "id": "list-sticky-photo-active-list",
+  "role": "list",
+  "name": "Sticky photograph, active list",
+  "shape": "split",
+  "tags": [
+   "photo-led",
+   "type-led",
+   "object-led"
+  ],
+  "directions": [
+   "hero-object",
+   "split-stage",
+   "place-carries-it",
+   "dark-room",
+   "pinned-poster"
+  ],
+  "needs": [],
+  "blueprint": "Two columns. The left, columns 1–5, is `position: sticky; top: 12vh` and holds one photograph or object at 4:5, 34vw wide, unframed on the ground. The right, columns 7–11, holds a vertical list of five to nine names (treatments, rooms, courses, services) at clamp(20px, 1.6vw, 24px), each row 58px tall with the name at the left and a price or duration right-aligned at 15px in the soft ink. The active row is full ink; the others rest at 40% opacity. Hovering, focusing or scrolling a row to the middle of the viewport makes it active, crossfades the left photograph to that item's image over 300ms, and opens a three-line description at 15px, 34ch wide, directly under the name, pushing later rows down. A heading of two or three words at clamp(32px, 3.4vw, 48px) sits above the list, aligned to its left edge, 48px above the first row.",
+  "mobile": "The photograph becomes a 4:3 band pinned to the top of the screen at 38svh while the list scrolls beneath it; the heading sits above the first row. Rows are 56px tall and the description opens on tap. The image changes with the row nearest the band.",
+  "seenIn": [
+   "opl-neuropelvic-surgery",
+   "opl-humanoid-index"
+  ]
+ },
+ {
+  "id": "list-two-ended-rows",
+  "role": "list",
+  "name": "Two-ended rows, narrow column",
+  "shape": "list",
+  "tags": [
+   "quiet",
+   "type-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "contact-sheet",
+   "type-only-statement",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "A list in one narrow column, 520px wide, starting at 22% of the viewport width or centred. Every row is 34–38px tall with no box and nothing drawn between rows. Each row has two ends: at the left, a 16px round image (a face, a logo, a colour dot) followed after 8px by the name at 15–16px in full ink; at the far right of the column, a short value at 13px in the soft ink (a date, a price, a domain, an opening time) with tabular figures. Entries that need a sentence run to two lines at the left, and the value aligns with the first line. Groups are separated by 40px of space and begin with one plain word in the soft ink at the same size. A heading of two to four words at 24–28px in medium weight sits 32px above the first row. Holds 10–40 rows.",
+  "mobile": "The column fills the width with 20px margins. Rows are 44px tall for touch; the left image stays 16px. Long values wrap beneath the name at 13px, left-aligned with it, and the row grows. Group spacing is 32px.",
+  "seenIn": [
+   "opl-tiny-computer-co"
+  ]
+ },
+ {
+  "id": "list-printed-menu-sheet",
+  "role": "list",
+  "name": "The printed menu sheet",
+  "shape": "band",
+  "tags": [
+   "object-led",
+   "type-led",
+   "colour-field"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "place-carries-it",
+   "split-stage",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The list is one tall sheet of paper. A filled paper-colour panel 640px wide sits centred, or offset to columns 7–12, on a contrasting flat ground or a full-bleed photograph, with square corners and its top and bottom edges cut into shallow scallops by `clip-path` or an SVG `mask`. Inside, 64px padding and a centred, symmetrical setting like a printed card: the venue or section name at 40–48px, a one-line note at 15px, then three or four groups 56px apart. Each group opens with its name at 22px, centred. Items follow at 17px with 16px between them: the dish or service at the left of a 420px measure, the price at the right with tabular figures, and a one-line description at 14px in the soft ink under the name. Alignment alone links name and price; there are no leaders. The sheet ends with the opening hours as two centred lines. Holds 12–24 items.",
+  "mobile": "The sheet spans the screen with 10px of ground showing at each side and 28px padding; the scalloped edges stay at top and bottom. The measure is the full inner width and prices stay right-aligned. Group names at 20px, items at 16px.",
+  "seenIn": [
+   "opl-le-petit-bleu",
+   "opl-madie",
+   "opl-sarah-matt-wedding"
+  ]
+ },
+ {
+  "id": "list-statement-table-pushed-right",
+  "role": "list",
+  "name": "Statement, table pushed right",
+  "shape": "table",
+  "tags": [
+   "type-led",
+   "quiet",
+   "photo-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "uneven-photographs",
+   "editorial-report",
+   "place-carries-it",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "A heading of four to six words spans the full width on two lines at clamp(40px, 4.5vw, 68px), left-aligned with its first line indented 3vw and leading 0.98. 96px below, the table is pushed into the right-hand five columns (8–12) and the left stays open. One plain word naming the table (offices, hours, rates) hangs at 14px in column 7, top-aligned with the first row. Each row is a three-part line at 15–16px with 26px between rows: the kind or day in the soft ink at the left of the measure, the place or service at 30%, and the address, time or price right-aligned, with a small arrow where the row links. Rows are separated by space only; every fourth row has 44px above it to form groups. In columns 1–4, bottom-aligned with the last row, one 4:5 photograph 22vw wide may sit alone. Holds 5–14 rows.",
+  "mobile": "Heading at 9.5vw without the indent. The table takes the full width at 16px; each row stacks the kind above the place, with the value right-aligned on the first line. The naming word is dropped because the heading already says it. The photograph follows at 60% width on the right margin.",
+  "seenIn": [
+   "aww-kononenko-architectural-bureau",
+   "opl-monte"
+  ]
+ },
+ {
+  "id": "contact-address-display-rows",
+  "role": "contact",
+  "name": "Address in display rows",
+  "shape": "list",
+  "tags": [
+   "type-led",
+   "poster",
+   "colour-field"
+  ],
+  "directions": [
+   "type-only-statement",
+   "name-as-monument",
+   "loud-flat-poster",
+   "colour-chapters",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The contact block is a stack of five full-width rows, every one set at the same size, clamp(44px, 6vw, 88px), regular weight, left-aligned with a 20px inset and leading 1.0: the building or venue name, the street, the city with postcode, the opening hours as one compact line, the phone number. Each row is about 150px tall with the text sitting in its lower third; rows are told apart by alternating two flat tones of the section colour as full-width bands, or by 28px of space alone. A sixth row holds a one-word greeting at the same size followed, 24px to its right and centred on the x-height, by a solid round button 0.9em across with an arrow, which opens the email or booking link. Street and phone rows are links (map, call). No heading and no form. Optionally, one small round photograph sits at the right end of the first row.",
+  "mobile": "Rows at 9.6vw with 16px insets, about 84px tall; the hours break onto two rows (days, then times). The greeting row becomes a full-width band in the accent colour with the round arrow button at its right end, 56px across.",
+  "seenIn": []
+ },
+ {
+  "id": "contact-email-display",
+  "role": "contact",
+  "name": "The email as display type",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "name-as-monument",
+   "type-only-statement",
+   "dark-room",
+   "pinned-poster",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "The section is 100svh in the inverse of the page's colours. A single email address is set as one line of display type spanning the content width: the font-size is fitted so the address runs from margin to margin (about 7–9vw for 20 characters; break after the @ onto two lines if it is longer than 26), light or regular weight, tight tracking, sitting on a baseline 12vh above the bottom edge. It is a `mailto:` link; on hover the whole line takes the accent ink. In the top-left corner, a sentence of up to 12 words at 20–22px says what to write about. In the two bottom corners at 14px: phone and city at the left, two or three social links at the right. No heading and no form. For a pinned ending, make the section `position: sticky; bottom: 0` beneath the page so the previous section lifts off it.",
+  "mobile": "The address breaks after the @ onto two lines at 11.5vw, left-aligned, sitting at 55% of an 86svh screen. The sentence sits at the top-left at 18px. Phone, city and social links stack at the bottom-left at 15px with 12px between them.",
+  "seenIn": [
+   "aww-bleibtgleich26"
+  ]
+ },
+ {
+  "id": "contact-photo-strip-three-cell-bar",
+  "role": "contact",
+  "name": "Photo strip, three-cell bar",
+  "shape": "strip",
+  "tags": [
+   "colour-field",
+   "photo-led",
+   "dense"
+  ],
+  "directions": [
+   "colour-chapters",
+   "loud-flat-poster",
+   "dense-tiles",
+   "specimen-catalogue",
+   "contact-sheet"
+  ],
+  "needs": [],
+  "blueprint": "A saturated flat field about 80svh tall. Across the top, 48px from the section edge, a strip of small photographs runs off both sides: all 150px tall at differing widths (3:4, 1:1, 3:2 in turn), 8px gaps, ten or more, drifting slowly as a marquee. A heading of two to four words at clamp(36px, 4vw, 60px) sits 72px below the strip at the left margin. 40px below the heading, the newsletter or booking form is one bar spanning the content width, 96px tall, divided into three equal cells with 8px gaps. Each cell is a filled block in a tone one step from the field with one radius: the first two are inputs (name, email) with placeholder text centred at 18px, the third is the submit action in the inverse colours with its word centred. Focus changes a cell's fill to the lightest tone. Small print at 13px sits under the first and third cells.",
+  "mobile": "The strip is 110px tall and scrolls by touch. The heading follows at 9vw. The three cells stack as full-width filled blocks 60px tall with 8px gaps, the submit block last. Small print sits beneath the stack, left-aligned.",
+  "seenIn": [
+   "aww-paul-kalkbrenner"
+  ]
+ },
+ {
+  "id": "contact-clip-out-coupon",
+  "role": "contact",
+  "name": "Clip-out coupon form",
+  "shape": "split",
+  "tags": [
+   "object-led",
+   "colour-field"
+  ],
+  "directions": [
+   "page-is-the-object",
+   "one-motif",
+   "borrowed-category",
+   "loud-flat-poster",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "The form is a coupon to cut out. One filled card in a strong flat colour, about 2.2:1, spans columns 2–11 with a 14px radius, with 120px of ground above and below. Semicircular notches 28px across are cut into its top and bottom edges at the 46% mark with `clip-path` or an SVG `mask`, and a vertical row of round dots (a dotted `border-left` 5px thick in the ground colour) joins the two notches as the perforation. Left of the perforation, with 48px padding: a two-line heading of three to five words at clamp(28px, 3vw, 44px) in heavy capitals at the top, and one sentence at 16px at the bottom. Right of it: four inputs stacked with 10px gaps, each a filled block 52px tall in a lighter tone of the card with its placeholder at 16px, then a full-width solid submit bar 56px tall in the darkest ink. Inputs keep visually hidden `label` elements.",
+  "mobile": "The card turns upright and spans the width with 12px margins. The perforation becomes horizontal: notches on the left and right edges, dots across. Heading and sentence sit above it; the four inputs and the submit bar sit below, each 54px tall.",
+  "seenIn": [
+   "opl-the-sapphic-bar-index",
+   "opl-rafael-derolez-2026"
+  ]
+ },
+ {
+  "id": "contact-single-field",
+  "role": "contact",
+  "name": "One field, nothing else",
+  "shape": "stack",
+  "tags": [
+   "quiet",
+   "ui-led"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "hero-object",
+   "dark-room",
+   "split-stage",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "The whole section is one prompt and one field in a column 520px wide, on the page's text column line or centred, with 200px of empty ground above and 160px below. The prompt is two lines at one size, 24–28px in medium weight: the first line in the soft ink, the second in full ink. 28px below, a single input 520px wide and 64px tall with a 12px radius, filled with the lightest tone on the page so it is the only bright surface in view; no outline at rest and a 2px inner ring in the accent on focus. Inside the right end of the field, 8px from its edge, a round submit button 44px across with an arrow and an accessible name. 16px below the field, one line at 13px says what happens next. 72px lower, three label and value rows at 14px: email, phone, address.",
+  "mobile": "The column fills the width with 20px margins. Prompt at 22px. The field stays one row, 60px tall, with the arrow button inside its right end. The three label and value rows stack with the label above each value and 20px between them.",
+  "seenIn": [
+   "opl-archiv",
+   "opl-ayush-halder-portfolio",
+   "opl-medium-rare"
+  ]
+ },
+ {
+  "id": "contact-visit-card-on-photograph",
+  "role": "contact",
+  "name": "Visit card on a photograph",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "object-led"
+  ],
+  "directions": [
+   "place-carries-it",
+   "dark-room",
+   "page-is-the-object",
+   "pinned-poster",
+   "hero-object"
+  ],
+  "needs": [],
+  "blueprint": "A full-bleed photograph of the place, 100vw by 100svh, carries one solid card and nothing else. The card is a filled panel in the paper colour, fully opaque, 380px wide with 8px corners and 32px padding, placed in the upper-right corner 60px from the top and right edges (or the upper-left: pick the corner where the photograph is calmest). It holds, top to bottom: a two- or three-word title at 28px in a light weight; the address on two lines at 16px; the opening hours as three rows with days at the left and times right-aligned in tabular figures; the phone number; then, flush with the card's bottom edge and spanning its width, a solid booking button 52px tall. The card may be `position: sticky; top: 60px` inside a taller section so it holds while the photograph scrolls beneath it. The photograph's focal point must stay clear of the card. No heading outside the card.",
+  "mobile": "The photograph is 100vw by 70svh. The card leaves the corner: it spans the width with 16px margins and overlaps the photograph's bottom edge by 80px, so image and card interlock. The booking button is full width, 56px tall, at the card's bottom.",
+  "seenIn": [
+   "opl-the-deep-end",
+   "opl-madie"
+  ]
+ },
+ {
+  "id": "contact-sentence-portrait-links",
+  "role": "contact",
+  "name": "Sentence, portrait, two links",
+  "shape": "band",
+  "tags": [
+   "type-led",
+   "quiet",
+   "photo-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "uneven-photographs",
+   "contact-sheet",
+   "editorial-report",
+   "quiet-instrument"
+  ],
+  "needs": [],
+  "blueprint": "One closing row of three elements hanging from the same top line, with open ground between them, on a 12-column grid. Columns 1–5: a sentence of 12–18 words at clamp(26px, 3vw, 44px), four lines, leading 1.1, saying what kind of enquiries are welcome; it is set as a paragraph and there is no separate heading. Columns 8–9: one small square portrait or photograph of the place, 150–170px, with square corners. Columns 10–12: a short question at 18px in medium weight, then 20px below it two underlined links stacked at 18px (the email address and one booking or social link), and beneath them a line at 14px in the soft ink with the city and the usual reply time. Columns 6–7 stay empty. The row has 160px of space above and 120px below. No form. On a dark ground the photograph is the only bright thing in the row.",
+  "mobile": "The sentence comes first at 7.4vw. Below it the portrait at 96px square sits at the left margin with the question and the two links to its right, top-aligned, in the remaining width. The city and reply-time line spans the full width beneath.",
+  "seenIn": [
+   "opl-artem-taradash",
+   "aww-bleibtgleich26",
+   "opl-kereliott"
+  ]
+ },
+ {
+  "id": "showcase-one-control-blown-up",
+  "role": "showcase",
+  "name": "One control, blown up",
+  "shape": "full-bleed",
+  "tags": [
+   "ui-led",
+   "poster",
+   "colour-field"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "colour-chapters",
+   "one-motif",
+   "borrowed-category",
+   "dark-room",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "A flat saturated field, full-bleed and 92svh tall, holds one working control from the product: the toggle, slider, segmented switch or record button the whole product turns on. Build it at true proportions with every dimension in em, mark its root data-ui, then raise that root's font-size until the control stands about 46vh tall. Anchor it right of centre so the section's right and bottom edges crop about a fifth of it (overflow: hidden on the section). It keeps its real label and value, now at poster size, and it works: operating it swaps the field between two palette colours and changes one word of the heading. The heading, two to four words at clamp(28px, 2.6vw, 40px), sits top-left on the page margin with one sentence at 17px beneath it. The lower-left third of the field stays empty.",
+  "mobile": "The field is 86svh. Heading and sentence sit top-left at 26px and 16px. The control is enlarged to about 130vw wide and anchored bottom-left, so the right edge crops its far end while its thumb or active segment stays within reach. It still works and still swaps the field colour.",
+  "seenIn": [
+   "opl-textmode-overlay",
+   "opl-uni"
+  ]
+ },
+ {
+  "id": "showcase-output-index-live-sheet",
+  "role": "showcase",
+  "name": "Output index, live sheet",
+  "shape": "index",
+  "tags": [
+   "ui-led",
+   "object-led"
+  ],
+  "directions": [
+   "editorial-report",
+   "split-stage",
+   "borrowed-category",
+   "product-performs",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "For products that make documents: invoices, reports, emails, statements. Columns 1–5 list the names of three to five outputs, one per line, at clamp(36px, 4vw, 64px), leading 1.1, each a `<button>`; the selected name is in full ink, the rest in the soft ink. There is no other heading. Columns 7–12 are a stage in a flat tone one step from the ground, 88svh tall, and on it lies the selected output as an object: a paper-white sheet 560px wide, built in HTML at true size, root marked data-ui, with a real sender, real line items, sums that add up and a date. The sheet starts 72px below the stage's top and runs past its bottom edge, which crops it. Selecting a name swaps the sheet with a 200ms crossfade; an email is narrower (440px), a receipt narrower still (300px), all left-aligned 64px into the stage.",
+  "mobile": "Names become one sideways-scrolling row at 22px with scroll-snap, the selected one in full ink. Beneath, the stage fills the width and is 70svh tall; the sheet keeps its true size, anchored top-left with a 16px inset and cropped by the stage's right and bottom edges. Tapping a name swaps it.",
+  "seenIn": [
+   "aww-cominvi"
+  ]
+ },
+ {
+  "id": "showcase-one-row-three-states",
+  "role": "showcase",
+  "name": "One row, three states",
+  "shape": "stack",
+  "tags": [
+   "ui-led",
+   "quiet"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "editorial-report",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "The product's central row (a task, a transaction, a message, a deploy) is shown three times, one directly beneath the other, in three states: as it arrives, with the pointer on it and its actions revealed, and finished. Each copy is built at true size, 640px wide, with real names, amounts and times, its root marked data-ui; inside it the product's own control borders and radii apply. The copies sit in columns 4–9 with 56px between them and nothing framing them. In columns 1–3, right-aligned and level with each copy, one word at 22px in the soft ink names its state. Columns 10–12 stay empty. The middle copy is live: its checkbox or button works and turns it into the third state. The heading, two to four words at 28–32px, sits on column 4's left edge, 96px above the first copy, with no supporting line.",
+  "mobile": "Copies stack at full width with 16px margins and stay at true size; a row wider than the screen is cropped at its right end, never shrunk. Each state word sits beneath its copy at 17px in the soft ink, 10px away. 48px separates the three groups. Heading at 26px.",
+  "seenIn": [
+   "opl-rows"
+  ]
+ },
+ {
+  "id": "showcase-headline-you-can-type",
+  "role": "showcase",
+  "name": "Headline you can type",
+  "shape": "statement",
+  "tags": [
+   "ui-led",
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "type-only-statement",
+   "product-performs",
+   "loud-flat-poster",
+   "dark-room",
+   "colour-chapters"
+  ],
+  "needs": [],
+  "blueprint": "The section's headline is an input. One line at clamp(48px, 8vw, 132px), tight tracking, flush left across columns 1–12, is a real `<input>` (root marked data-ui) with no border and no fill, prefilled with a believable two-to-five-word example of what a user gives the product: a search, a question, a date in words, a colour name. A solid caret block 0.08em wide blinks after the last character. 48px beneath, on the same left edge, the product's answer appears at true interface size, at most 560px wide: three result rows, one parsed value, or a swatch, updating as the visitor types. Bottom-left, three more examples at 17px act as plain text buttons that refill the line. The rest of the 88svh field is empty. If the text outgrows the line it scrolls inside the input; it never wraps.",
+  "mobile": "The input is set at 11vw on one line and scrolls sideways inside itself when the text runs long. The answer follows 28px below at full width and true size. The three examples become a wrapping row of filled blocks 44px tall beneath the answer; tapping one refills the line.",
+  "seenIn": [
+   "opl-shelf",
+   "opl-tiny-computer-co"
+  ]
+ },
+ {
+  "id": "showcase-input-half-output-half",
+  "role": "showcase",
+  "name": "Input half, output half",
+  "shape": "split",
+  "tags": [
+   "ui-led",
+   "colour-field"
+  ],
+  "directions": [
+   "split-stage",
+   "product-performs",
+   "colour-chapters",
+   "dark-room",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "Two flat fields meet on a vertical edge at 50vw, each 90svh tall, no gap. The left field is the darkest palette tone and holds what the user hands the product, raw: a pasted note, a messy row of figures, a prompt, or literal code inside `<code>`. It is an editable region at 20–24px, 34ch wide, starting at column 2, 30% down the field. The right field is the lightest tone and holds what the product makes of it as a true-size fragment marked data-ui: the tidy record, the chart, the formatted reply, 440–520px wide, on the same top line. Editing the left changes the right. The heading is split across the edge: its first one or two words bottom-left on the dark field, its last one or two bottom-right on the light field, both at clamp(40px, 5vw, 80px) on one baseline 32px from the bottom.",
+  "mobile": "The fields stack, dark above light, each 62svh, meeting on a horizontal edge. Input text at 18px with 20px margins; the output fragment at true size on the light field. The heading's two parts sit either side of that edge at 11vw: one at the foot of the dark field, one at the top of the light.",
+  "seenIn": [
+   "opl-textmode-overlay",
+   "opl-vessa"
+  ]
+ },
+ {
+  "id": "showcase-rows-as-a-board",
+  "role": "showcase",
+  "name": "Rows as a board",
+  "shape": "table",
+  "tags": [
+   "ui-led",
+   "dense"
+  ],
+  "directions": [
+   "dense-tiles",
+   "borrowed-category",
+   "editorial-report",
+   "dark-room",
+   "product-performs",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "The product's main list is set like a station departure board. Eight to ten real rows (transactions, issues, deploys, bookings) run the full viewport width inside 12px side margins. Each row is a filled band 72px tall, one tone off a dark ground, separated from the next by a 4px gap and never by a line; the whole board is one fragment marked data-ui. Text inside is 26–30px: the name from column 1, two or three facts at columns 6, 8 and 10, and at column 12 a status word on a solid block of its status colour; figures use tabular numerals. The section's top and bottom edges cut the first and last rows in half, so the list seems to continue. The fourth row is open: 216px tall, in the accent colour, with its detail in two lines at 17px. Clicking another row opens that one instead. No heading: the open row's name is the largest type.",
+  "mobile": "Rows keep the 4px gaps and are 64px tall inside 8px margins: the name at 20px on the left, the status block on the right, the other facts dropped. The open row is 200px tall and lists the dropped facts as three lines at 16px. Six rows show; the first and last are cropped.",
+  "seenIn": [
+   "opl-rows",
+   "opl-near"
+  ]
+ },
+ {
+  "id": "showcase-lit-panel-drag-row",
+  "role": "showcase",
+  "name": "Lit panel, dark row",
+  "shape": "carousel",
+  "tags": [
+   "ui-led",
+   "object-led"
+  ],
+  "directions": [
+   "dark-room",
+   "quiet-instrument",
+   "borrowed-category",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "One dark field, 96svh tall. Across its middle runs a horizontal row of five to seven interface panels, each a different true-size fragment marked data-ui (an open menu, an inspector, a composer, a chart card), 320–460px wide at their natural heights, vertically centred and 26vw apart. The row scrolls sideways with scroll-snap-type: x mandatory and scroll-snap-align: center, and can be dragged. Only the panel at the centre is lit: full opacity, in the product's light theme, the brightest thing on screen. The others sit at 22% opacity and are inert. The viewport's edges crop the outermost panels. In the gap to the right of the centred panel, top-aligned with it, a 24ch column gives its name at 24px in a light weight and two lines at 16px in a lifted ink; this text changes as panels arrive. There is no heading above the row.",
+  "mobile": "The row is 62svh tall; panels snap one per screen at true size, capped at 86vw wide, with neighbours showing 7vw at each side at 22% opacity. The name and its two lines sit beneath the row on the left margin and change with the centred panel. Swiping moves the row.",
+  "seenIn": [
+   "aww-butter",
+   "opl-plastic"
+  ]
+ },
+ {
+  "id": "features-giant-command-list",
+  "role": "features",
+  "name": "Giant command list",
+  "shape": "list",
+  "tags": [
+   "ui-led",
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "loud-flat-poster",
+   "product-performs",
+   "dark-room",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "The capabilities are set as the product's own command menu, scaled up until it is the section; the root is marked data-ui. First a real search `<input>` at clamp(28px, 3vw, 44px) across columns 1–10: a filled block one tone off the ground, 1.9em tall, whose placeholder of two to four words serves as the heading ('Find a command'). Beneath it six to eight capability names, one per line, at clamp(36px, 4.6vw, 76px), leading 1.1, flush left, each row the full content width. At the right end of a row sits its shortcut as key caps: filled squares 1em tall, one character each, in the text face. The selected row lies on a solid block of the accent colour and shows one sentence at 17px under its name. Typing filters the rows; arrow keys and hover move the selection. Nothing else is in the section.",
+  "mobile": "The input is 56px tall at 20px. Capability names are set at 8.5vw, one per line; key caps are dropped, since a phone has no shortcuts. Tapping a name selects it: the accent block and the 16px sentence open beneath it and the previous one closes. Filtering still works.",
+  "seenIn": []
+ },
+ {
+  "id": "features-sentences-with-switches",
+  "role": "features",
+  "name": "Sentences with switches",
+  "shape": "band",
+  "tags": [
+   "ui-led",
+   "colour-field",
+   "type-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "colour-chapters",
+   "one-motif",
+   "loud-flat-poster",
+   "product-performs",
+   "type-only-statement"
+  ],
+  "needs": [],
+  "blueprint": "Four or five capabilities, each one plain sentence of five to eight words about what the product will do for you, each ending in a working switch. Every sentence is a full-bleed band 20vh tall, butted against the next with no gap. Inside, on the 12-column grid: the sentence at clamp(30px, 3.6vw, 60px) on one line in columns 1–10, vertically centred; in columns 11–12, right-aligned, the product's real toggle, built in em with its root marked data-ui, 1.1em tall so it matches the type. Off, a band is the page ground and its sentence is in the soft ink. On, the band fills with a palette colour, a different one per band, the sentence turns to full ink and a second line at 17px appears beneath stating the consequence in figures. Two bands are on at load. Toggles answer click, Space and Enter. There is no heading; the first sentence does that work.",
+  "mobile": "Bands are at least 132px tall. The sentence is set at 6.4vw on two lines in the left 76% of the width; the toggle sits at the right, vertically centred, with a 44px touch target. When a band is on, the consequence line opens under the sentence at 15px.",
+  "seenIn": []
+ },
+ {
+  "id": "features-panel-with-margin-notes",
+  "role": "features",
+  "name": "Panel with margin notes",
+  "shape": "index",
+  "tags": [
+   "ui-led",
+   "quiet",
+   "object-led"
+  ],
+  "directions": [
+   "editorial-report",
+   "quiet-instrument",
+   "product-performs",
+   "borrowed-category",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "One tall panel from the product is shown whole, like a plate in a manual, with notes in both margins. The panel (an inspector, a sidebar, a composer) is built at true size, 360–400px wide and 640–720px tall, root marked data-ui, and stands in columns 5–8 on the plain ground with no stage behind it. Six notes describe six of its parts: three in columns 1–4, right-aligned, and three in columns 9–12, left-aligned, each 24ch wide and placed by absolute top offsets so its first line is level with the control it explains. A note is a name at 18px medium and two lines at 15px in the soft ink. Hovering or focusing a note keeps its control at full strength and drops the rest of the panel to 30% opacity; the controls themselves also work. The heading, two to four words at 32–40px, sits right-aligned in columns 1–4, level with the panel's top edge.",
+  "mobile": "The panel is shown in three slices, top, middle and bottom, each at true size and centred, cut where the next begins. Under each slice its two notes sit side by side in two columns at 15px. 56px between slices. The heading leads at 26px on the left margin.",
+  "seenIn": [
+   "aww-the-watch",
+   "opl-specia1ne"
+  ]
+ },
+ {
+  "id": "features-fixed-output-controls-in-text",
+  "role": "features",
+  "name": "Fixed output, live controls",
+  "shape": "pinned",
+  "tags": [
+   "ui-led",
+   "quiet"
+  ],
+  "directions": [
+   "split-stage",
+   "product-performs",
+   "quiet-instrument",
+   "editorial-report",
+   "colour-chapters",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A split the reader operates. Left, columns 1–6: a flat colour field that is position: sticky; top: 0; height: 100svh, edge to edge, holding one thing the product makes (a card, an email, a chart, a rendered page) centred at true size, about 420px wide, root marked data-ui. Right, columns 8–12: a reading column no wider than 44ch, with four or five capability blocks 50vh apart. Each block is a sentence at 28–32px, a paragraph at 17px, and directly beneath it one real control at interface size: a slider, a segmented choice, a toggle, a short text field. Operating a control changes the fixed output on the left at once, and changes persist, so by the last block the reader has configured their own. The section heading, two to four words at 40–44px, opens the right column, 72px from the top.",
+  "mobile": "The output sits in a sticky field at the top, 42svh tall, cropped to its most telling region, not shrunk. Blocks scroll beneath on the page ground: sentence at 22px, paragraph at 16px, control at full width with 44px targets. The field releases after the last block.",
+  "seenIn": [
+   "opl-dialkit",
+   "aww-cerebrium"
+  ]
+ },
+ {
+  "id": "features-close-ups-on-a-board",
+  "role": "features",
+  "name": "Close-ups on a board",
+  "shape": "mosaic",
+  "tags": [
+   "ui-led",
+   "dense",
+   "colour-field"
+  ],
+  "directions": [
+   "dense-tiles",
+   "loud-flat-poster",
+   "colour-chapters",
+   "one-motif",
+   "borrowed-category",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A board of filled tiles, each a macro view of one small part of the interface. A 12-column grid with 8px gaps, 104px rows and 10px outer margins, no empty cells, no outlines. Eight tiles in four sizes: 6×4, 6×2, 3×4 and 3×2 (columns × rows). Each tile is a flat palette colour with overflow: hidden and holds one real element, built in em and enlarged to 300–400% through the font-size of its data-ui root: a toggle, a pair of key caps, a status word on its block, one figure from a readout, a slider thumb on its track, three stacked initials discs. The element is pushed off-centre so two of the tile's edges crop it. Bottom-left in every tile, 20px in: the capability's name at 18px medium and one line at 15px. One 6×2 tile holds only the heading, two to four words at clamp(36px, 4vw, 60px), top-left.",
+  "mobile": "Two columns, 6px gaps, rows of 28vw. Large tiles span both columns and three rows; the rest are one column by two rows. The heading tile leads at full width, two rows tall, type at 9vw. Enlarged elements keep their scale and are cropped harder; captions stay bottom-left at 16px and 14px.",
+  "seenIn": [
+   "opl-woblo",
+   "opl-uglycash",
+   "opl-uncle-rudy"
+  ]
+ },
+ {
+  "id": "how-it-works-one-card-four-fields",
+  "role": "how-it-works",
+  "name": "One card, four fields",
+  "shape": "strip",
+  "tags": [
+   "ui-led",
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "colour-chapters",
+   "dense-tiles",
+   "one-motif",
+   "loud-flat-poster",
+   "product-performs",
+   "borrowed-category"
+  ],
+  "needs": [],
+  "blueprint": "Four flat colour fields stand side by side across the full viewport, each 25vw wide and 84svh tall, butted together with no gaps; neighbours differ clearly in lightness. The same card from the product (a ticket, an order, a request) appears once in each field at the same height, 38% down, centred, 260px wide at true size, each copy marked data-ui. It is further along every time: bare as it arrives, then with an owner and a due date, then with its checklist half ticked, then closed with its final figure. Along the bottom of each field, 28px in, one clause at clamp(22px, 2vw, 32px) on two lines begins with its order word: 'First it lands here.' 'Then someone takes it.' The heading, two to four words at the same size in the heaviest weight, sits top-left in the first field only. On hover a field's card rises 6px over 150ms.",
+  "mobile": "The fields stack, each full width and 64svh tall, colours meeting edge to edge. In each: the clause at 24px top-left with 20px margins, then the card at true size, left-aligned, 32px below. The heading sits in the first field above its clause, at 24px in the heaviest weight.",
+  "seenIn": [
+   "opl-typewave",
+   "opl-depo-budget-app",
+   "opl-leedlime"
+  ]
+ },
+ {
+  "id": "how-it-works-call-and-response-column",
+  "role": "how-it-works",
+  "name": "Call and response column",
+  "shape": "list",
+  "tags": [
+   "ui-led",
+   "quiet"
+  ],
+  "directions": [
+   "quiet-instrument",
+   "product-performs",
+   "type-only-statement",
+   "editorial-report",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "The sequence is shown as what you give and what comes back, in one narrow column 560px wide starting at column 4, or on the page's text axis. Three exchanges, 88px apart. Each opens with a sentence at 20px medium that begins with its order word ('First, install it.' 'Then ask for a chart.'). 16px under it, the call: the literal thing the user enters, in a filled panel one tone off the ground, radius 8px, padding 20px. For a developer tool that is real code in `<pre><code>` at 14px with a working copy button; otherwise it is the product's own input holding real typed text. Under the call, indented 56px, the response: a true-size fragment marked data-ui showing what the product returns. The third response is the finished result and breaks out of the column, 760px wide, running to column 12. The heading, two to four words at 28px, sits 56px above the first sentence.",
+  "mobile": "The column fills the width with 20px margins. Calls and responses stack without the indent; a 24px gap and a lighter panel tone set the response apart. Code panels scroll sideways inside themselves. The final result runs edge to edge at true size, cropped on the right if wider.",
+  "seenIn": [
+   "opl-dialkit",
+   "opl-ohhmydesign"
+  ]
+ },
+ {
+  "id": "how-it-works-drag-through-the-stages",
+  "role": "how-it-works",
+  "name": "Drag through the stages",
+  "shape": "split",
+  "tags": [
+   "ui-led",
+   "colour-field"
+  ],
+  "directions": [
+   "split-stage",
+   "product-performs",
+   "colour-chapters",
+   "sentence-as-layout",
+   "dark-room",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "A 50/50 split, 88svh tall: two flat fields meeting on a clean vertical edge, and one slider that drives both. Left field: the current stage as a clause of three to six words at clamp(40px, 4.6vw, 76px) on two lines, top-left from column 1, starting with its order word; it serves as the heading. Right field: one fragment of the product at true size, about 440px wide, centred, root marked data-ui, in the state that matches the clause. Along the bottom, crossing both fields inside 28px margins, a real range `<input>` with four stops: a solid track 8px tall, the part already passed in full ink, and a square thumb 32px across in the accent. Under the track, four stage names at 16px, the current one in full ink. Dragging, or the arrow keys, swaps the clause and the fragment's state with a 200ms crossfade; nothing depends on scroll.",
+  "mobile": "The fragment's field comes first, 46svh, the fragment at true size and cropped to its active region. The slider follows directly beneath on the seam, thumb 40px. Then the clause field: the clause at 9vw on two lines, with the four stage names under it in a two-by-two block at 15px.",
+  "seenIn": [
+   "opl-textmode-overlay",
+   "opl-vessa",
+   "opl-juggle"
+  ]
+ },
+ {
+  "id": "how-it-works-stages-as-one-bar",
+  "role": "how-it-works",
+  "name": "Stages as one bar",
+  "shape": "band",
+  "tags": [
+   "ui-led",
+   "poster",
+   "type-led"
+  ],
+  "directions": [
+   "loud-flat-poster",
+   "type-only-statement",
+   "colour-chapters",
+   "one-motif",
+   "editorial-report",
+   "dense-tiles",
+   "sentence-as-layout"
+  ],
+  "needs": [],
+  "blueprint": "The product's progress bar, enlarged until it spans the page, is the diagram. One bar runs across columns 1–12, 22vh tall, built as a flex row of three or four solid segments with 6px gaps, root marked data-ui. Each segment's width follows how long that stage really takes (flex-grow from the true durations, 12% minimum), and each is a different flat palette colour, so the reader sees at once that signing up is a sliver and the rest is the product working. Inside every segment, top-left with 20px padding, its duration in words at clamp(20px, 2vw, 30px): 'Two minutes', 'About a day'. Under each segment, on its left edge, one clause at 17px, 22ch wide, beginning with its order word. Above the bar, 64px clear of it, the heading: two to five words at clamp(48px, 6.4vw, 104px), flush left. Nothing else.",
+  "mobile": "The bar turns vertical: segments stack as full-width blocks whose heights keep the proportions, 72px minimum, 6px gaps, about 70svh in total. Each holds its duration at 22px top-left and its clause at 16px beneath. The heading sits above at 11vw on two lines.",
+  "seenIn": [
+   "opl-wild-as"
+  ]
+ },
+ {
+  "id": "stats-figure-set-by-a-slider",
+  "role": "stats",
+  "name": "Figure set by a slider",
+  "shape": "statement",
+  "tags": [
+   "ui-led",
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "product-performs",
+   "loud-flat-poster",
+   "type-only-statement",
+   "colour-chapters",
+   "sentence-as-layout",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "The number is the visitor's own. A flat field at least 88svh tall. Top-left, on the page margin: a question of two to five words at 36–44px that serves as the heading ('How many invoices a month?'). 28px under it, one control from the product at true size, 400px wide, root marked data-ui: a slider with its real label and current value, or a stepper, or a short numeric field, preset to a typical answer. Then a long gap. Bottom-left, on the same edge, the result at clamp(140px, 19vw, 320px), heavy, leading 0.8, tabular numerals, with its unit at 0.22em on the same baseline. It recalculates on every input event from a stated, honest formula. Bottom-right, on the figure's baseline, one sentence at 17px, 30ch wide, says how the figure is worked out. No other figure appears in the section.",
+  "mobile": "Question at 26px, then the control at full width with a 44px thumb. The figure sits at the bottom at 30vw with its unit beneath it at 20px, both flush left. The working-out sentence follows at 15px. The section is at least 84svh so the gap between control and figure survives.",
+  "seenIn": []
+ },
+ {
+  "id": "stats-bars-standing-on-the-edge",
+  "role": "stats",
+  "name": "Bars standing on the edge",
+  "shape": "full-bleed",
+  "tags": [
+   "ui-led",
+   "colour-field"
+  ],
+  "directions": [
+   "editorial-report",
+   "dark-room",
+   "dense-tiles",
+   "colour-chapters",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "The product's own chart, drawn in HTML, is the whole section. A full-bleed field 90svh tall. Along its bottom edge stand ten to fourteen solid bars, one per true value (months, releases, cohorts), in a CSS grid spanning the full viewport width with 8px gaps and no side margins; heights are the values scaled so the tallest is 58vh. No axes, no grid, no legend; the chart's root is marked data-ui. Every bar is one tone two steps from the field except the one the page is about, which takes the accent. Three bars print their value directly above themselves at clamp(20px, 2vw, 30px), tabular. The headline figure sits top-left on the page margin at clamp(88px, 10vw, 168px), and its claim, two to five words at 28px, sits beneath it on the same margin. Hovering or focusing a bar shows its value and period above it.",
+  "mobile": "Bars run sideways: each a full-width row 28px tall growing from the left edge, 6px gaps, eight values at most. The headline figure sits above at 26vw with its claim at 22px. Three rows print their value at 17px inside the bar's right end. The accent row stays.",
+  "seenIn": [
+   "aww-alethia"
+  ]
+ },
+ {
+  "id": "testimonial-quote-as-comment-thread",
+  "role": "testimonial",
+  "name": "Quote as comment thread",
+  "shape": "stack",
+  "tags": [
+   "ui-led",
+   "quiet"
+  ],
+  "directions": [
+   "product-performs",
+   "quiet-instrument",
+   "dark-room",
+   "editorial-report",
+   "split-stage"
+  ],
+  "needs": [],
+  "blueprint": "The customer's words arrive the way words arrive inside the product: as a comment. One comment component from the interface is built in em, its root marked data-ui, and enlarged through the root's font-size until the body text is clamp(28px, 3vw, 46px), leading 1.2. It occupies columns 2–9 on the plain ground. It keeps every real part: a filled disc with the speaker's initials, name and company on one line at 0.5em, a true date, the quotation as the comment body (no quotation marks; the component already says who is speaking) and the product's own small resolved or reaction state beneath. Below it, indented to the body text's left edge, two shorter quotations follow as replies in the same component at true size, 440px wide, 32px apart. Columns 10–12 stay empty. There is no heading; the first comment is the largest type in the section.",
+  "mobile": "The large comment fills the width inside 20px margins, body text at 7vw, initials disc 40px. The two replies follow at true size, indented 28px, using the remaining width, 24px apart. Dates and states stay. Nothing is centred.",
+  "seenIn": [
+   "opl-ohhmydesign",
+   "opl-heyclicky"
+  ]
+ },
+ {
+  "id": "cta-first-step-already-open",
+  "role": "cta",
+  "name": "First step, already open",
+  "shape": "split",
+  "tags": [
+   "ui-led",
+   "colour-field"
+  ],
+  "directions": [
+   "product-performs",
+   "colour-chapters",
+   "loud-flat-poster",
+   "split-stage",
+   "dark-room",
+   "one-motif"
+  ],
+  "needs": [],
+  "blueprint": "The page ends with the product's first screen already open. A full-bleed field in the accent colour, 90svh tall. Right, in columns 7–11, vertically centred: the product's own create dialog at true size, 440px wide, root marked data-ui, with its real title ('Name your workspace'), one text field holding an editable, believable example, one two-option segmented choice and its primary button. Inside the fragment the product's conventions apply, including the shadow its dialog normally casts. The field accepts typing, the choice switches, and the primary button is the page's only action: it carries the typed value into sign-up. Left, in columns 1–5, anchored to the bottom with 40px margins: the closing line, two to four words at clamp(56px, 7vw, 112px), leading 0.92, on two lines, and under it one sentence at 17px saying what happens after the button. The upper-left stays empty.",
+  "mobile": "The closing line leads at 13vw on two lines, top-left, with its sentence beneath at 16px. The dialog follows at full width inside 16px margins, at true size, its primary button 52px tall and full width. The field is at least 84svh; the dialog sits in its lower half.",
+  "seenIn": [
+   "opl-near",
+   "opl-midnight-2"
+  ]
+ },
+ {
+  "id": "work-names-pass-a-held-square",
+  "role": "work",
+  "name": "Names passing a held square",
+  "shape": "index",
+  "tags": [
+   "type-led",
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "name-as-monument",
+   "loud-flat-poster",
+   "pinned-poster",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "A flat ground and one centred column of very large names: eight to fourteen project or product names in condensed capitals at clamp(96px, 14vw, 200px), leading 0.85, one per line and each line centred, so long names run nearly to the margins and short ones leave wide ground either side. A square frame 450px across (31vw), square corners, holds at the centre of the viewport behind the list: a sticky element (`position: sticky; top: calc(50svh - 225px)`) at the head of the list with a negative bottom margin equal to its height, centred, below the names in the stacking order, so the passing names cross the picture and are never hidden by it. Choose pictures with a calm centre, or lay a flat 30% scrim inside the frame, so the crossing name keeps 3:1. In the study the picture sits on top of the names; here nothing lies on top of large type. It shows the picture of whichever name is crossing its centre (an IntersectionObserver with a thin root margin at the viewport's middle sets the current name) and swaps with a 200ms crossfade. Level with the frame's middle, 48px to its left and right, two facts about the current item sit at 16px, the kind of work on the left and the year or price on the right, changing with it. The heading opens the list as its first line, at the same size in the soft ink, two words at most. Every name is a link. The section runs about three screens, so each name holds the centre for about a quarter of a screen.",
+  "mobile": "Names drop to 15vw and may wrap to two lines, still centred. The frame shrinks to a 60vw square and stays sticky at the centre; the two facts move into one row at 16px directly under it. The heading line stays first.",
+  "seenIn": [
+   "aww-decathlon-yestalgia"
+  ]
+ },
+ {
+  "id": "work-title-torn-at-the-seam",
+  "role": "work",
+  "name": "Title torn at the seam",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "poster"
+  ],
+  "directions": [
+   "split-stage",
+   "pinned-poster",
+   "dark-room",
+   "name-as-monument"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper about 95svh tall per project holds a sticky stage of 100svh, split at exactly 50vw into two portrait panes of 720×900px, `object-fit: cover`, square corners, no gap: two different pictures or loops of the same project (the whole and a detail, before and after). The project's title sits on the seam, centred on x 720 at the optical middle: capitals in a heavy face at clamp(96px, 11vw, 160px), leading 0.8, tracking -0.04em, at most two lines, in one light colour chosen per project. It is set twice inside the one heading element, the second copy `aria-hidden`, each copy clipped to its own half with `clip-path: inset(0 50% 0 0)` and `inset(0 0 0 50%)`. Directly under it, centred, the discipline and year at 16px and a text link with an arrow at 16px. While a project crosses the stage, the left pane and left half-title travel up and the right pane and right half-title travel down (panes ±20svh, title ±30svh, on a scroll-linked timeline), so the name tears at the seam and lines up exactly when the project is centred. The section's two-word heading sits at clamp(28px, 2.4vw, 36px) in the stage's top-left corner, 32px in. Four to eight projects; the stage releases after the last. Under reduced motion the halves stay aligned and the projects change by crossfade.",
+  "mobile": "Keep the split: two strips 195px wide running the full height of the screen with the same opposing travel. The title drops to 12.5vw on the seam, at most two lines, with the discipline line and the link under it at 16px; give the link a 44px hit area.",
+  "seenIn": [
+   "aww-glitch-grit"
+  ]
+ },
+ {
+  "id": "work-one-slide-two-neighbours",
+  "role": "work",
+  "name": "One slide, two neighbours",
+  "shape": "strip",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "editorial-report",
+   "contact-sheet",
+   "place-carries-it",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "Each project is one band the full width of the viewport. In its middle stands one slide 73% of the width (1046×600px, x 197–1243), square corners, `object-fit: cover`. The previous and next pictures of the same project peek in at the edges, 177px of each visible, with 20px gaps, so the row reads as a filmstrip cut by the viewport. The strip scrolls sideways with `overflow-x: auto` and `scroll-snap-type: x mandatory`, each picture snapping to the centre, the scrollbar hidden. 26px under the strip runs one row at 16px on the 12-column grid with 20px margins, every item on a fixed column start: the project's name in the full ink at column 1 with its category in the soft ink after it, the recognition it received at column 4, the year at column 7, the team or client at column 10. A text link with an arrow sits 24px under the name. 240px of ground separates one project from the next, and all projects share one photographic treatment so the run reads as a set. The section's heading, two or three words at clamp(40px, 4vw, 60px), sits on the left margin 96px above the first strip.",
+  "mobile": "The slide is 78% of the width at 4:5, with 32px of each neighbour showing and 10px gaps, still snapping. The row of facts becomes two columns, name and category on the left, year and team from 50% of the width; the link drops under the name. 64px between projects.",
+  "seenIn": [
+   "aww-leo-parpeix-portfolio-2026"
+  ]
+ },
+ {
+  "id": "showcase-cards-cross-a-held-photograph",
+  "role": "showcase",
+  "name": "Cards crossing a held photograph",
+  "shape": "carousel",
+  "tags": [
+   "photo-led",
+   "colour-field"
+  ],
+  "directions": [
+   "place-carries-it",
+   "pinned-poster",
+   "colour-chapters",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper about 350svh tall holds a sticky stage of 100svh. On the stage one full-bleed photograph of the subject's ground (a landscape, a material, an aerial texture) stays still, darkened evenly with `filter: brightness(0.6)`. Over it a track of four to six cards travels from right to left as the page scrolls (a `translateX` tied to the wrapper's scroll progress), so one card is always near the centre and the next shows about 300px at the right edge. Each card is 720×560px, square corners, vertically centred with 170px of photograph above and below it: its top 68% is a photograph of one item (a room, a building, a stop on the route), its lower 32% a flat panel in one earth tone from the palette, a different tone per card at a similar lightness, holding the item's name at clamp(32px, 3vw, 48px) bottom-left with 28px padding and a two-line description at 16px right-aligned beside it. Cards are 40px apart. The section heading, two to four words at clamp(40px, 4.4vw, 68px) in the paper colour, sits top-left on the stage over the photograph before the first card arrives and moves out ahead of it. Keep the run under three screens; at its end the stage releases into the next section.",
+  "mobile": "No pin and no sideways travel. The photograph runs full-bleed as a 4:5 band under the heading at 9vw, and the cards follow it at full width minus 16px margins, 24px apart, each a 4:3 photograph over its colour panel 140px tall, with the name at 26px and the description at 16px.",
+  "seenIn": [
+   "aww-lpas",
+   "aww-white-desert"
+  ]
+ },
+ {
+  "id": "list-object-rides-the-schedule",
+  "role": "list",
+  "name": "Object riding down the schedule",
+  "shape": "table",
+  "tags": [
+   "object-led",
+   "type-led",
+   "dense"
+  ],
+  "directions": [
+   "hero-object",
+   "borrowed-category",
+   "loud-flat-poster",
+   "dark-room",
+   "specimen-catalogue"
+  ],
+  "needs": [
+   "product-photo"
+  ],
+  "blueprint": "A schedule of dated events (races, concerts, tastings, departures) with the subject's own object travelling down it. On a dark flat ground, on the page's own margins, the heading is one centred line of condensed capitals at clamp(40px, 3.6vw, 56px), split into its two words with a gap between them, and in the gap stands a cut-out photograph of the object seen from above or in profile, about 320px wide (22% of the width) and up to 64% of the viewport tall. Below come full-width rows 84px tall, each a two-part grid: the event's name at 26px in condensed capitals on the left with a one-line note at 16px in the soft ink under it, and the date and place right-aligned at 16px on the note's baseline. Rows alternate between the ground and a tone one step lighter instead of rules. As the page scrolls, the object leaves the heading and moves down the centre line over the rows (`position: sticky` in a centred column that spans the list, `pointer-events: none`), where it covers only the empty middle of each row and marks how far the reader has come. The row for the next event takes the accent colour across its whole band, with its name and date in the accent's ink. About ten rows fit on one screen; the list ends 120px under the last row.",
+  "mobile": "Rows stack at full width on 20px margins: the name at 22px on up to two lines, the note at 16px, the date under the note. The object shrinks to 40% of the width and stays in the heading; it does not travel, because on a phone it would cover the rows. The accent band stays on the next event.",
+  "seenIn": [
+   "aww-nick-ho"
+  ]
+ },
+ {
+  "id": "gallery-rising-triptych",
+  "role": "gallery",
+  "name": "Rising triptych",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "place-carries-it",
+   "uneven-photographs",
+   "pinned-poster",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "A wrapper about 200svh tall holds a sticky stage of 100svh on the plain page ground. The heading, two lines at clamp(32px, 2.8vw, 44px), is centred in the top fifth of the stage with one sentence at 17px under it. From the bottom edge three photographs rise as the page scrolls, each at its own speed. The centre one, a 4:5 portrait, starts 620px wide with only its top quarter showing and grows (scale and travel on a scroll-linked timeline) until it is about 760px wide with its top 40px below the sentence, cropped by the bottom edge, so it never reaches the heading. In the study it slides over the heading; here nothing lies on top of a heading. The two outer ones, each 360×530px, stand beside it with 10px gaps, their tops always 55px lower than the centre's, and by the end they are cut by the left and right viewport edges. Square corners, no captions, one consistent light across all three (warm interiors with warm, cold coast with cold). Under reduced motion show the end state with the heading above the three photographs.",
+  "mobile": "The centre portrait starts at 60% of the width and grows to nearly the full height; the outer two show as 40px slivers at the screen edges. The heading and sentence sit in the top third above it.",
+  "seenIn": [
+   "aww-sobha-privy-collection"
+  ]
+ },
+ {
+  "id": "showcase-portrait-on-its-own-ground",
+  "role": "showcase",
+  "name": "Portrait on its own ground",
+  "shape": "full-bleed",
+  "tags": [
+   "photo-led",
+   "colour-field"
+  ],
+  "directions": [
+   "colour-chapters",
+   "dark-room",
+   "hero-object",
+   "editorial-report"
+  ],
+  "needs": [],
+  "blueprint": "One chapter per screen, three to six chapters. Each is a full-bleed field 100svh tall whose flat colour is taken from its own photograph: the darkest large tone in the picture (a deep brown for a wooden interior, a slate for a winter coast), so picture and page seem to be one surface. In the centre stands one portrait photograph at 3:4, 506×675px (75% of the height), top 112px, square corners, no frame. Type sits in the corners on 32px margins in the light ink: the chapter's title at clamp(28px, 2.4vw, 36px) top-left as its heading; one sentence at 17px, max 32ch, bottom-left; a text link to the chapter's page bottom-right. As each chapter arrives its field starts as a panel inset 20px from the viewport edges and grows to full-bleed, while the portrait scales from 0.92 to 1 (background colour over 600ms, scale over 800ms, both easing out), so the change reads as the room changing, not as a new slide. A chapter may hold a short muted loop or a single enlarged letterform in place of the portrait, on the same kind of field. The first chapter's title doubles as the section heading.",
+  "mobile": "The portrait becomes 80% of the width at 3:4, centred at 45% of the height. The title sits top-left at 24px, and the sentence and link stack bottom-left at 16px under the portrait. The field still takes the picture's darkest tone.",
+  "seenIn": [
+   "aww-squarespace-foundations"
+  ]
+ },
+ {
+  "id": "cta-question-at-both-edges",
+  "role": "cta",
+  "name": "Question at both edges",
+  "shape": "statement",
+  "tags": [
+   "type-led",
+   "poster"
+  ],
+  "directions": [
+   "type-only-statement",
+   "sentence-as-layout",
+   "dark-room",
+   "loud-flat-poster"
+  ],
+  "needs": [],
+  "blueprint": "For a closing choice between two answers: book or ask, this date or that, the tasting or the tour. A flat field exactly 100svh tall in the darkest tone. The question is a two-line heading at clamp(110px, 11vw, 168px), leading 1.0, centred, about 54% of the width: line one with its cap line 32px under the field's top edge, line two with its baseline 24px above the bottom edge. The band of about 560px between them is empty except for one row at its optical centre: two solid rectangular buttons, each about 200×56px with its label at 18px in medium weight, their inner edges 120px either side of the centre axis, and between them, exactly on the axis, the word 'or' at 18px in the soft ink. 16px under the row, centred, one line at 16px in the soft ink says what happens after either choice. The type above and below closes the empty band, so it reads as held breath rather than a gap.",
+  "mobile": "The question drops to 18vw, still two centred lines, line one 32px from the top and line two 24px above the bottom. The buttons stack at the centre at 72% of the width, 12px apart, with 'or' between them and the line of explanation under the second.",
+  "seenIn": []
+ },
+ {
+  "id": "intro-headline-crossing-onto-a-photograph",
+  "role": "intro",
+  "name": "Headline crossing onto a photograph",
+  "shape": "split",
+  "tags": [
+   "type-led",
+   "photo-led"
+  ],
+  "directions": [
+   "sentence-as-layout",
+   "editorial-report",
+   "place-carries-it",
+   "uneven-photographs"
+  ],
+  "needs": [],
+  "blueprint": "A white or pale ground. A photograph taller than it is wide, 720px wide (columns 7–12), sits flush against the right viewport edge with its top at 46% of the section's first screen and runs below the fold. The heading starts on the 32px left margin across columns 1–8: two lines of light-weight serif capitals at clamp(64px, 5.6vw, 88px), leading 1.04, the first line starting 34% down the screen and the second placed so that its right half runs onto the photograph's upper-left corner. Choose a picture whose upper-left quarter is pale enough for the ink, or set the second line twice, in the ink and in the paper colour, each copy clipped to its side of the photograph's left edge. Under the heading on columns 1–5, one paragraph of up to 25 words at 22px, leading 1.4. At the bottom-left a second, smaller photograph of 360×400px enters, cropped by the screen's lower edge, and on the next screen becomes the left half of a staggered pair with the large one. Nothing else is on the screen.",
+  "mobile": "The heading sits at 10vw on two lines on the 20px margin. The photograph becomes 75% of the width, flush right, and starts under the heading's first line so the second line crosses its top-left corner. The paragraph follows at 17px, then the small photograph at 50% of the width on the left margin.",
+  "seenIn": [
+   "aww-sobha-privy-collection"
+  ]
+ },
+ {
+  "id": "features-four-cards-dealt-into-a-fan",
+  "role": "features",
+  "name": "Four cards dealt into a fan",
+  "shape": "pinned",
+  "tags": [
+   "colour-field",
+   "poster"
+  ],
+  "directions": [
+   "pinned-poster",
+   "loud-flat-poster",
+   "borrowed-category",
+   "colour-chapters",
+   "specimen-catalogue"
+  ],
+  "needs": [],
+  "blueprint": "Four values, rules or features, each on a card dealt onto the table as the page scrolls. A wrapper about 400svh tall holds a sticky stage of 100svh on the page's darkest flat ground. Each card is a portrait panel of 340×400px with a 20px radius, filled with its own palette colour (four colours that differ clearly in lightness), no border, no shadow. On a card, with 28px padding: its name at 32px in heavy capitals on one or two lines at the top, a photograph or a single picture of the thing at 60% of the card's width in the middle, and one sentence at 16px at the foot. Card one lands alone at the centre; each further quarter of the wrapper deals the next from below the bottom edge, landing 250px to the right of the one before, rotated between -4 and 4 degrees and overlapping only its right 90px, until the four form a fan about 1,090px wide centred on the stage. Keep each card's name, picture and sentence inside its left 240px, so no card ever covers another's words. In the study the cards overlap by two thirds and bury the earlier titles; here nothing lies on top of text. The heading, two to four words at clamp(40px, 4vw, 60px), sits top-left on the stage on the 32px margin with one sentence at 17px under it. The stage releases after the fourth card has settled; under reduced motion the fan is simply there.",
+  "mobile": "No pin. The cards sit in one row that scrolls sideways with scroll-snap, each 82% of the width with the next peeking in at the right edge, all upright. The heading and sentence sit above the row.",
+  "seenIn": [
+   "aww-made-with-gsap-1"
+  ]
+ },
+ {
+  "id": "work-small-index-large-picture",
+  "role": "work",
+  "name": "Small index, large picture",
+  "shape": "pinned",
+  "tags": [
+   "photo-led",
+   "type-led"
+  ],
+  "directions": [
+   "split-stage",
+   "pinned-poster",
+   "editorial-report",
+   "product-performs"
+  ],
+  "needs": [],
+  "blueprint": "A sticky stage of 100svh split 38/62. The right 62%, from x 560 to the right viewport edge, is one photograph the full height of the stage, bleeding off the right, top and bottom edges, square corners: a staged picture of the current project in use, in a real place. The left column, from the 20px margin to x 520, holds the heading at the top, two lines at clamp(80px, 8.2vw, 120px), leading 0.95, 40px under the navigation; then empty ground; then, anchored to the bottom with a 32px margin, the index: three to six rows 44px tall, each with the project's name at 28px on the left and two or three disciplines at 16px right-aligned in the soft ink. The current row is in the full ink and the others at 40% opacity; rows are told apart by space only. Each project gets one viewport of scroll: as it arrives, its photograph wipes in from the bottom edge (`clip-path: inset(100% 0 0 0)` to `inset(0)` over 900ms) and the current row moves down the list. The empty middle of the left column is closed by the heading above it and the index below.",
+  "mobile": "The heading sits at the top at 14vw on two lines, then the photograph at full width at 4:5, sticky under the heading while the index rows below it change the picture; or let each project simply stack as photograph and row.",
+  "seenIn": [
+   "aww-neutomni"
+  ]
+ },
+ {
+  "id": "list-cards-fold-into-spines",
+  "role": "list",
+  "name": "Cards that fold into spines",
+  "shape": "pinned",
+  "tags": [
+   "type-led",
+   "colour-field",
+   "dense"
+  ],
+  "directions": [
+   "editorial-report",
+   "colour-chapters",
+   "page-is-the-object",
+   "dense-tiles"
+  ],
+  "needs": [],
+  "blueprint": "For a journal, a run of notes or a list of chapters without pictures. A wrapper about 400svh tall holds a sticky stage of 100svh. The heading, two to four words at clamp(48px, 4.2vw, 64px), sits top-left on the 32px margin, 120px from the top. Under it a band 360px tall spans the content width and holds a horizontal deck of text cards, each about 620px wide, in three neighbouring flat tones of one hue taken in turn. On a card, with 32px padding: its title at 30px on up to two lines, leading 1.1; an excerpt of two lines at 16px; and along the bottom edge the date on the left and a text link to read it on the right, both at 16px. As the page scrolls, each step slides the next card in from the right edge and squeezes the earlier ones into slivers 120px wide stacked edge to edge at the left, like book spines, where only the first letters of their titles show, clipped by the sliver. Clicking a sliver brings its card back. 48px under the band, the number of entries and a link to the full list sit at 17px on the left margin, so the stage does not end on an empty floor.",
+  "mobile": "No pin and no slivers. The cards stack at full width with 12px gaps, each in its tone, the title at 24px, the excerpt at 16px, the date and link at the foot. The heading sits above them at 10vw.",
+  "seenIn": [
+   "aww-noho"
+  ]
+ },
+ {
+  "id": "gallery-photographs-around-a-heading",
+  "role": "gallery",
+  "name": "Photographs gathered round a heading",
+  "shape": "mosaic",
+  "tags": [
+   "photo-led",
+   "quiet"
+  ],
+  "directions": [
+   "uneven-photographs",
+   "place-carries-it",
+   "quiet-instrument",
+   "dark-room"
+  ],
+  "needs": [],
+  "blueprint": "A band about one screen tall on the plain page ground, used as the page's one deliberate rest. At its visual centre sits the heading, two lines at clamp(32px, 2.6vw, 40px) in a light weight, centred, with one sentence at 17px under it and a text link beneath that. Around it six to eight small photographs are scattered irregularly across the middle columns (x 320–1120; the outer 320px on each side stay empty, equally), each 160–200px wide at about 9:10, square corners, at different heights with 60–200px of air between them. Two of them come within 40px of the heading's block, which their drift never reaches, so the cluster reads as gathered round it rather than laid on a grid. No captions and no frames. Each photograph drifts at its own rate as the band passes (4–12% of its own height on a scroll-linked timeline), so the cluster loosens and tightens; under reduced motion it stays put. The pictures come from one place or one day and share one treatment.",
+  "mobile": "Five photographs at 30% of the width sit offset left and right around the centred heading, two above it and three below, none cut by an edge. The heading drops to 7vw on two lines.",
+  "seenIn": [
+   "aww-tengile-malamala-collection",
+   "aww-moto-finance"
+  ]
+ }
+]