Content

People, quotes, and metrics — the substance that fills layouts.

Byline The line at the top of the page saying who made it: the headshot, "Alan Long", and the role. Read section
Cycling Map SVG map of a summer cycling route across Europe, drawn as a payload for the Figure frame. Read section
Identity Names a person, an organisation or a subject, optionally giving it a face. Read section
Impact Metrics A project's measurable outcomes as a run of cells — value, label, and an optional line saying what it means. Read section
Passage One attributed run of prose: who is speaking in a narrow left column, what they say in a wider right one. Read section
Quote Card Third-party endorsement with a face attached. Read section
Selected Work The projects a variant chose to show, as a run of Passages. Read section
Team Panel The people involved in a project, folded away behind one control. Read section

Byline

The line at the top of the page saying who made it: the headshot, "Alan Long", and the role. On a /for/ page the headshot gains "/for/" and the addressed company's mark beside it, so the page states in one line who is writing and who is being addressed. Named for the editorial term, because that is exactly what it is; it is not a hero, a header, or a masthead, none of which survive being moved to a different page.

Foundations

Typography body-lg
Colour ink-secondary
Spacing space-related

Behaviour

Contains Identity Mark
Used by PageFlow
Rolegroup (div); the name is a link to LinkedIn
KeyboardEnter follows the LinkedIn link on the name — the only focusable thing in the block. Focus takes the global accent outline
WhenThe opening line of the home page or a /for/ variant page — once per page, above the headline.
Not whenAttributing a passage of prose further down the page — use Passage. Naming a person anywhere else — use Identity directly.
PreferIdentity for any attribution that is not the page's own byline
It is a flush block — it takes .col-flush and never the label/prose splitThe byline and the headline are the two blocks that start at the left edge of the reading area with nothing beside them. That is what makes them read as the head of the page rather than the first entry in the run of passages below (DESIGN.md → Layout composition)
The /for/ clause renders only when a variant is suppliedOn / there is no company being addressed, so there is nothing for the clause to say. An empty or placeholder company is worse than its absence — the line simply becomes the headshot, the name and the role
The title is Alan's, it is the same on every page, and it always rendersThe byline is headshot, name, title — and on a /for/ page, "/for/" and the company mark beside the headshot. That is the whole component. It is not parameterised by the variant: a variant is an application, and the role being applied for is not his title. It also renders at every width; it used to be hidden above 1320px, which meant the block that states who is writing said two different things depending on the size of the window
The /for/ clause is lifted onto the headshot's line by CSS order, never by source orderThe frame reads [headshot] /for/ [logo], then the name, then the role. Source order stays name-first so a screen reader hears who is speaking before who is addressed — a deliberate a11y decision, and the reason this is an order/display:contents reorder rather than a second markup branch
Byline has no composition breakpoint of its own1320px is where the page's label/content columns stack and the nav cluster starts to overlay. The byline has no columns to stack — it is one flush block that wraps onto two lines by the same rule at any width — so it has nothing to answer that breakpoint with, and forking on it was what let the two widths disagree about whether the role exists
Byline restyles Identity's own classes through :global — the sub-line's visibility and the mark's position are the byline's composition, not Identity'sSame parent-restyles-child move PriorWorkGrid makes on .summary-card and ClockGroup on .btn. Identity has no business knowing about a clause that sits between its mark and its text. Note display:contents on the LinkedIn anchor: it stays keyboard-focusable and in the a11y tree in current browsers, but it paints no box, so the hover fill is inert on a /for/ page — that block is inside @media (hover: hover) and the affordance is the underline either way
A logo drawn in one ink supplies logo_url_dark; the pair is rendered and the theme picks oneGround is time-derived, so a wordmark that reads at noon can be invisible at night. jackandjill is the variant that depends on this. The swap itself is Mark's — this component only forwards the pair. It used to be a second branch here that sized differently from the single-image one, which is why jackandjill's mark rendered at 29px against everyone else's 48px: which branch a company took depended only on whether it happened to have a night counterpart
Both marks on the line are Mark at the large sizeThe headshot and the company mark are the two halves of one statement — who is writing and who is being addressed — and a line where one is visibly taller than the other reads as one of them being the subject. Large is the size Identity already gives the headshot from its two-line label, so stating it for the company mark is what makes the pair match rather than nearly match
Whether the company mark takes a tile is the variant's mark_fill, not a guess from the filenameThis block used to test logo_url.endsWith('.svg') and tile the raster ones, on the theory that an SVG recolours with the clock. It does not — loaded through <img src> an SVG is an isolated document, and none of the logos use currentColor anyway. The thing that needs a tile is transparency, and only the content knows (Mark → constraints)
The company is its mark. The name never renders beside itThe clause is [headshot] /for/ [mark] and nothing else. Setting the name next to the mark says the same thing twice, and for the several logos that already contain their own wordmark it reads as a stutter. The name lives in alt so it is still announced and still in the page title; it is not on screen
The clause never reaches for .inline-logoThat utility is em-relative, sized for a logo sitting inside a line of body copy and deliberately off the grid. The byline is not body copy — it is a two-cell mark next to a name — so it takes Mark, and the utility keeps its one job. The old code used both, and the difference between them was the 29px bug

