Layout

Structural components that define page regions and navigation.

BaseLayout Root HTML shell for every non-system page. Read section
Clock Group The clock, time readout, and timezone toggle composed as a single unit. Read section
Divider One hairline across the reading area, marking where one group of blocks ends and the next begins. Read section
Figure The framed block in the home flow: a hairline frame drawn as an outline, a label in its top-left corner, and a payload that fills everything below. Read section
Footer Page footer with copyright, profile links, and the build credit. Read section
Nav The site's only navigation, composed as a floating cluster rather than a bar. Read section
PageFlow The home composition — the sequence of blocks that / and every /for/ page are both made of. Read section
Prior Work Grid The five prior engagements as a row of metric cells, at the head of the home flow before anything is said in words — the evidence the headline below it then argues from. Read section
SkyBand A Bayer sky at the two ends of the page. Read section
Spotlight Card The featured case study. Read section
Summary Card A thing summarised to one value and one line, linking to the thing itself. Read section
SystemLayout Root HTML shell for every /system route. Read section

BaseLayout

Root HTML shell for every non-system page. Sets up the document head (meta, font preloads, title), mounts the construction grid, Nav, page content, and Footer, then boots the client-side systems (colour, reveal, nav, clock) via a main.ts script import.

Foundations

Behaviour

Contains SkyBand GridOverlay Nav Footer
Used by Home Variant Project NotFound
Roledocument
KeyboardNo interactive elements of its own — delegates to Nav and Footer
WhenEvery page outside /system — Home, Variant, and Project views.
Not whenThe /system page, which uses SystemLayout instead for its sidebar/topbar chrome.
PreferSystemLayout for /system routes
One per page, wraps all page contentOwns the single <html>/<body> document shell — nesting layouts would duplicate the head and chrome
variant.noindex sets a noindex meta tagPersonalised /for/[slug] pages can be excluded from search indexing per-variant

Clock Group

The clock, time readout, and timezone toggle composed as a single unit. The connection between viewer and maker rendered as a navigable control.

00 06 12 18
12:00BST

Foundations

Typography heading-lg-mono body-mono
Colour ink ink-secondary accent
Spacing space-within space-related space-025 cell

Behaviour

Contains ColourClock Button Icon
Used by Nav System Section
Rolegroup
KeyboardToggle buttons are keyboard-accessible via Button component; the phase icon is a button and reachable in sequence
WhenNav left group — always present via Nav.
Not whenNever instantiate outside Nav.
One live instance per page; documentation renders use specimen modeMirrors ColourClock: a specimen is static and carries none of the data hooks (readout, toggles, phase) the nav script binds, so it can sit on /system without stealing the live bindings
The phase icon is reported, never chosenIt is derived from the solar bounds for the viewer's latitude, so it stays true at any location and on any date. An authored icon would be wrong twice a year at every latitude and permanently wrong at the poles
Dawn and dusk share one iconThe sun is on the horizon in both; which way it is travelling is what the dial beside it already says, and a second glyph would state it twice
Below 800px the compact form is the dial alone — the readout stack is not renderedIn the flow at the top of a phone screen (Nav) the cluster gets a fraction of the band it gets beside a reading column, and the dial is the part of this group that is read rather than stated. It still scrubs, so the time is still reachable; it is just not written out. Both lines go together: a toggle for a time that is not shown selects nothing visible, and a time with no toggle cannot say whose it is

Divider

One hairline across the reading area, marking where one group of blocks ends and the next begins. The page used to draw a rule under every section automatically (the bottom hairline on .grid); the design wants rules between groups, not after every block, so the rule stops being a side effect of being a section and becomes a thing an author places on purpose.

Foundations

Colour border

Behaviour

