System

An action. Renders a real button element and guarantees the WCAG 2.2 minimum target size regardless of the type size it inherits.

When not to use itNever use it to navigate. If it changes the URL it is a Link, however it looks. The pressed style is driven by aria-pressed, so do not fake selection with a class.

A linked record in a list: a hairline, a title, a dotted leader and a period. Used for case studies on the work index.

When not to use itIt is not a raised surface and never gains a shadow, a radius or a fill. If content is not a link to somewhere else, it is not a Card. Do not put a second link inside it: the title link already covers the whole block.

The page grid. `gutter` gives a narrow label column beside a content column. `pair` gives two equal columns.

When not to use itNot a general layout tool. Do not reach for it to place two items side by side inside a paragraph or a card, and do not nest it inside itself.

Every link on the site. Routes internal links through next/link and renders external ones as plain anchors with an end mark.

When not to use itDo not use it as a button. If the thing performs an action rather than navigating, use Button. Do not rely on the quiet tone in running prose, where colour and underline together are the affordance.

Alan's monogram, drawn inline so the letters inherit the current text colour and the full stop takes the accent token. Correct in both themes from one asset.

When not to use itDo not use it as a decorative flourish or repeat it beside the wordmark on the same screen. It carries no accessible name by default, so give it one only when it is not already inside a link or heading that names it.

Wraps long form text and gives plain HTML its typography. Caps the line length at a readable measure.

When not to use itDo not wrap interface text in it. It styles descendants it does not own, which is right for MDX output and wrong everywhere else. One per page, around the body copy only.

A region of a page: a hairline rule, an optional uppercase label in the gutter, and content. Carries the one motion treatment on the site.

When not to use itUse the wide variant only for content the gutter would crush, such as a table or a diagram. Reaching for it to make a paragraph longer defeats the measure. Do not repeat the label as a heading below it: pass labelAs to promote the label itself. If the region needs to appear in the document outline, put a real heading inside it and pass its id to labelledBy.

Lets a keyboard user jump past the navigation to the main landmark. First focusable element on every page.

When not to use itDo not hide it with display none or visibility hidden, which removes it from the tab order and defeats the point. It moves with a transform so it stays focusable while off screen.

Sets the vertical space between a group of siblings. The only component that owns the gap between things.

When not to use itDo not use it for a single child, and do not add margins to its children to adjust spacing. Change the gap, or use a different gap step.

A short, non interactive label for a discipline or category. Set in mono under a hairline.

When not to use itIt is not a filter, a button or a link, and it must never become one: nothing about it signals that it can be pressed. If a category needs to be selectable, that is a different component with a different affordance.

Swaps between light and dark. The operating system decides until the button is first pressed, so nothing is stored for a visitor who never touches it.

When not to use itDo not label it with the current theme. The icon and the accessible name both describe what pressing it will do, and the two are chosen in CSS rather than in JavaScript so they are correct before hydration.

An aside inside a case study: a labelled block on a raised surface. The quiet tone carries the confidentiality notice.

When not to use itNot for emphasis. If a sentence matters, put it in the prose and make it the first sentence. A page with three callouts has no callouts, only paragraphs in boxes.

A diagram with a required caption. Built for inline SVG, so diagrams inherit the theme rather than shipping two image files.

When not to use itNot for decoration or screenshots of interfaces. The caption is required because a figure nobody can describe is not carrying an argument. Mark it decorative only when it genuinely repeats the prose.

A row of figures with their labels, rendered as a description list so each value stays tied to what it measures.

When not to use itDo not use it for numbers that are not measurements, and do not pad it to fill the row. Three real figures read as evidence. Six invented ones read as a pitch deck.

A sequence of events in order, rendered as an ordered list because the order carries the meaning.

When not to use itNot a substitute for the narrative. If the sequence needs explaining, explain it in prose and use this to summarise. Not for a list of unordered facts.

Renders a decision as three labelled parts: options considered, what I chose, and what it cost. The most important structure on the site, because trade off reasoning is what senior product hiring screens for.

When not to use itDo not use it for a decision that had no cost, because there was no trade off and the empty field will say so. The chosen option must appear in the options list, and the build fails if it does not: a choice that was never an option means the list is decoration.