A whole design system, stated in eight lines of a file header.
The rules live at the top of the stylesheet that enforces them, so the statement and the implementation cannot drift apart without somebody deleting the comment.
The bible, compiled.
Most identity systems live in a document nobody opens and a stylesheet that slowly disagrees with it. Here the document's rules are the stylesheet's header comment.
Brand: Archivo display with ink and paper neutrals. Accent: Acid Lime #DAFE31, for calls to action, focus and highlights only. Radii in three steps. One accent-coloured call to action per view. Dark mode an explicit, persisted switch, never silent.
- Ground
- Paper #F3F4F6 · card #FFFFFF · ink #14161A
- Night face
- Paper #1B1D21 · card #24272C · ink #F5F5F3
- Accent
- #DAFE31, with #5C6B00 as the readable form on paper
- Type
- Archivo for everything spoken, IBM Plex Mono for what the machine says
complete directions built
controls, measured across them
operating rules, each earned on a build
contrast ratio that made lime never text on paper
Lime means one thing: something happens here.
- Before
- One acid lime on a near-monochrome ground, used for the button that starts something and the word a headline turns on. Never decoration, never a section background, never twice on one view.
- What forced it
- The Editorial direction put lime text on near-white paper and measured the result: a contrast ratio of 1.03. Not a tight pass — effectively invisible.
- The decision
- On a light ground the accent is never the text. It becomes olive at #5C6B00, and a lime word inside a headline carries a thin ink outline, because the outline is the only thing making it readable.
- What it changed
- The value went into the brand bible and into the token files of both the site and the operator console, where it is defined on both faces so that one token name means accent-as-text whichever scheme is on. A direction that was never shipped produced a number the whole system now depends on.
Nothing on the directions page is asserted.
Palettes are the computed values of each direction's own custom properties, read out of a browser. Type specs are the computed family, weight, size and letter-spacing of that page's own headline — which is why the table reads 86.4px and −3.456px rather than a round number somebody chose.
pressable elements on a home page at 1440px
A nine-to-one spread for the same business with the same services. Now the first number taken on any site the studio is asked to fix.
local references checked across 286 archived pages
None unresolved.
page and width combinations checked
None scrolling sideways.
Fourteen complete versions of the same site.
Built between 16 and 25 September 2026 and sitting unpublished in a folder git was told to ignore, which was a strange place to keep the best evidence the studio had.
| Direction | For a buyer who | Headline face | Controls |
|---|---|---|---|
| Editorial | reads before they call | Newsreader 400 / 84px | 24 |
| Negative Space | reads before they call | Zen Old Mincho 400 / 56px | 24 |
| The Grid | reads before they call | Archivo 900 / 104px | 81 |
| The Magazine | reads before they call | Archivo italic 900 / 104px | 111 |
| Full Volume | decides in three seconds | Archivo width axis 900 / 126.72px | 57 |
| The Case File | decides in three seconds | Special Elite + Archivo 900 | 76 |
| Live Product | needs to see it run | Archivo 500 / 86.4px | 97 |
| Deep Interface | needs to see it run | Archivo 200 / 92.16px | 62 |
| The Conversation | needs to see it run | Archivo 700 / 103.68px | 94 |
| The Preview | needs to see it run | Archivo 700 / 66.24px | 69 |
| The Journey | has to be walked through it | Archivo 500 / 86.4px | 104 |
| The Road | has to be walked through it | Archivo 500 / 72px | 121 |
| The Showroom | has to be walked through it | Archivo 900 / 110.88px | 113 |
| The Weave — chosen | has to be walked through it | Archivo 900 / 70.56px | 136 |
Four families, by what the buyer has to do on the page rather than by what the business sells.
Nothing about the work changed. Only the axis did.
- Before
- Published on 29 September as an archive: a chronology of attempts, five acts, ten frames struck through in red, ending on the one that won. True, and the wrong story.
- What forced it
- The founder read it back in one line: it makes us look indecisive.
- The decision
- Republished the next day as range — the same fourteen sites, filed by the kind of business each is right for. No dates on the front of the page. No crosses: one ring on the chosen direction, a tick on the two whose parts were built into it, and no mark at all on the other eleven, because they are not rejects, they are available.
- What it changed
- The fix cost no rebuilding. Every direction now leads with who it is for and what it costs — the trade-off is the sentence a studio usually leaves out, and printing it is most of why the page reads as expert. The codenames went too: Berserk became Full Volume, Ghost became Deep Interface, Cheat Code became The Preview. A client reads a studio codename as a game jam.
Ten rules, each attached to the build that paid for it.
Count what a visitor can do.
Before judging how a page looks, count what can be pressed on it. Editorial, The Weave.
Demonstrate, do not describe.
Showing costs more once and converts every day after. Live Product, The Showroom.
Pick the direction from the buyer, not the brief.
A business does not need the design its owner likes. The Weave, Negative Space.
Loud is not the same as confident.
When everything shouts, nothing can be emphasised. Full Volume.
Effects date. Interaction does not.
A tilt carries the date it was fashionable; an answer does not. Deep Interface, The Conversation.
Borrow the grammar, never the costume.
If your audience can name the reference, you copied the wrong layer. Negative Space.
A grid is a floor, not a ceiling.
Discipline stops a page being wrong; it cannot make one worth looking at. The Grid, The Magazine.
A house typeface is not a limitation.
Take the drama from weight, scale and tracking instead. The Magazine.
A generated page looks generated.
Forty-six pages from one procedure read as forty-six copies of one page. The Grid, The Showroom.
Say what the direction costs.
Photography, maintenance, a slower read, a narrower audience. Every direction carries its trade-off in writing. Full Volume, The Preview.
What this study could not verify.
- The marks are the shipped asset files, placed rather than redrawn — no vector was traced and no approximation made
- Both faces are open-licence and served from the same font request the live pages use; no trial licence is involved
- Every colour, radius and type spec is read from the subject's own source rather than sampled from an image
- The guideline bible itself is an image-based design artifact; the textual rules here come from the written brand bible and the stylesheet headers
- Two typeface records exist and both are true at their own date — the September header names Inter for body copy, the current source names Archivo throughout with mono for machine type, and no document explains the change
- Contrast ratios are the project's own measurements, quoted rather than recomputed
- The fourteen directions were not re-measured; the figures are the ones the project's own reader script produced
- Every live page carries a generator footer calling itself a design exploration — boilerplate left behind by the page builder, recorded here because it misleads a literal reader
Read the full study.
Fourteen panels, ending on what could not be verified.