Used by PageFlow Project System Section
Rolepresentation
KeyboardNone — not focusable and not interactive
WhenBetween two groups of blocks in the page flow, where the change of subject should be seen rather than only felt.
Not whenBetween blocks inside one group — the flow gap already separates them. Around a bordered block — use Figure, whose frame is its own edge.
PreferThe flow's --space-sections gap alone where the break does not need to be drawn
It spans .col-reading, not the prose columnWhat it separates is groups of full-reading-width blocks — a rule inset to the prose column would read as belonging to the passage above it rather than to the boundary between two runs of them
No margin and no padding, ever — and no prop that would add oneThe parent .flow owns every vertical distance on the page (DESIGN.md → Where space comes from, third principle: space belongs to the relationship and is owned by the container). A margin here would be the component holding itself off its neighbours, which is the exact thing the principle forbids, and validate-css-patterns.mjs fails the build on it
It takes no props — no weight, no spacing, no variantOne boundary treatment. A second weight would mean two kinds of boundary, and nothing in the design has two; a spacing prop would move space ownership out of the flow. If a boundary ever needs to look different, that is a change to this rule, not a parameter on it
Rules mark group boundaries, not every blockA rule after every block makes all the boundaries equal, and then none of them means anything. The blocks inside a group are separated by gap alone

Figure

The framed block in the home flow: a hairline frame drawn as an outline, a label in its top-left corner, and a payload that fills everything below. It is the container shape of the reading area — where a passage splits itself into a label column and a prose column, a figure ignores the split and takes the full reading width. The cycling map is its one payload today; anything else that wants the frame gets it by being put inside one.

Summer 2025 Bicycle adventure

Foundations

Colour border
Spacing space-inset

Behaviour

Contains Identity
Used by PageFlow System Section
Rolefigure
KeyboardNone of its own — the frame is not interactive; anything focusable is in the payload
WhenA block in the home flow that needs a frame around it — a map, an embed, a grid of cards.
Not whenA run of attributed prose — use Passage. A single case study that should read as one clickable card — use SpotlightCard.
PreferPassage for anything that is mostly words
The frame is an outline, never a borderA border occupies layout — with border-box the outer size holds but everything inside starts a pixel in, which put the label and payload off the 24px cell. An outline takes no space, so the inset stays a spacing role and nothing needs a compensating calc. Enforced by validate-css-patterns.mjs check 9
The frame spans the full reading width, label column includedA container block is the shape that ignores the label/prose split — inset it to the prose column and it stops reading as a frame around the page and starts reading as an image with a caption beside it
The payload sits flush to the frame on every edge except under the labelThe frame is the payload's edge. A map that stops short of it, or a grid whose cells float inside it, has two boundaries — the one drawn and the one implied by the inset. The frame taking no layout space is what makes this literal: the payload really does reach the edge, and the hairline is drawn over its first pixel. That last half was aspiration until 2026-08-04 — an outline declared on the figure paints before its positioned descendants, so the cycling map's own fill covered the frame on all four of its edges. The stroke is on an absolutely positioned ::after now, which is still out of flow and still takes no space, but paints after every payload
The label is Identity, sized by Identity; the mark is optional, the label text is notOne treatment for every corner label, whether the thing it names has a logo or not (a season of riding does not, and is the only labelled figure left now the Tenon block is a SpotlightCard rather than a framed embed). A second markless label component would be the same two lines rendered twice. The frame asks for no size and no arrangement: a sub-line makes the label two lines and its mark large, and that rule lives in Identity so this corner label matches every other attribution on the page rather than being the one that does not
A payload may define its own internal columns; the frame never doesThe sanctioned internal-division exception belongs to whatever the payload is, not to the frame. The frame's only job horizontally is to span .col-reading
No label at all is a supported state, not a degraded oneA frame is a boundary, not a captioned exhibit — a payload that names itself needs no label, and making the caption mandatory would put an empty row above it

Footer

Page footer with copyright, profile links, and the build credit. Sits inside the site grid using col-page placement. Email is deliberately not here — it is the nav cluster's call to action, and a second copy of it in the footer would split the one thing the page is asking for.

Foundations

Typography body-mono
Colour ink ink-secondary surface
Spacing space-related space-blocks space-sections space-page footer-sky

Behaviour

Used by BaseLayout System Section
Rolecontentinfo
KeyboardLinks are standard anchor elements
WhenEvery page — included via BaseLayout.
Not whenNever instantiate manually — BaseLayout handles it.

Nav

The site's only navigation, composed as a floating cluster rather than a bar. Time readout and colour clock on the left, the contact disc and the design-system disc stacked on the right. It sits over the page instead of banding across the top of it, so no page ever starts underneath a strip of chrome.

12:00BST

00 06 12 18
/DS

Foundations

Spacing space-within space-page space-inset clock-size cell page-max

Behaviour

