Five passes turn any design request into a page whose visual system was derived from that subject
It is a method, not a theme: four authoring passes that end in a measured verification loop, which can hand the work back before anything ships. This page was produced by running that method on the skill itself.
The whole method, one figure
Your request enters as words at the far left and leaves as a file at the far right. In between: three passes that decide how the page will look before any markup exists, one that writes it, and one that measures it — and can hand the work back. Everything later in this page is a zoom into one of these six boxes.
Grammar · routed
Pass 3 deletes every component the page does not use. A method has no delivery
slices, so .phases never shipped.
Inspector · 05 verify
What pass 05 found in this page — read back out of the render, not eyeballed. Section 05 zooms in.
What the five boxes actually do
The order is load-bearing. The palette is decided before any markup exists, so the page cannot drift into a house theme; the scaffold is copied before composition, so quality has a floor; verification runs last and can send the work back to pass 04.
references/scaffold.html, rename the
semantic families to the plan’s, re-derive every value, and delete every component the
page does not use. Its token structure is a contract; its example palette is not.
references/scaffold.html
Four families, taken from this subject’s own distinctions
Semantic colour is not decoration; each family names something the reader has to keep apart. For a method, those four things are: a pass you perform, a clause that binds you to a number, evidence you measured, and a failure the skill has already met. A different subject yields different families — that substitution is the whole idea, and section 07 shows it.
its own distinctionsfrom the subjecta pair, not a colour:root · media · [data-theme]on surface AND on softAn authoring pass: something a designer decides, not something a checker can compute.
A clause of the contract: a number the page must satisfy — widths, measures, ratios.
Measured evidence: a value read back out of the rendered page, never an estimate.
A failure mode the skill documents because it has already shipped past someone once.
Dark values are re-picked, not inverted — compare any pair of rows above and the second is not a mathematical flip of the first. Soft grounds go deep and desaturated; accents brighten to hold their ratio. Theme changes travel through tokens only: no component carries a rule inside the colour-scheme media query, which is why the OS path and the toggle path can never disagree.
| Clause | Value | Why it is a number and not a taste |
|---|---|---|
| Semantic contrast | ≥ 4.5:1 | On --surface and on its own -soft ground. The soft-ground half is the binding one: light accents that look right land near 3:1 there. |
| Surface levels | 3 minimum | --bg, --surface, --surface-2. Depth comes from layering, not from stacked shadows. |
| Theme blocks | 3 | :root, the dark media query, then both [data-theme="dark"] and [data-theme="light"] so a host toggle overrides the OS in both directions. |
| Canvas | ≤ 1080 px | Wider figures scroll inside their own wrapper; the body itself never scrolls sideways. |
| Prose measure | ≤ 68 ch | Running paragraphs only. Structured list rows — non-goals, acceptance — may run to ~82 ch. |
| Body type | 15–16 px / 1.6 | Sans. Mono is confined to eyebrows, labels, data and code — mono body reads as a terminal dump. |
| Heading scale | 34 / 21 px | h1 at weight 650 and −0.015em tracking; both levels text-wrap: balance. |
| Eyebrows | 10.5–11 px | Uppercase mono at 0.1–0.14em tracking, paired with the h2 on one baseline. |
| Radii | 4 / 6 / 8 / 10 · 99 | One scale for the whole page. Pills are the only exception. |
| Mockup rails | ≤ 430 px | Combined, at a 1080 canvas — so the drawn surface keeps roughly 640 px to be a surface. |
Every concept is routed, never free-styled
Composition is a lookup, not an improvisation: identify what a concept is, then take the component that already encodes it. The last column is this page’s own routing — including the one component that was deleted for having nothing to describe.
| The concept is | Component | On this page | |
|---|---|---|---|
| Page identity + load-bearing decisions | header.page | Title, lede, five chips naming the skill, its floor and its gate | used |
| A UI or product surface the page describes | .mock | Section 01 — the centerpiece: all five passes plus the hand-off, with pass 05's readout in the rail | used |
| Linear pipeline whose stages carry state | .strip | Section 03 — how one semantic family is derived, subject → families → pair → theme blocks → ratio | used |
| Ordered passes through a system | .steps | Section 02 — the zoom into each pass, top border encoding authored / bound / proven | used |
| Enumerable facts, N items × M properties | table | Sections 03, 04, 07 — the numeric clauses, this routing, and the generalisation | used |
| Ordered messages between ≤6 participants | .seq | Section 05 — the zoom into pass 05: seven messages between agent, browser, probe and files | used |
| Verifiable done-criteria | .accept | Section 08 — each row carries the measurement that discharged it | used |
| Refused scope | .nongoals | Section 06 — the looks the skill will not spend its freedom on | used |
| A state code the figures share | .legend | Above the mockup, once, before the first figure that uses the four families | used |
| Evidence the page rests on | footer | Real paths, the capture command, the measured numbers | used |
| Delivery slices with estimates | .phases | Deleted at pass 03 — a method has no shippable slices, and a card with invented estimates would be a lie | cut |
| Loop-backs, trust boundaries, hand-drawn architecture | diagram skill | Escalation — inline its SVG in a figure block instead of forcing the grammar | above |
| >6 participants, alt/loop fragments, state machines | mermaid | Escalation — where the host renders it, else the diagram skill. Never ASCII art | above |
Inventing a component above this floor is encouraged when the subject demands one — the token cards in section 03 and the trap cards in section 05 are two, built for this page and kept strictly on its tokens.
The loop that decides whether the page is finished
This is the fifth box of the overview, opened up. Looking is mandatory but not sufficient: the eye passes a clipped figure, a 3.2:1 pill and a page whose bottom third was never rendered. So each pass runs headless Chrome twice, reads both images back, and then interrogates the DOM for the three things looking cannot settle.
Three rules make the loop honest, and each one exists because of a specific way a page lies about being finished.
--window-size
is the window, not the viewport: headless keeps 87 px for chrome, so even a
“full-height” capture loses the last lines.
size the window to scrollHeight + the measured viewport delta
.edges path { fill: none } cascades into the marker’s
own path, so every head renders empty — on a figure that otherwise looks correct.
.edges marker path { fill: currentColor } + style="color:var(--token)"
What the freedom is never spent on
Where you pin a direction, the skill follows it exactly. Left free, it still refuses the handful of looks that read as an AI reflex rather than a decision.
What happens when you hand it something else
Only one input changes: the distinctions the reader must keep apart. Those become the semantic families, the families drive the palette, and the grammar routing follows from what the content is. Nothing about the method is specific to design.
| Hand it | What a reader must tell apart | Families it would derive | Components it would route to |
|---|---|---|---|
| This skill | Passes of a method, numeric clauses, measured evidence, documented failures | from the subject |
mock, strip, steps, tables, seq, non-goals, accept |
| A migration plan | What exists today, what gets built, what a human must approve, what is done | exists · build · gate · ok |
strip for the cutover, steps for one run, phases for the slices, accept |
| An incident review | Timeline fact, contributing cause, mitigation applied, still open | fact · cause · fix · open |
seq for the timeline, table for the causes, accept for the follow-ups |
| An API proposal | Stable surface, new surface, deprecated, authenticated-only | stable · new · sunset · authed |
mock of the console, table of endpoints, seq of one exchange, non-goals |
| A capacity report | Measured now, projected, headroom left, breach threshold | now · projected · slack · breach |
tables with tabular-nums, strip of the growth path, accept as alert thresholds |
What you can therefore predict about any request you hand it: a three-line plan you can argue with before code exists, a palette derived from your subject rather than a house style, components chosen by a lookup you can audit, and a page that was screenshotted and measured before it reached you.
What had to be true before this page was handed over
documentElement.scrollHeight and read back as images, not assumed. 1280 × 6991, twiceoverflow-x wrapper reports scrollWidth === clientWidth, so no figure is silently clipped. 6 wrappers · 0 clippeddata-theme and persists it, and no component carries a rule inside the colour-scheme media query. tokens only