Cycling Map

SVG map of a summer cycling route across Europe, drawn as a payload for the Figure frame. It carries no frame, no title and no height of its own — the figure around it supplies the hairline and the corner label, and the map supplies the proportion those are drawn at.

Foundations

Colour ink ink-secondary accent border ground surface
Spacing space-blocks space-within cell

Behaviour

Used by PageFlow System Section
Roleimg
WhenThe travel block on the home flow — the payload of the Figure labelled with the season.
Not whenAny other context — the route is one specific summer, not a reusable map.
PreferMedia for project imagery inside a frame
The map sets its own height and never takes oneSettled in the home overhaul dispatch: the figure adapts to its payload. Give the map a fixed box and the only options left are letterboxing — dead bands inside a hairline border, which reads as a bug — or slicing, which cuts route geography
The viewBox frames the route, not the drawingThe land paths run from Norway to Greece; the ride runs Kerry to Tampere. Fitting the drawing would render the subject as a speck in an ocean of empty coastline
One viewBox, two framings, chosen by aspect-ratio and resolved by sliceCSS cannot set a viewBox, and the two honest alternatives both cost: a second svg doubles ~30kb of path data in the DOM, and a <use> reference puts the stops in shadow content, killing their cursor hints. The viewBox holds the tall crop, which is a superset of the wide one on the same centre, so a container wider than its ratio crops top and bottom away and lands on the wide framing exactly
The legend staysSolid against dashed is the difference between the miles ridden and the miles taken by ferry and train, which is the point of the picture. Confirmed by Alan in the overhaul brief
No title inside the mapThe season and the subject are the Figure's corner label. A second title inside the payload would name the same thing twice, in a different treatment, one line below itself
containedBy names the files that render the map, never FigureThe map reaches the frame through a slot, and a slot's occupant is chosen by whoever composes the two — so Figure.astro never imports it and never could. Naming Figure here fails the composition validator, which checks that the declared parent really renders the child. The frame relationship lives in why and in the rules above instead

Identity

Names a person, an organisation or a subject, optionally giving it a face. A Mark next to a name and an optional sub-line. The square itself is Mark's; what Identity owns is the rule connecting it to the label — which size, and which treatment when the content has not said. Optionally links out with a cursor hint.

Foundations

Typography body-mono body
Colour ink ink-secondary surface
Spacing space-related space-blocks space-012

Behaviour