Contains ClockGroup Button
Used by BaseLayout System Section
Rolenavigation
KeyboardTab order follows the cluster left to right, top to bottom: clock dial (arrow keys scrub time), the two time toggles, the contact disc, the design-system disc. Both discs take the global accent focus ring.
WhenEvery page — included via BaseLayout. On /system, mount with the specimen prop.
Not whenNever instantiate a live Nav manually — BaseLayout handles it.
One live Nav per page; /system documents it in specimen modeFixed positioning and the ColourClock singleton inside it both assume a single live instance. The specimen renders the same cluster static and in flow — no veil, no landmark role, no data hooks — so the documentation page shows the composition without mounting a second navigation over itself
Out of the document flow above 800px, in it belowAbove 800px the page composition leaves the right of the grid empty for this cluster, and a nav that occupied a row would put every page back under a bar with that column serving no purpose. Below 800px there is no empty column — the reading column spans the whole grid — so there is nothing for the cluster to float over that is not content, and staying fixed was costing every phone screen 204px of clearance at the top to keep out from under it. In the flow it contributes its own height and that clearance disappears
Top-right of the centred page at every widthAbove 800px: --space-page from the top and in from the centred page's right edge, which is the centring offset plus --space-page (the page centres above the 1320px cap and the cluster's cells are counted inside it; below the cap the offset is zero). Below 800px it is a block on the page's own columns, 2 / -2 and right-aligned, one cell down from the top — the same corner, reached by placement rather than by fixing. The position the earlier rule was written to remove is a different one: bottom-anchored, still fixed, still overlaying the reading column and legible only because of a --ground scrim under it. That is not what is here
A page either aligns to the cluster or clears it, and either way the page decidesA fixed element contributes no height, so nothing below can space itself off it — whatever a page does about the cluster, the page has to state. The home flow aligns: its byline sits on the cluster's own centre line at every width above 800px, from var(--nav-cluster-align). 404 clears it instead, from var(--nav-cluster-bottom), because its first block is a reading column rather than a byline. The project page does neither any more: it aligns a return trail to the cluster from var(--nav-cluster-align-line), which is the same construction for a one-line block. Both tokens are composed in base.css from the cluster's own parts, so neither page measures anything off a render
Below 800px the cluster is the dial and the two discs, and the readout stack is not renderedThe band the cluster gets on a phone is a fraction of the one it gets beside a reading column, and the time is the part of it that can be dropped without dropping a route: the dial still scrubs, so the time is still reachable — it is just not stated in words. The two discs are the site's only navigation and stay at every width. The cost of the flow position is that they scroll away, which is accepted: the footer carries Email and LinkedIn, and returning to the top is one gesture
The veil is derived from --ground, never a literal colourGround is a function of the time of day and flips at 6am/6pm — a fixed light scrim reads as a white smear across a night page
The veil is a Dithered Field, not a gradient — the pattern states the grid, the pitch and how coverage endsA gradient has a box and the box has to stop somewhere. Here it stopped on the page's right edge with the fade still at full ground, which was invisible until the sky band ran past the page to the window and put a seam down every wide screen. Dithered coverage reaches zero on its own terms, so there is no boundary for anything behind it to reveal at any width, and cover at the cluster is unchanged: coverage is 1.0 there, which is every cell, which is solid
The cover is the cluster's own measured box and the spread is what happens outside itIt was a falloff from the page's top-right corner for two rounds, and the reach was never the problem: the cluster sits some way in from that corner, so a shape centred there has to swell until it reaches the far side of the clock, and by then most of what it covers is page rather than cluster. Measuring nav's rect — per line, plus the dial, and never the discs, which carry their own backgrounds — is also the only version of this that follows the cluster when it changes shape at 800px
The fringe breathes by cross-fading two fixed noise fields, and redraws at 12fpsTranslating a field would be drift, and the sky above already drifts — a second thing sliding at the top of the page reads as the veil crawling. Cross-fading flips cells at the limit without any cell travelling. The throttle is because this element is fixed and always on screen, so unlike the band there is no scrolling out of view to stop it, and the output is quantised: between one cell flipping and the next there is nothing to draw
One shape at every width the cluster is fixed at — a falloff centred on the page's top-right cornerIt is a legibility treatment for the text the fixed cluster passes over, which is why it is centred on the cluster and why it reaches as far as it does. An earlier note here claimed the opposite — that content was not what the veil was for and only the clock needed a ground — and narrowed it to cover the dial alone. That was wrong: below the cap the reading column spans the full grid and body copy scrolls under the whole cluster, which is exactly the case the veil exists for and exactly where it matters most
The veil belongs to Nav, not to the pageIt is fixed to the same corner by the same tokens, exists for no other element, and must move if the cluster moves. Unlike the clearance the page needs, it reserves no flow space, so there is nothing the page has to be told
The veil renders as a sibling of <nav>, never inside it, at z-index 8The cluster sets z-index: 10 and so is a stacking context — a child of it paints above everything it outranks, whatever z-index the child is given. Written as a child, the veil painted ground over the chrome beneath it rather than under it. The order it needs is page content, then the veil, then the cluster; only the clock lacks a background of its own
The home link stays a plain href="/" anchorinitVariantOrigin() in main.ts rewrites a[href="/"] so /for/ visitors return to their variant page; a computed or scripted link is invisible to it

