The 29 briefs

Read the build contract first — it is binding for every page here. Then read your brief below. Skim the others: knowing what the neighbouring pages are doing is how this stays one product per page instead of one template.

Each brief gives the five things design-direction says have to be decided before anything is composed — the product, the layout archetype, the data stance, the density, and the one bold thing — plus the generator command that produced your tokens.css and the system skill to read.

No two pages share both an archetype and a stance. If your page drifts toward a neighbour's shape, the brief is what you have drifted from.

1. material-design-3 — Cadence

Community music school: a teacher's day of lessons, room swaps and make-ups.

• Archetype: feed. A single time-ordered column of lesson cards, unbounded.
• Stance: prose-first. Each card leads with a sentence generated from the data ("Amara moved to 4:15 — third change this term"), evidence under it.
• Density: comfortable, touch-first. This is used standing up in a corridor.
• The bold thing: M3 Expressive shape. The day rail's active marker morphs between shapes across the spring, and the card corner radius carries state rather than a border. Nothing else on the page is loud.
• Generator: md3_palette.py "#4F5B92" --scheme expressive
• Read: SKILL.md, and web-design/references/material/motion-decisions.md before any animation. Springs come from md3_spring_css.py, never from a hand-written cubic-bezier.

2. carbon-design — Grid North

Distribution substation load operations. Thirty-two feeders, live.

• Archetype: index. The table is the product and gets the full width. No card around it — wrapping it takes width from the only thing that needs it.
• Stance: table-first. Sparklines live inside rows; there is no hero chart.
• Density: condensed. Carbon's --cds-spacing-* and the 2x grid.
• The bold thing: the numbers. IBM Plex Mono, tabular, right-aligned, decimals aligned, and three visually distinct states for zero, null and "not reporting". Load is carried by bar length; colour only confirms.
• Generator: carbon_tokens.py --all-themes (ship g100; offer g10)
• Read: SKILL.md. Run carbon_lint.py — it fails a length literal where a type set belongs, and two control sizes in one <form>. Motion is Carbon's productive/expressive split.

3. apple-hig — Ridgeline

A hiking log: one completed route, its elevation profile, its splits.

• Archetype: document. One measure, generous leading, typography does the work. This is the cheapest page here to be distinctive on and the most obvious place a default typeface would show.
• Stance: chart-first. The elevation profile carries the screen; the splits are annotations on it. Its title states the finding, not "elevation by time".
• Density: comfortable. 44pt minimum targets.
• The bold thing: Dynamic Type, honoured on the web. The page is built at Large and stays correct at AX5 — no truncation, no stacked-layout collapse. Include a size control that demonstrates it, driven by the real ramp.
• Generator: hig_type.py --responsive (and --all-sizes to check AX5)
• Read: SKILL.md. Run hig_lint.py: a colour built from component literals is the defect it exists to catch — Apple's own values "may fluctuate from release to release", so use the semantic system colours through color-mix()/light-dark(), never a hex you transcribed.

4. fluent-2 — Rota

Shift handover for a hospital ward team, living inside Teams.

• Archetype: shell. Persistent rail, top bar, content well — this is a product with many destinations and a user who returns every shift.
• Stance: tile-first. Four tiles across the top, each carrying its comparison against the last shift. A tile with a number and no comparison is a defect here.
• Density: compact. Fluent's spacingHorizontal* / spacingVertical*.
• The bold thing: the handover thread is the primary column, not a sidebar. Most shift tools bury the words under the numbers; this inverts it, and the tiles are the secondary surface.
• Generator: fluent_theme.py --mode both (both themes ship)
• Read: SKILL.md. Every token is --colorNeutralForeground1-shaped; never compute a hover, the token exists.

5. shopify-polaris — Kiln & Co

Merchant admin for a ceramics studio: the order index and a bulk fulfilment.

• Archetype: index.
• Stance: table-first, but Polaris's resource-list idiom rather than a spreadsheet — each row is an object with a status, not a set of cells.
• Density: Polaris default. Do not compress it; the system is tuned for a merchant on a laptop at the end of a day.
• The bold thing: the selection state. Selecting rows swaps the table header for a bulk-action bar in place, and the destructive action in that bar is gated by a typed confirmation, not an "Are you sure?".
• Generator: polaris_tokens.py --both
• Read: SKILL.md. Ship light only and say so in the spec panel: in dark-experimental, color-text-brand/-critical/-success are the light values on a dark surface, 1.3:1 to 1.5:1. Shipping that dark theme would be the one avoidable accessibility failure in this portfolio.