Contains Mark
Used by QuoteCard TeamPanel Project Byline Figure Passage
Rolelink | div
KeyboardEnter follows link when href provided
WhenAny person or org attribution. Use type='org' for companies.
Not whenDecorative avatars without a name beside them. A square mark with no name at all — that is Mark on its own.
PreferIdentity over a bare Mark wherever there is a name: the size rule lives here, and a caller placing its own Mark beside its own text has to reinvent it
The mark is large beside a sub-line, standard everywhere elseBeside a name and a sub-line the text block is two .t-body-mono lines — 48px — so a 2-cell mark and the text are the same height and align rather than approximately centre. Beside a lone name there is one 24px line and the mark takes the standard 1.5 cells
Size comes from the label and from nothing the caller passesThe old `scale` prop is gone. It survived the removal of the 12px type tier doing one thing — sizing the mark off the grid instead of the text — and with Mark down to two sizes there is nothing left for it to choose. A prop that lets one attribution be smaller than another is how the page ended up with 24px, 36px and 48px marks and no rule saying which was which
The mark is always beside the text, never above itOne arrangement, so every attribution on the site reads the same way and the two-line ones all get the large mark. The stacked layout that used to be a prop produced the opposite: Passage and Figure asked for it precisely when they had a sub-line, so the attributions with the most to say were the only ones rendered small — and Passage then turned it back into a row above 1320px anyway. An arrangement a caller overrides in CSS was never a choice worth offering
src is omittable — the mark is the optional part, the name is notSome things a label names have no face and no logo: a period of time, a place, a subject. Dropping the mark keeps them on the same two-line treatment as an attribution that has one, instead of forking a second label component to render the same two lines
type chooses the mark's treatment only where the content has no answer; markFill overrides itA person is a face and fills the square; an organisation is usually a wordmark with transparency and needs the tile. That default is right often enough to be worth having and wrong often enough that content must be able to say so — Tenon's icon and the two photographic company marks all carry their own ground and would sit on a tile they do not need. What the file is called never enters into it (Mark → constraints)
A logo drawn in one ink needs srcDark; one drawn in its own colours does notGround is time-derived, so a mark that is legible at noon can be invisible at night. An SVG wordmark in a single dark ink is the case that breaks — hence the work collection carries logo_dark for exactly those clients and only those
nameAs is semantics only — an h2, a cite and a span render identicallyOnly the document outline changes. This was stated here long before it was true: <cite> is italic by user-agent default and .t-body-mono did not state font-style, so every quote attribution rendered italic while this line promised it could not. The type classes now state the whole face and a check in validate-css-patterns.mjs fails the build if one of them stops doing so — the promise is enforced rather than asserted
The label wraps. It is never truncated, at any width, in any containerIt used to be nowrap with an ellipsis, holding the text block to the mark's height — two 24px lines against a 48px square. The alignment was real and the price was words: "Senior Brand Manager, GSK" needs 252px of the 168px the label column leaves, so it rendered as "Senior Brand Manag…". It also could not hold everywhere, and had acquired one exception for below 800px and another for the detailed form — two exceptions to a three-line rule, which is what a wrong rule looks like rather than an under-specified one. A label a line taller than its mark is a smaller cost than a name the reader cannot finish, and it is the reason Passage needs no second arrangement to attribute a person
An ancestor link gets the same name underline without a caller propIdentity can see the ancestor in CSS. Requiring each container to remember an inLink flag duplicated a fact already present in the DOM and left QuoteCard without its hover affordance

Impact Metrics

A project's measurable outcomes as a run of cells — value, label, and an optional line saying what it means. It is scanned rather than read, so it takes the scan column rather than the prose measure, and it draws nothing: the numbers are the run.

  • 72% Invited executives accessed platform
    Up from 34% the previous year
  • 156 Hours saved per sprint
  • 4.2× Faster design-to-dev handoff

Foundations

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

Behaviour

Used by Project
Rolelist (ul) of cells
WhenQuantitative project outcomes — numbers that prove impact.
Not whenQualitative results — use prose or a Passage quote.
2-4 metrics per stackFewer than 2 looks sparse, more than 4 stretches the page
It spans .col-scan, not .col-page or the prose columnThe run is scanned, not read, so no reading measure binds it — but it belongs to a labelled section, and .col-page would cut back across the label column beside it. .col-scan is the scanned width of the reading area: it starts where the prose starts and ends where the figures end
Equal cells from the row's own grid-template-columnsThe sanctioned internal-division exception (CLAUDE.md → Grid placement). Three equal cells across 30 cells is 240px each and does not land on page column lines; the count is a property of the content, and the page grid has no opinion about three
The cell takes SummaryCard's grouping — two parts at two distances, not three things at one gapThe value and the line naming it bind to each other; the sentence explaining them stands one step off. Three items at one gap read as three unrelated things, which is what the stacked form did before. Same reason, same two roles, as the card in the prior-work row
Nothing is drawn, and only the trailing edge is insetThe same rule the work card states: a left inset would hold the value off the line the prose starts on, and the trailing inset is what keeps a description off the value of the cell beside it