PageFlow

The home composition — the sequence of blocks that / and every /for/ page are both made of. It exists because the two views differ in four values and in nothing else: who is addressed, what the headline says, which projects appear, and what is said about them. Holding the sequence in one place is what makes block order a fact rather than a rule two files have to keep agreeing on, and it is why a new outreach page is a YAML file and no code at all.

Foundations

Typography display body-lg
Spacing space-page nav-cluster-align space-inset

Behaviour

Contains Byline PriorWorkGrid SelectedWork Passage Figure SpotlightCard CyclingMap Divider
Used by Home Variant
Rolenone — a flow container, its children carry the semantics
KeyboardNone of its own; each passage and each metric cell is a link
WhenThe body of / or of any /for/[slug] page — both views render this and add nothing to it.
Not whenA project page, which has its own composition. Any single block of this flow — use that block directly.
PreferA new variant YAML file over any change to this component
The sequence of blocks is fixed and takes no prop that could reorder itWhat a variant may change is settled — the headline, the company, and which projects appear with what copy. Order is not on that list, and a per-page order prop would make it possible without anyone deciding to
Vertical distance comes from the nested flows and from nothing elseThe outer flow separates groups at --space-sections, an inner flow separates the blocks of one group at --space-blocks, and no block carries a margin. That is what lets a variant add or drop a passage without a spacing value being retuned
The metrics grid is a group of its own, and it precedes the claimThe evidence is read before the argument, not offered in support of one already made — five clients and five numbers are what earn the headline the right to make a claim, so they come first and stand at a section's distance rather than sitting inside the head as its last block. This reverses the earlier reading, where the grid was a block of the head group following the headline; the August designs put the row above the h1 and separate all three at --space-sections. The order is the DOM's — the row precedes the headline in the document exactly as it does on screen, so the `order` rule that once floated it up is still gone
Below 800px the grid falls below the claim, by `order` and only thereOn a phone the head is the whole screen and the row would push the headline off it, so the head reads first and the evidence follows. It is the one place on the page where the visual order and the document order differ, and the direction is chosen: the DOM keeps the desktop reading, so a screen reader hears byline, evidence, claim at every width. Everything below the row keeps its document order — equal `order` values sort by source
The selected-work group is absent rather than empty when a page has no projectsA variant's passages argue the work against the role it addresses. `/` addresses nobody, so there is no argument to make and no empty state to render — it goes from the evidence to the quote
A rule closes every group except the head group, and each rule is conditional on the group it closesA rule separates subjects, where a subject is a passage together with the container that illustrates it — one group, not two. The head group is the exception: it does not close with a rule, so on `/for/` the first rule falls after the project passages and never between the metrics row and the first passage, and on `/`, where there are no project passages, the head group runs straight into the quote with nothing drawn between them. Read off Alan's July frames, which draw exactly three rules on `/for/` and none in the head. An earlier candidate — draw a rule where a text block meets a text block — was tested against those frames and rejected: it mispredicts two of the three. Do not reintroduce it. This is why the first Divider sits inside the selected-work conditional rather than after it
The h1's break is never forced by a <br> or a &nbsp;The headline changes per variant, so any break has to hold for text nobody has written yet. .t-display's own text-wrap: balance (base.css) does that generally; a component-level override tuned to one sentence's word lengths was tried here and removed once a new headline exposed it as a hack that only worked for the sentence it was measured against
A hideable block is gated through the block registry, never a literal stringhidden_sections is validated against HIDEABLE_BLOCKS in src/lib/blocks.ts, so a typo in a variant file fails the build rather than quietly hiding nothing