6. github-primer — Ledgerhawk

Review a database migration the way GitHub reviews code: a diff, with a blast-radius report attached and a required approval.

• Archetype: shell.
• Stance: prose-first. The review conversation is the spine; the diff and the lock analysis are evidence under the sentences.
• Density: compact.
• The bold thing: state is never carried by hue alone. Use the pairing that survives light-colorblind — open/closed/merged separated on lightness and shape as well as colour — and say in the spec panel that bgColor-success-emphasis for "open" opts out of that work.
• Generator: primer_tokens.py --both
• Read: SKILL.md.

7. atlassian-design — Faultline

Incident command: one open Sev-2, its swimlanes, its clock.

• Archetype: board. Columns are the state machine; a card moves.
• Stance: tile-first for the header strip only; the board is the body.
• Density: ADS default.
• The bold thing: severity is carried by length, not by a red chip — a bar whose width is time-since-detection, so the eye ranks the board without reading it. Colour confirms.
• Generator: atlassian_tokens.py --both
• Read: SKILL.md. Interaction state is in the token name (-hovered, -pressed); never compute one. Run ads_lint.py — a chart drawn from a non-chart token is one of its findings.
• Dragging must have a single-pointer and keyboard alternative posting the same payload (WCAG 2.2 SC 2.5.7, SC 2.1.1). Buttons on the card, not a second code path.

8. ant-design — Freightpost

Cross-border freight: 140 consignments, customs status, exceptions.

• Archetype: shell, with Ant's sider.
• Stance: table-first at maximum density — fixed left column, horizontal scroll inside the table only, filters in the column headers.
• Density: Ant small table size. This is the densest page in the portfolio and it should feel deliberately so.
• The bold thing: an exception row is not a red row. It is a row that gains a second line — the reason, in words — and nothing else moves.
• Generator: ant_palette.py "#0B5FFF" — and you must run ant_palette.py "#0B5FFF" --contrast and act on it. Ant's own default primary is 4.10:1 white-on-blue and fails AA for normal text. If step 6 fails, use a darker step for text-bearing fills and record the measurement.
• Read: SKILL.md.

9. aws-cloudscape — Perimeter

Cloud security posture across three accounts. A wall display.

• Archetype: console. A fixed grid of tiles, no scroll, one question: "is anything wrong". Refuse the eleventh tile.
• Stance: chart-first.
• Density: Cloudscape compact.
• The bold thing: the legend prints the contrast ratio. Cloudscape's color-charts-*-500 tokens are their measured ratio against the container, so a series colour is chosen by the contrast it needs; put that on screen.
• Generator: cloudscape_tokens.py --both, plus --charts for the series
• Read: SKILL.md. Run cloudscape_lint.py: a delete modal with no typed confirmation, a shell that is not AppLayout, and a raw colour are its three findings.

10. adobe-spectrum — Plateworks

Packaging artwork review: one label, annotated, with a colour-separation check.

• Archetype: canvas. The artwork is the viewport; panels dismiss.
• Stance: prose-first — the annotation thread is the content.
• Density: Spectrum desktop scale, with the mobile rescale shown as the second state (control height 32 → 40px, base font 14 → 17px — a whole- interface rescale, not a touch-target patch).
• The bold thing: a panel that actually closes, and a canvas that keeps keyboard access — arrow keys pan, +/- zoom, Escape dismisses the panel, and focus returns to the control that opened it.
• Generator: spectrum_tokens.py --both (and --platform-diff)
• Read: SKILL.md.

11. salesforce-lightning — Northwind Field

A CRM record page: one service agreement, its path, its related lists.

• Archetype: shell, in SLDS's record-page shape (highlights panel, path, tabbed detail, related lists in the right rail).
• Stance: prose-first. The activity timeline is the record.
• Density: SLDS default.
• The bold thing: the Path is a real state machine — each stage states its guidance for success and what closes it, and a stage that cannot be reached yet says why rather than being merely grey.
• Generator: slds_tokens.py --theme hooks
• Read: SKILL.md. Styling hooks are the only supported customization surface. Run lwc_lint.py.