Passage

One attributed run of prose: who is speaking in a narrow left column, what they say in a wider right one. The home page is a vertical sequence of these, so the page is content rather than layout — add a passage and the flow re-spaces itself. Case-study quotes are passages too, not a separate card.

Foundations

Typography body-lg body-mono
Spacing space-related

Behaviour

Contains Identity
Used by PageFlow SelectedWork Project
Rolelink (whole block) | div
KeyboardEnter follows the link when slug or href is set; focus takes the global accent outline, which is input-independent
WhenAny attributed block of prose in the home flow — a project entry, a pulled quote, a personal note, a case-study testimonial.
Not whenA project reduced to a single metric — use SummaryCard.
Preferslug for a project entry, href+linkName for a quote attributed to someone with a public profile, neither for prose that names itself without pointing anywhere
A sub-line (role) makes the attribution two lines and its mark large; omit it for a single-line labelThe two forms are a consequence of the content, not a variant an author picks. Which one appears is Identity's to decide from the label — Passage passes the role and nothing about size or arrangement
slug links to the project page, href links out; a passage never carries bothOne passage names one destination. slug produces an internal projectHref and a "View {name} project" cursor hint / touch label; href is an external URL (opens in a new tab) and uses linkName for both the cursor hint ("See {name}'s {linkName}") and the touch label — the same convention Identity itself uses for a standalone external link
mark is optional — omit it for an attribution with no photo or logoA case-study quote without a matched team member has nothing to show but a name; Identity already renders cleanly with no src, so Passage does not need a placeholder
Prose in a linked passage must not contain inline linksA linked passage is itself an <a>; a nested anchor is invalid HTML and the inner link becomes unreachable
labelAs is h2 for a project entry, cite for a quote, span for a note the author signsA project entry titles a section of the page and belongs in the document outline; a citation names the source of words quoted from elsewhere; and a passage the author writes about himself is neither — <cite> around his own name would claim he is quoting someone, and a heading would put a personal aside in the outline beside the case studies
The attribution passes no size of its own — Identity reads it off the sub-lineIt used to ask for Identity's compact scale, on the grounds that a label annotating prose should not compete with it for first read. That was true of the type, and the type is the same 16px either way now; all compact still did was hold the mark at one cell, which made a single-line label sit beside a 24px chip and a two-line one beside a 36px portrait for no reason a reader could use. Size now follows the label, and the visual weight of the label is carried where it always actually was — by the ink colour and the .col-label column
Passage does not restyle the attribution, at any widthIt used to, above 1320px: the name was given the prose's 1.5-cell line box so it sat optically level with the opening prose line, and the stacked attribution was turned back into a row. Both compensated for an arrangement Identity no longer has — the mark is beside the text at every width and large beside a sub-line. The label and the prose are now top-aligned as blocks rather than on their first lines, which is a real change: the label's first line sits a few pixels above the prose's. Chasing it again would mean pulling the text block out of true with its own mark, which is the alignment that belongs to the attribution
One arrangement: the attribution is in the label column, at every width and for every kind of passageA case-study quote briefly took a second arrangement — attribution under the prose in the body column — because a long role clipped in the ten-cell label column: "Senior Brand Manager, GSK" needs 252px of the 168px there. But the clipping was Identity refusing to wrap, not the column being too narrow, and once the label wraps the same attribution fits in place at 69px. A prop that moved the block to a different column was a layout answer to a text-overflow question, and it made one passage on the site read differently from every other
paragraphs is prose, not a schema — any number, no required shapeThe moment the component expects an opener and an outcome, every passage has to be written to fit it
The prose is .t-body-lg, the same size as the page introThey are one editorial role — the page talking to the reader — and they were set at two sizes only because they sit in different blocks. Two sizes for one voice is a distinction the reader has to account for and cannot use
A mark drawn in a single ink must supply markDark alongside markGround is time-derived, so a wordmark that reads at noon disappears at night. The work collection already carries the pair as logo / logo_dark for exactly those clients, and a passage that only forwards the day one loses its attribution after dark