Prior Work Grid

The five prior engagements as a row of metric cells, at the head of the home flow before anything is said in words — the evidence the headline below it then argues from. It used to draw a frame from the union of its cells' edges; it draws nothing now. Five client marks on a line already read as a run, and dropping the frame is what lets each mark sit on the page's own left column line with the byline and the headline instead of a cell-inset in from it.

Foundations

Spacing space-blocks

Behaviour

Contains SummaryCard
Used by PageFlow System Section
Rolelist (ul) of links
KeyboardEnter follows the focused cell; each cell is a SummaryCard link into its project page
WhenThe run of prior engagements, as metric cells, anywhere in the home flow.
Not whenA single case study — use SpotlightCard. A project told in prose — use Passage. A framed block whose payload is one thing rather than a run of cells — use Figure.
PreferFigure for any other payload that wants a frame around it
Five or three cells across, then the list — never four, and never twoFour leaves the fifth card alone beside four empty tracks, which reads as a cell that failed to load rather than as a run that ended; three divides five into rows that end deliberately (3+2). Two was the third count until the list replaced it: at a phone's width a card beside another card gives each of them half a label, and a fourth arrangement between two that already work was not worth a breakpoint of its own
Equal cells from the block's own grid-template-columnsThe sanctioned internal-division exception (CLAUDE.md → Grid placement, DESIGN.md → Columns). The block takes its outer span from a .col-* utility and divides itself; the divisions deliberately do not land on page column lines, because the count is a property of the content and the page grid has no opinion about five
The count changes where a cell stops holding its label; the list arrives where the page's own columns stackHow many columns the page has and how many cards fit across it are different questions, so 1128px is measured off the longest label and not off a breakpoint chosen for the reading measure. The drop to the list is the other kind of change — the card stops being a stack and becomes a row, which is a change of arrangement rather than of count — and it belongs at 800px, where the page's columns stack and the whole reading composition changes with it
It spans .col-page, not .col-readingThe row is scanned, not read — five parallel facts taken in at a glance — so no reading measure applies to it and it is not bound by the column that holds the prose. It shares the page's left edge with everything else and simply reaches further right
Nothing is drawn — no frame, no cell edgesThe frame was the union of the cells' edges, drawn that way so a trailing empty position stayed unframed; that problem left with the drawing. What replaces it is the run itself — each cell carries its client's mark, and five marks on a line read as a run without a stroke around them. The reason for removing it is the mark's left edge: with a frame the card needs a cell inset, and the inset is what held the marks 24px in from the page's left column line the byline and the headline sit on
The row distance is the grid's, not the card'sOnce the frame is gone the wrapped rows have nothing separating them, and that separation is the relationship between one row of cells and the next — a container's to own, at the same role the flow spells between one block and the next. Row gap only: the columns still meet, because the cards are read as a row rather than as five separate tiles
Every entry renders at every widthThe count is content, not layout. Hiding the fifth cell below a breakpoint drops a client from the page on a phone, and makes the grid's shape depend on how many cells it has
No labelEach cell carries its client's mark, so the cells name themselves. A caption above them would be a heading for a list of headings

SkyBand

A Bayer sky at the two ends of the page. Shadow, body and light follow the cloud contour while seasonal solar time generates their palette. Text lines clear to ground, and coverage remains independent of the colour clock.

Foundations

Spacing sky-band-height

Behaviour