12. govuk-design-system — Apply for a private water supply test

A real public service: a householder on a private well applies to their council for a sampling visit.

• Archetype: wizard. One thing per page, a visible spine, back always available, a check-your-answers page before submitting.
• Stance: prose-first.
• Density: GOV.UK default. The spacing scale is 5px-based, not 8px.
• The bold thing: it works with no JavaScript at all, and it says so by behaving that way — every step is a real <form> POST target, the error summary is a server-rendered <h2> with links into the fields, and nothing on screen depends on script. This is the only page in the portfolio built for someone in a crisis on a bad connection, and it should feel like it.
• Generator: govuk_tokens.py --theme palette + --theme functional (the type scale from --type, the 5px spacing from --spacing)
• Read: SKILL.md. Run enhancement_lint.py — it settles the markup that cannot work without script against the HTML Living Standard.

13. tailwind-css — Aperture

A developer tool's marketing site: the hero, the argument, the pricing.

• Archetype: editorial spread. Asymmetric columns, a rhythm that changes section to section, deliberate white space. The only page here where the layout is allowed to differ from block to block on purpose.
• Stance: prose-first.
• Density: comfortable, with one very tight section for contrast.
• The bold thing: no default indigo, no gray-400 body text, no border-gray-300. Every colour is a step measured to pass, and the pricing table's numbers are set in a tabular figure. Tailwind makes no contrast promise; this page is the demonstration that someone checked.
• Generator: tailwind_theme.py --theme colors + --theme scales; you must run --ramps and --pitfalls and act on both. --pitfalls exits 1 while any of the six popular defaults fail; none of them may appear here.
• Read: SKILL.md. v4 CSS-first @theme. Hand-written utility classes are fine — there is no build step; author the handful you need in the page's <style> against the token file.

14. radix-shadcn — Meterbox

Usage-based billing: this month's meter, the projection, the invoice preview.

• Archetype: shell.
• Stance: tile-first.
• Density: compact.
• The bold thing: the Radix scale used as roles, visibly — step 3 for a hovered surface, 6 for a border, 9 for a solid, 11 for secondary text — and the primary is a hue whose step 9 actually passes with white on it. Only 5 of 31 hues do (indigo, iris, plum, purple, violet); blue is 3.26:1 and is not one of them. Print the measurement in the spec panel.
• Generator: radix_tokens.py --shadcn zinc, plus --hue <your accent> and --solid before you choose the primary.
• Read: SKILL.md.

15. bootstrap-5 — Trinity Rovers

An amateur football club: fixtures, the league table, how to join.

• Archetype: document.
• Stance: table-first — the league table is the thing people come for.
• Density: Bootstrap default.
• The bold thing: it must not look like Bootstrap. Achieve that using only --bs-* variables and component variables — no competing selector overriding a component's rules, no fork you re-fight at every upgrade. A restyled Bootstrap that upgrades cleanly is a harder and better trick than a custom stylesheet.
• Generator: bootstrap_tokens.py --both; run --buttons before and after your palette change (white on --bs-primary is exactly 4.50:1, so a brand colour that merely looks similar will fail) and --component .btn / --component .table for what those expose.
• Read: SKILL.md. Run bootstrap_lint.py. The dark theme redefines only 52 of 117 variables and inherits the rest, --bs-primary among them — anything you add must be declared under [data-bs-theme=dark] too or it will not change.

16. uswds — Find your lead service line

A resident types an address and learns what their water service line is made of, and what happens next.

• Archetype: index — the result is a table of the records the utility holds, because a resident disputing it needs to see the evidence.
• Stance: table-first.
• Density: USWDS default.
• The bold thing: the grade arithmetic, honoured. USWDS is the only system here whose token name encodes contrast — a grade difference of 50 always reaches 4.5:1 within a family, 40 always reaches 3:1 — and the trap is that grade is luminance, so blue-50 on red-50 is 1.00:1. Every cross-family pair on this page goes through uswds_tokens.py --pair and the measurement is in the spec panel.
• Generator: uswds_tokens.py --family <each family used>; run --guarantee once and cite it.
• Read: SKILL.md. Run uswds_lint.py — a .usa-* selector in your own CSS is its finding, and it is the one you are most likely to trip.