Quote Card

Third-party endorsement with a face attached. Identity component for attribution, quote below. Links to the source.

Foundations

Typography body
Colour ink ink-secondary border
Spacing space-blocks space-inset

Behaviour

Contains Identity
Used by System Section
Rolelink (card)
KeyboardEnter follows link
WhenNamed endorsements from known people with a photo and source link.
Not whenAnonymous or unsourced quotes, or a quote inside a flow of prose — use Passage.
PreferPassage for a quote in the reading flow, with href+linkName if it links out
Must have avatarSrc, name, and hrefThe card's value is the person behind the quote

Selected Work

The projects a variant chose to show, as a run of Passages. It is the one place the variant's content model meets the work collection: the variant supplies which projects and what is said about each, the collection supplies the client, the mark and the link. A new /for/ page is then a block of copy in a YAML file and nothing else.

Foundations

Behaviour

Contains Passage
Used by PageFlow
Rolenone — the component adds no element of its own
KeyboardEach passage is a link into its project page; tab order is the render order, spotlit entry first
WhenThe variant-chosen run of projects, on home or on any /for/ page.
Not whenOne project told in prose — use Passage directly. The prior engagements as metric cells — use PriorWorkGrid.
PreferPassage directly for a single entry that is not part of the selected set
The keys of caseStudyIntros are the set — never a list held anywhere elseA variant selects its projects by writing copy for them. Two sources for one decision means a variant can name a project and show nothing, or show a project it never wrote about
The spotlit entry is pinned first, read from the collection's spotlight flagWhich project leads is a property of the work, not of any one variant, and not of the string "tenon". Deriving it means the pin follows the flag if the spotlight ever moves
A key with no work entry fails the build, naming the key and the valid slugsThe alternative is skipping it, which renders a plausible page missing a project nobody notices is gone. The variant schema is written by an agent, so the error is the feedback loop — it has to say what to type instead
Copy is split into paragraphs on blank lines and passed through unshapedThe copy is freeform per variant. Any structure imposed here — an opener, an outcome — becomes a rule every future variant has to write to
Renders sibling Passages with no wrapper elementThe passages are blocks of the page's flow, not a group within it. A wrapper would take the row-gap meant for the passages and would sit in the grid with no column of its own

Team Panel

The people involved in a project, folded away behind one control. It is the last step of the Credits section: Alan's own credit is stated in full, and this is everyone else, disclosed on request rather than listed at the reader by default.

Foundations

Typography body-mono
Colour accent border surface
Spacing space-blocks space-within space-related

Behaviour

Contains Identity
Used by Project
Rolegroup — a disclosure button and the list it controls; no landmark
KeyboardButton toggles visibility
WhenProject pages with team context — shows who worked on it.
Not whenSingle-person attribution — use Identity directly.
All team members use Identity with summaryUniform rendering — every member gets avatar, name, title, and description
Every member is in the list, Alan included, and the count is the whole teamteam[0] is Alan — the work collection orders it that way — and this component used to render him outside the list as a standing Identity, with the rest folded behind the trigger and the count still naming all of them. That division now belongs to the Credits section, which states his credit itself from the same team[0]. What is left here is what the old site's panel was: everyone who worked on the project, at one treatment, revealed on request. He appears twice in an open section — once as the credit, once in the list of everyone — which is the panel answering a different question rather than a repeat
The control comes before the list it opens, in the DOM and on screenIt used to be the other way round — the list was written first and the button sat under it — so activating "See full team" inserted six people behind the reader's position. A screen reader heard nothing (aria-controls is honoured by almost nothing, and the label swap is not announced), and a keyboard user's next Tab went past the links that had just appeared rather than into them. Disclosed content belongs after its disclosure