Used by BaseLayout System Section
Rolepresentation — aria-hidden, and absent from the accessibility tree: it carries no information a screen reader could use, and the time it encodes is announced by ClockGroup
KeyboardNone — pointer-events: none, and nothing in it is focusable
WhenMounted once by BaseLayout. Nothing else in production should render it; the /system specimen is the one exception, and it supplies its own positioned box because the canvas is absolute.
Not whenAs a background for any block that carries text — the field is a page-level backdrop with a legibility floor, not a surface treatment a component can opt into.
PreferA --surface panel where a block needs to sit off the ground
The field itself is the Dithered Field pattern — grid, pitch, shape, edges, legibility and motion are stated thereNav's veil is the same construction doing a different job, and the technique was written out in full on both. Two copies of a rule are two things to keep in agreement, and the one that matters here is that a change to the pitch or to how the field clears text has to land in one place. What stays below is what is true of this surface and not of the other
Cells use the atmospheric shadow, body and light roles, never accentInteractive colour and atmospheric colour have different jobs. A single rank distribution assigns colour without increasing coverage, and rendered text lines clear completely to ground.
Cloud cover is weather, not the clockintensity(t) was the first candidate and is the wrong signal — it is a cosine with zeroes at the centre of each mode, so cover would collapse to exactly nothing at midday and midnight and no multiplier could lift it. Density and chroma are different phenomena and take different drivers
The footer band is this component flipped, never a second effectBoth bands keep a hard edge where the document itself ends — the top of the page and the bottom — because that is not an edge the field invented, and both dissolve at the end that runs into the page. One is the other read upside down, so a single u_flip decides which end is dense and everything else about the two is identical by construction rather than by two sets of constants being kept in agreement

Spotlight Card

The featured case study. Two-column layout with content and media, hairline borders on all sides. Optional video plays once on viewport entry (via Media, variant="card"). The card you want someone to click.

Foundations

Typography heading-lg body-lg body-mono
Colour ink ink-secondary border brand-tenon
Spacing space-blocks space-inset space-subsections cell

Behaviour

Contains Media
Used by PageFlow System Section
Rolelink (card)
KeyboardEnter follows the card link; the card is a single focus target, and :focus-visible swaps the hairline frame for the 2px accent ring (the outline comment in the styles has the reasoning)
WhenThe hero case study — one per page section, maximum prominence.
Not whenSecondary case studies — use SummaryCard.
PreferSummaryCard for the prior work grid
One per sectionMultiple spotlights dilute the hero treatment
The whole card is one anchorOne destination, one tab stop. The internal spans carry the semantics — the wordmark names the client, the static label is the touch affordance — so a keyboard user meets one link, not a cluster of them
The media rides along; it is not the linkThe video is ambient evidence — empty alt, plays once on viewport entry via Media variant="card". Giving it its own interaction would put a control inside an anchor

Summary Card

A thing summarised to one value and one line, linking to the thing itself. A mark, a value in Pentameter, and a line of Sectra explaining it — that shape held for a prior engagement reduced to its metric and for a design-system section reduced to its name, in two components that had independently arrived at the same three parts and disagreed about all of the details. The metric card set its summary in Pentameter and had no inset; the index card set prose in Pentameter, was inset 12px against 48px, and drew a full box border the stroke foundation forbids. Unifying them is what makes the disagreements visible as disagreements rather than as two components each looking reasonable alone.

Foundations

Typography heading-lg-mono body body-mono
Colour ink ink-secondary
Spacing space-inset space-related cell

Behaviour