17. sap-fiori — Requisition approvals

A purchasing manager clears a queue of requisitions.

• Archetype: split — Fiori's list report on the left, the object page for the selected item on the right, both live.
• Stance: table-first.
• Density: Cozy (36px). Not Condensed: sap_tokens.py --density measures Condensed at 22px, under WCAG 2.2 SC 2.5.8's 24px floor, and exits 1 while that holds. Say this in the spec panel — it is a real decision.
• The bold thing: the text/element split, used correctly and shown. sapNegativeTextColor is for words and is held to 4.5:1; sapNegativeElementColor is for a bar or an icon and is held to 3:1 (measured 3.90:1), so a label set in it fails. Put a bar and its label side by side, each in the right token.
• Generator: sap_tokens.py --both (Horizon light and dark)
• Read: SKILL.md and web-design/references/fiori/floorplans.md first — the floorplan decides the screen, before any component decision.

18. luxury-hospitality — Solviva

A twenty-four-cover coastal restaurant: the room, the menu, the booking.

• Archetype: editorial spread.
• Stance: prose-first. Almost no numbers, and the ones there are (the covers, the hour, the price of the set menu) are set as prose, not as data.
• Density: generous. This is the least dense page in the portfolio by a wide margin, and that is the point.
• The bold thing: the photography carries the page and the type gets out of its way. Text over an image goes through scrim.py, never through a guessed rgba(0,0,0,.4).
• Imagery: this genre may not ship placeholders — the media is the product. Use fetch_assets.py to find CC0 photographs and record their provenance in CREDITS.md beside the page. Optimise them; every <img> carries width, height and a real alt, and the LCP image is not lazy.
• Generator: lux_tokens.py
• Read: SKILL.md, and framing's frame_check.py if you crop anything.

19. material-catalog — Verrazzano Stone

A stone importer's trade catalog: faceted browse, then one slab's page.

• Archetype: index, faceted.
• Stance: table-first — the specification table is the product. A buyer chooses on finish, thickness, slab dimensions and lot, and the photograph is part of the specification rather than decoration.
• Density: default.
• The bold thing: stock carries an as-of time, every specimen frame is clean of text, and an out-of-lot slab has somewhere to go rather than being an empty state with no exit. catalog_lint.py checks all three.
• Imagery: same rule and same tool as Solviva. CC0, provenance recorded.
• Generator: mat_tokens.py
• Read: SKILL.md. Run catalog_lint.py.

20. centauri — Computing America console

The house system: the firm's own internal console — the pipeline, the work list, the week — and, since ADR-014, the three other systems that share its spine.

• Archetype: shell.
• Stance: table-first.
• Density: the console profile.
• The bold thing: the four-step reading ladder (micro/small/datum/ body) used as intended, with datum reserved for the size a value is read at — no vendor system names that size — and absence rendered: zero, null and "not measured yet" are three different marks, declared.
• Four pages, one spine: index.html is Console, field.html and catalog.html are the same palette, focus ring, marks, corners and motion under two more profiles, and Marketing is now brief 24 with a directory of its own. Each declares @centauri-multi-profile, because a real product still picks exactly one; these pages are showing what a profile does and does not change.
• Generator: the built layers, imported not concatenated. systems/centauri/centauri/ holds the generated plain-CSS build, copied from assets/ and never hand-edited. Link the spine, one profile, base and nav, then that system's layers and nothing else. Run import_lint.py systems/centauri/ (and again over systems/centauri-marketing/) and nav_lint.py on each page — the nav rule is one <nav>, three to five destinations, no screen more than two clicks away, a tab bar under 600px and a collapsible rail above.
• Read: SKILL.md. Rules rather than boxes, near-square corners, tabular numerals per cell, achromatic focus, magnitude by length with colour only confirming. No gradient, no literal colour, no radius outside the spine — check.mjs's restraint scan fails all three. Marketing is the single exception on the gradient, in three declared roles, and a .centauri-pane must sit inside a .centauri-bed: a backdrop-filter over a flat ground composites to 1.008:1, which is white on white.

