Design system
Paper and ink. The system communicates judgement through restraint: one typeface, one colour with one job, three rule weights.
Colour
Warm paper, warm brown-black ink. Light only, so there is one palette to design, verify and maintain. Rust is the only other colour and it states findings. It is never a surface fill, never a link, never an action.
Hairline and grid sit below 3:1 on purpose. They are chrome, and nothing depends on seeing them. A line that names or distinguishes something carries meaning and has to clear 3:1, so it is drawn in ink or in the second series colour. That distinction is load bearing.
Type
Schibsted Grotesk, self hosted, one variable file per subset covering 400 through 700. Latin and latin extended together cost 68KB and there are no external requests. The subset has no rightwards arrow, so ranges are written as words.
Josh Hart
£123,456
Product manager. Home energy and heat pumps. Cardiff, working remotely.
A heat pump only does what it promised if it is installed properly, commissioned properly and left in a state the household will not fight with. Most of that happens in software nobody outside the trade ever sees.
Section header, 12px, 0.18em
Label, 10px, 0.2emRules and space
Rule weight is hierarchy. There are at most three structural edges on a page. The ruled band belongs to the empty state and appears nowhere else.
2px ink. Structural edge, three per page at most.
1px hairline. Rows, dividers, gridlines.
24px ruled space. The empty state only.
| Token | Job | Value |
|---|---|---|
| --space-1 to --space-6 | The whole spacing scale | 6, 10, 16, 24, 34, 44 |
| --rail-width | Rail, widening past 1280 | 224, then 280 |
| --label-col | The shared measure | 190 |
| --content-max | Page cap at wide | 1120 |
| --measure-prose | Prose, at any width | 58ch |
| --hit-target | Interactive height | 44 |
The 190px label column is what makes unlike things line up. Record lists and figure captions sit against it. Prose sections do not: a heading is a title and sits above its text.
Components
Seven primitives, which are exactly the things that recur. There are no intentional additions and no variants kept in reserve.
Case study Result: unproven
The rust variant states a finding. Everything else is ink.
Numbers carry their scope. Approximate stays approximate. The values here are placeholders, for the reason given under Drawings.
A short line describing how the work was approached.
A short line describing what came of it.
One per screen, at the foot of the rail. No secondary, no ghost. Anything that is not the action is a plain underlined link.
Where you are on the left, the page's one status on the right. It is a hairline rather than a structural edge, because the rail already spends one on this side of the page. The breadcrumb keeps orientation independent of the menu state.
One tree, flat, the same on every page. A group is named in the 10px tracked label. The page you are on is filled in ink rather than the finding colour, since a position marker reports nothing about the data. Every entry in the tree is a link and goes somewhere; roles without a page of their own point at their row on the front page rather than sitting in the rail as text nobody can click. The tree replaced the per page section index, which no longer fit above the action at 720px of screen height.
Drawings
Diagrams and charts are the only pictures. There are no icons and no decorative imagery.
An experience page may carry the mark of the organisation it is about, which it could not before 2026-08-12. It carries it on this system's terms rather than the organisation's: the file is used as a mask and the ink is painted through it, so a mark drawn in four colours arrives as one flat silhouette like every other graphic here. A page with no mark file shows nothing, because the heading underneath is already the name set in plain type and setting it twice is not a design.
In a chart, solid ink is settled and the 45 degree hatch is provisional, partial or null. Bars never go below 8px wide; regroup the data instead. In a diagram, what was owned is drawn at a heavier weight rather than in a second colour, because the only other colour is reserved for findings.
A map is a diagram and borrows the same strokes: coastlines are structure, and the lines out to the place names are leaders. The map on the contact page is where rule 1 is bent, once. The marker for where I am now is drawn in the accent colour, because where I am is the question that page exists to answer and the marker is the answer. Every other place on it is a plain dot and a label. Maps are drawn at city resolution and no finer, they carry no fill, and they are decorative: the list underneath is the content, and it is the part that has to survive images being turned off.
Bars never go below 8px wide. Where a series would breach that at a narrow width, the data is regrouped rather than squeezed, and the caption says so. Twenty four months become eight quarters on a phone; the reader is told which they are looking at.
Responsive
Two breakpoints and one principle: each width is rebuilt for what it is, not shrunk from the one above. Prose stays at 58 characters at every width, so the page gets wider without the reading getting harder.
The rail becomes a 56px bar with the name and a Menu control. The panel opens full width and holds the whole tree, the nesting as an indent, and the action at its foot. Every row is at least 44px. The fact strip rotates from columns to rows with the figure right aligned, and the label column collapses to label above value.
The rail is a 224px column against a structural edge, running the full height with the action pinned to its foot. The label column appears at 190px. The shell carries no bottom padding here, because it is the rail's containing block and padding under it ends the grid area early, which drags the sticky rail up by exactly that much at the foot of a long page. The space is spent on the content column instead. The action is sticky as well as bottom aligned, so it survives a screen too short to hold the whole tree.
The rail widens to 280px and the content column caps at 1120px. Past 1440 the headline steps to 60px and the figures move up beside it instead of running the full width beneath it. That is the one layout change the extra width buys. Beyond that nothing changes; the column is capped.
The menu and the rail minimise control are each a hidden checkbox read by a sibling selector, because there is no JavaScript here. State does not persist across page loads, which is why the breadcrumb exists.
The rules
In the order they get broken.
Rust is for findings only: the chip that states a result, and the interval that marks something the data could not answer. The colour section above lists everything it is barred from, and that list is the rule.
2px ink is a structural edge, three per page at most. 1px hairline is everything else. The 24px ruled band is the empty state and nothing else.
No border radius, no shadows, no gradients. The two repeating gradients in the stylesheet are textures doing a job: the ruled empty state and the chart hatch.
No icons. The menu glyph is drawn with element borders. A company mark is allowed on an experience page and is painted in ink through a mask, so it never arrives in its own colours. Imagery otherwise is one photograph, so a reader can confirm they have the right person. No frame, no radius, no filter.
Every figure, fact strip, chart and row on this page is a placeholder. A component is demonstrated with invented values, never with numbers lifted from the case studies, because this page is a reference that gets copied from and a figure pasted out of a specimen carries no scope with it. It also means the page needs no disclosure judgement of its own.
Chrome sits below 3:1 on purpose. A line that names or distinguishes something has to clear it.
First person, plain spoken, British English. Sentence case except letterspaced labels. Null results are stated. Numbers carry their scope. No superlatives, no exclamation marks, no em dashes.
Nothing may slow down the job the site exists to do. If a decision makes the page harder to read, it loses.
Measured
Checked against the tokens as written in the stylesheet, not the ones in the design. A claim of AA is worth nothing if nobody reran it after the last edit. Last measured August 2026.
| Pairing | Used for | Ratio |
|---|---|---|
| Ink on paper | Headings, structure | 16.82 |
| Ink on panel | Headings on a panel | 18.42 |
| Body on paper | Running text | 10.65 |
| Body on panel | Running text on a panel | 11.67 |
| Secondary on paper | Labels, captions | 7.24 |
| Secondary on panel | Labels on a panel | 7.93 |
| Rust on paper | Finding chip, null interval | 5.49 |
| Rust on panel | Finding on a panel | 6.01 |
| Paper on ink | The button | 16.82 |
| Second series on paper | Chart line, ground line | 3.51 |
| Hairline on paper | Chrome only, carries no meaning | 1.33 |
| Grid on paper | Chrome only, carries no meaning | 1.22 |