Contains Mark Icon
Used by PriorWorkGrid Project System Section SystemNextCard
Rolelink (card)
KeyboardEnter follows link
WhenA thing reduced to one value and one line that links to the thing itself: the run of prior engagements at the head of the home flow (variant="metric" via PriorWorkGrid), the single onward card closing a case study (metric, arrangement="list"), and the section and entry grids on /system (variant="index").
Not whenA project told in prose with an attribution — that is Passage. A project reduced to a framed payload — that is Figure. A value that needs a sentence rather than a line, which is the card asking to be a Passage.
Preferarrangement="list" whenever the card stands alone rather than in a row of cells
Two variants, and they differ in exactly two things: what the mark is, and which mono role the value takesEverything else — the order of the three parts, the two groups at two distances, the trailing inset, that nothing is drawn, the list arrangement — is the same in both, which is the whole reason they are one component. A third difference is the signal that they are drifting back into two: it would mean the shared grammar has an exception, and an exception is how the two cards this replaced got where they were
The value is one number or one name — never a phrase, and never a sentenceThe layout is a single line at a data scale with an explanation under it. A value that wraps has already become the label, and then the card has two labels and no value. This is the rule the retired overview card broke in the other direction: it set its explanation in Pentameter, which made a sentence look like a value
Mark, then value, then label — top to bottom in the stackThey read in the order they matter: what it is, what it says, what that means. The mark shared a line with the value while the grid was three cards across and could afford the width; at five across, a chip beside the number spends the card on the chip
Two groups at two distances: the mark at --space-inset, the value and its label at --space-relatedThree items at one gap read as three unrelated things. The value and the line explaining it bind to each other; the mark is what the pair belongs to, so it stands one step further off. This is the card stating its own grouping rather than leaving it to be inferred from equal distances — and it is why the mark is no longer sized against the value
The mark is sized against what it belongs to: two cells for a logo, one for an iconThe metric variant takes Mark at the large size to match the byline, because the metrics row and the byline are the two blocks at the head of the page and a mark a half-cell shorter in one of them reads as a different kind of thing. The index variant has no logo to be — its mark carries an idea rather than an identity, and it sits above a single .t-body-mono line rather than a data-scale number, so a two-cell square would out-measure the thing it names. That measurement rule was released for the metric variant only because the grouping above put a step between mark and value; on a mono line there is no such step to spend
The card is inset on its trailing edge onlyA left inset would hold the mark a cell in from the page's left column line, which is the line the byline and the headline start on — and being flush with them is the whole reason PriorWorkGrid dropped its frame. The trailing inset stays, because it is what keeps a label off the mark of the card beside it. In the list form there is no card beside it, so it goes too
Nothing is drawn — no frame, no cell edges, no surface fillPriorWorkGrid's reasoning, taken whole: the marks are what make a run read as a run, and a frame costs the cell inset that holds the mark off the page's own column line. This replaces the rule that said the card drew its own right edge. That edge was real — box-shadow: 1px 0 0 var(--border) with a :last-child reset — and it painted in exactly one place in the repo, the Card pattern specimen, because it is the only place the card ever has a sibling. Everywhere it actually shipped, :last-child suppressed it and PriorWorkGrid suppressed it again through :global. A rule guarded twice and visible nowhere is not a rule the component is following
Hover underlines one part, and which part follows from what the value isThe metric variant underlines the label and leaves the number alone, because underlining a number reads as a correction to it. The index variant underlines the value, because that is the section name — the thing being navigated to — and it is not a number; underlining its label instead would put the line under the description of the destination rather than under the destination. The .card fill stays off in both: a surface fill needs the cell inset back to have anything to fill, and the row would have to hang a cell left to keep the marks flush
Below 800px the card is a row, not a stackOne column at a phone's width (PriorWorkGrid), and a full-width card stacked three deep spends the whole screen on five entries. The mark moves beside the pair and the gap drops to --space-related, because side by side they are one line and the inset distance that reads as a step when it is vertical reads as a hole when it is horizontal
arrangement="list" is the same form, asked for rather than reached by widthThe row arrangement was only ever available below 800px, because the only caller that wanted it was PriorWorkGrid at a phone's width. A single card ending a case study wants it at every width — one card in a row is one card in a row, whatever the viewport — and the alternative was the project page restating the arrangement from outside through :global, which is the component losing ownership of what it looks like. The prop names the arrangement; the breakpoint stays, because at a phone's width it is not a choice a caller gets to make
The count belongs inside the value, not beside itIt is part of naming the section — "Foundations (6)" is one line, and a count on its own row would be a fourth part in a card that has three. It takes the value's type class by inheritance rather than declaring one, and it is inline-block so the hover underline stops at the name: text-decoration propagates to in-flow descendants and cannot be switched off by one, and an atomic inline-level box is the only thing it does not cross

SystemLayout

Root HTML shell for every /system route. Mounts the construction grid, the sidebar nav (desktop) and top nav bar (narrow viewports), and the scrollable system content region, then boots the system-specific client scripts — scroll tracking and search.

Foundations

Behaviour

Contains GridOverlay SystemSidebarNav SystemTopNavBar
Used by System System Section Schema
Roledocument
KeyboardDelegates to SystemSidebarNav and SystemTopNavBar for navigation; #main-content is the landmark for skip-links
WhenThe /system routes only.
Not whenAny other page — use BaseLayout for Home, Variant, and Project views.
PreferBaseLayout for non-system routes
One per page, only used by /system routesOwns a distinct document shell (system-shell/system-content) separate from BaseLayout's nav/footer chrome
SystemSidebarNav and SystemTopNavBar are both always renderedSidebar is desktop-only and top bar is narrow-viewport-only — CSS media queries decide which is visible, not conditional rendering