21. calm-practice — Wrenfield Midwifery

Caseload midwifery practice: the page expectant parents land on.

• Archetype: document. A 1024px hold down the whole page, full-width bands for rhythm, no rail and no shell. The hero is the one split.
• Stance: prose-first. Three kinds of number on the page — a telephone number, a registration per midwife, a count of weeks — and everything else is a sentence.
• Density: generous. Bands --cp-space-2xl apart, dropping one step under 58rem.
• The bold thing: position and size carry urgency, colour never does. The second state opens a panel at the head of the page, the page recedes rather than leaving, and the critical hue appears twice — a 3px rule and one inline note.
• Generator: python3 tools/calm_tokens.py --both
• Read: systems/calm-practice/BRIEF.md. The style re-hues a counselling practice's published design — both typefaces, the whole ramp solved through its own three breakpoints, its radius census, its one shadow and its structure — moving only the primary family from sage to a dusty blue.

22. apex-brand — Noa Ferreday

The brand site of a competitor: an elite downhill mountain-bike racer, mid-season.

• Archetype: editorial spread. Full-width bands down one 80rem hold, with a masthead over a photograph at the top and one band inverted to cream so the page has a middle rather than a length.
• Stance: chart-first. The season is a set of measurements, so the measurements are the spine: a results ladder whose bars are the gap to the winner, and a second chart taking the best run apart section by section. The photographs sit behind the numbers rather than in front of them.
• Density: generous, display-led. Bands --ap-space-2xl apart, and a masthead that runs from 2.75rem to 7.9375rem on one solved clamp.
• The bold thing: length and size carry every magnitude, and the one bright colour appears once per section and never twice, so it always means the same thing — this is the one to look at. Three rows of the ladder carry no bar for three different reasons, and none of them is drawn as an error.
• Generator: python3 tools/apex_tokens.py --both
• Read: systems/apex-brand/BRIEF.md. The style re-hues a Formula 1 driver's published site — its ramp, its pill geometry, its tracked capitals, its easing and the structural fact that its near-black and its acid accent are one hue at two strengths — moving the brand family from lime to a hi-vis magenta and leaving the warm off-white where it was.

23. claude-brand — Recto

The translation desk at a literary press: chapter seven of a novel out of Spanish, source and English side by side.

• Archetype: split. Two documents in one grid, so a source paragraph and its translation are the same row and cannot drift apart while somebody scrolls. split is taken once, by sap-fiori, and that page spends table-first.
• Stance: prose-first. The heading is the book, the sentence under it is what the chapter is waiting on, and the counts are evidence beneath the sentence. The product is two columns of prose and a decision about a word.
• Density: comfortable, read rather than scanned. Seventeen pixels at 1.6, a forty-five character measure in each column, and a fourteen-rem margin between them that is a column rather than an overlay.
• The bold thing: no toolbar. Every control that acts on the translation sits in the margin at the segment it changes, and the one warm colour does exactly one job per screen — it marks the segment waiting on a person. The hard state is non-correspondence, which is the thing a split pretends cannot happen: one paragraph rendered as three, a sentence with no source, and a stanza that cannot ship because the press does not own the English.
• Generator: python3 tools/claude_tokens.py --both
• Read: systems/claude-brand/BRIEF.md. The style is measured off claude.com's own published stylesheet, and unlike the other two house styles here it publishes everything — so the generator assigns rather than invents: every role is the ramp step nearest its limit that still clears its ratio against the worst ground in its theme. Three findings come out of that, and the first decides the page: the brand terracotta measures 2.96:1 on the paper and so can mark and fill but never carry a word.

24. centauri-marketing — Hardware and instrumentation, Computing America

The house system's Marketing profile, on the same spine as brief 20. One division's public landing page: the surface a buyer meets before the console exists for them at all.

• Archetype: editorial spread.
• Stance: tile-first.
• Density: the marketing profile.
• The bold thing: the page states where the division's work stops. Four seams, each naming the sibling division that owns the other half, rendered as peers of the three capability tiles rather than as a footnote — on the argument the page itself makes, that a stated boundary is worth more than a claimed capability because it is the one sentence a buyer can check before anything is signed. Nothing on it is a performance claim: a figure is on the page only if the firm publishes a definition for it.
• Why it is not a companion of brief 20: it was one until 2026-09-16, and as a companion it was reachable only by a reader who had already opened the console. Different reader, different archetype, different stance — that is a specimen, not a second document beside one.
• Generator: the same built layers as brief 20, linked from ../centauri/centauri/. The spine, exactly one profile (marketing), base and nav, then the page skeleton and the expressive layer. This is the only system in the house allowed a gradient, in three declared roles — bed, rim and wash — and a .centauri-pane must sit inside a .centauri-bed, because a backdrop-filter over a flat ground composites to 1.008:1.
• Read: SKILL.md, and brief 20 beside it. The restraint scan that fails a gradient elsewhere is the reason the exception here has to be declared rather than taken.

25. tesla-brand — Nightshift

The first brand specimen: a published brand design language rather than a vendor's interface system. The reference is a car maker's own website, which is a showroom; the page is the overnight charge plan for a delivery depot, which is not. Fourteen vans, three bays, one contracted ceiling, read at 17:42 by the supervisor about to go home.

• Archetype: canvas.
• Stance: chart-first.
• Density: comfortable — 14px body, which is the reference's own size for everything that is not a headline.
• The bold thing: the failure state is not red. The brand's published Don't list forbids more than one chromatic colour besides its blue CTA, and the blue is spent on the action. So the three vans that will not reach their departure charge are carried by ground, form and number — a bar that stops short of the departure mark, a hatched void where the missing charge would be, the deficit written out, and a move to the alternate surface with a rule above it. WCAG 1.4.1 is satisfied by construction rather than by checking.
• Generator: tools/brand_tokens.py tesla-brand, the fourth house generator and the first that is plural. It carries each brand's declared palette verbatim and solves only the role ASSIGNMENT, the way claude_tokens.py does for a published ramp. Its findings for this brand: the placeholder grey measures 2.98:1 on the alternate surface, 0.02 under what a control outline owes, so stroke and ink-3 are one value; and the brand blue reads 4.82:1 on white but 4.39:1 on the alternate surface, so the blue used for text is solved a fraction darker than the blue used for the button.
• Read: systems/tesla-brand/BRIEF.md for the five declared deviations, including the one duration the reference publishes (0.33s) against CONTRACT.md §5's 250ms exit cap, and why this page carries one theme.

26. nvidia-brand — Cinder

The second brand specimen, and the opposite end of the corpus from brief 25. That reference publishes nine colours and four type sizes; this one publishes thirty-one colours, an eighteen-step ramp and front matter naming every token. The screen is a research cluster's GPU queue: sixty-four accelerators across eight nodes, eleven jobs running, nine waiting.

• Archetype: console.
• Stance: table-first.
• Density: compact.
• The bold thing: the job that can never run is separated from the jobs that are merely waiting. Every scheduler reports both as pending, which is true and useless — one of them starts tonight and the other will still be there on Friday. Job 4471 asks for sixteen accelerators on one node, the largest node has eight, and the screen says so, says what would make it run, and puts the control beside the sentence.
• The pair it makes with brief 25: same family, same problem, opposite answers. Tesla's language publishes one chromatic colour and forbids a second, so its failure state cannot be red; this one publishes a full semantic layer, so this failure state is red — and still does not rest on it, because the heading names the cause and the row carries the words. Two brands, one question, and the palette decides.
• Generator: tools/brand_tokens.py nvidia-brand. It gained three mechanisms for this brand, each forced by something the reference does: per-theme pinned (its inline link is a blue on white and the brand green on black, and its Don't list forbids each of those anywhere else), statics (the black chapter is a band whose colours are fixed in both modes, not a theme, so the theme-scoped roles structurally cannot express it — and the page was reaching for hex literals to say so, which CONTRACT.md §1 forbids), and semantics (its red reads 4.61:1 on white and 4.30:1 on the soft surface, so the fill is the brand's and the text value is solved at the same hue).
• Read: systems/nvidia-brand/BRIEF.md, which records the three deviations — the two chapters read as a reader preference, the motion the reference does not publish at all, and the typeface substitution the reference itself recommends.