The type, measured against four publications that work. Every colour, with the numbers behind it. Every building block on one page. This is not finished and is not meant to be — it is edited whenever the publication is, and the edits are at the foot.
Version 5Edited 2026-08-21Kept by the desk
Every news site on earth is built from cards: soft corners, drop shadows, a box for each story. That is the cliché, and it is also a legibility cost — a border and a shadow are two more edges competing with the letterforms. This world is drawn only in horizontal rules that divide and vertical rails that claim. Nothing curves. Nothing floats.
One unit, taken from the font. Every dimension here — type, space, stroke, bar height, rail offset — is a multiple of it, and there is exactly one clamp() in the whole system. A value that is not on the scale is not a tweak; it is a broken fact.
Weight and density. A surface may spend few units or many, and draw its strokes light or heavy. The front page is dense and heavy, an article is open and light, and they are visibly the same place because the physics never changed.
The face is Atkinson Hyperlegible, drawn by the Braille Institute for readers with low vision. Its letterforms are pulled apart from each other rather than harmonised with each other, which is the opposite of what a text face usually does — and it is the whole reason it is here.
The size was not chosen. The first version of this design set the body at 24 pixels on the reasoning that a high floor is itself the design, and it read as oversized: a blog, not a newspaper. So we measured. The instrument opens one ordinary browser, loads a public article the way a reader does, and reads the type off the running page — the size, the leading, and the line length in characters.
| Publication | Face | Size | Leading | Characters | 1px borders on the page |
|---|---|---|---|---|---|
| theguardian.com | GuardianTextEgyptian | 17px | 1.4 | 71 | 139 |
| npr.org | NPRSerif | 18px | 1.5 | 81 | 184 |
| statnews.com | utopia | 19px | 1.55 | 78 | 148 |
| propublica.org | Tiempos Text | 20px | 1.6 | 75 | 69 |
The band is 17–20pixels and every one of the four sets a serif whose x-height is near half its size; Atkinson’s is 0.496, so the sizes carry across. This publication sits in the middle of that band at a standard desktop width, drops to about 17 on a phone, and rises to about 21 on a very wide screen — one value moving, never a second set of sizes.
The line is 70 characters. The four run 71 to 81, and the low end of a band is the right place for a face drawn for low vision, because a shorter line is easier to track back to.
The last column is the finding we did not go looking for. Between them those four pages paint 540 one-pixel borders. The hairline is the most-used object in news design and it is the first mark to fail — under glare, on a cheap panel, and to an eye whose contrast sensitivity has halved. There is not one on this site. The strokes here are two, four and eight pixels, and every one of them is full-strength ink.
The ramp itself has a hinge at the reading size, because type does two different jobs — and both are steps of the same number. The sizes you read take half-steps of φ, the golden ratio: caption, body and lede sit close enough to belong to one voice, far enough apart to rank at low acuity.The sizes you scan take whole steps of it, because nobody reads a headline word by word; they take its shape, and shape needs distance. Two half-steps make a whole step, so this is one scale walked at two paces rather than two scales that happen to meet.
The golden ratio is usually decoration — chosen for the name and the spiral, doing no work. It does real work in three places here and nowhere else: the stride between type sizes, the gap between blocks (every space on the page is one line of text multiplied or divided by φ), and the proportion at which a page divides into the column you read and the margin that carries everything else. A page split down the middle has no subject. Split at φ it does.
A publication that promises to be readable has to be able to show its work on colour, so this is the whole palette with nothing held back — the values, the reasoning, and the numbers we used to decide.
There are five colours. Every one of them sits on the same narrow slice of the wheel, between 267 and 276 degrees — the cool, blue end. The warm half is closed: no green, no gold, no terracotta, no cream. Those came from the parent brand and were chosen for a different job, and inheriting a palette is a habit rather than a decision.
Colour does one job here and only one: it marks what a reader can still do something about. Everything you actually read is ink on paper at full strength. If a thing on this site is coloured, it is because there is still a move available.
Everything you read. Headlines, body, labels, figures, the strokes that divide the page.
It is a blue-black, not a neutral one — it carries the same hue as the rest of the palette, so a page reads as one substance at different densities rather than black applied to a white background. There is no second reading ink and no grey text: secondary matter here is smaller, never fainter.
The ground everything is printed on — including this sentence. There is no swatch for it because you are looking at it.
White is a choice, not the absence of one. This one is cut from the ink's own hue axis, so the page has a temperature instead of the flat screen-white every site defaults to. It is deep enough to feel like a surface and light enough to hold the ink at full contrast.
The deepest colour on the site. It marks the thing you can still act on today, and it carries links.
It is the most saturated ink we can print and still keep near the top of the contrast scale, so the one thing worth reaching for is also the strongest colour on the page. It is also the identity: the other two step away from it, never it away from them.
One step along the cool half. It marks a window that is open and running out.
Urgency used to be the same ink at a different depth, which was coherent and invisible — three states on one hue is a monochrome with extra steps. It is now a different colour AND a different depth, so a colour eye reads a hue change and an eye with no colour reads the same ladder it always did.
Ticks, rails and bars for things already settled — the parts of a story with nothing left to decide.
It is the coldest thing on the page, and that is the meaning: as agency runs out the colour drains toward the cold end. It never carries meaning as text. At this depth it is a mark colour — strong enough for a rail, quiet enough that a settled step does not compete with the one you can still reach.
The ground a panel, a tile or a card sits on — one step off the room.
Depth here is structural, not decorative. A shadow is a picture of depth; a change of surface is the thing itself, and it is the only kind this world can draw, since nothing curves and nothing casts. It is also what finally answered the hairline complaint: a panel used to be told apart from the page by a line drawn round it, so a page with eight panels drew eight boxes. A ground step needs no line.
The ground something is set INTO — a field, a bar track, an inset figure.
The other direction from raised, and the pair is what makes a flat page read as having a front and a back. Reading ink clears on all three tiers (Lc 101, 97, 90), which is the constraint that fixed how far apart they could go.
Four numbers decide whether a colour is allowed here, and all four are measured rather than judged by eye.
Lightness runs from 0 at black to 1 at white. Strengthis how far the colour sits from grey — a strong colour is one you could name from across a room, a weak one is a tint. Together they are what “deep and rich” means in numbers: low lightness with high strength. Hueis the position on the colour wheel in degrees, where the warm half runs from about 335° round through red and yellow to 140°. Every value below is in the cool half, inside a nine-degree slice of it.
Contrast on paper is measured with APCA, the model built for the current web contrast standard, rather than the older ratio — the older one is known to misjudge dark text on a light page at exactly the sizes a publication uses. Roughly: 90 and above is comfortable for body text, 75 for larger text, 60 for headlines, and 45 is enough for a mark that is not read as words.
| Colour | Value | Lightness | Strength | Hue | Contrast on paper |
|---|---|---|---|---|---|
| Ink | #06070E | 0.131 | 0.016 | 276° | 101.1 |
| Paper | #F4F7FE | 0.976 | 0.010 | 267° | — |
| Indigo | #11146B | 0.270 | 0.144 | 270° | 97.0 |
| Ocean | #03577A | 0.431 | 0.090 | 235° | 82.1 |
| Teal | #128696 | 0.569 | 0.095 | 210° | 64.5 |
| Raised | #E8EDF7 | 0.945 | 0.014 | 264° | 0.0 |
| Sunken | #DAE0ED | 0.906 | 0.019 | 266° | 11.1 |
Colour is spent on one question: can the reader still do something about this? Three answers, three inks, and they run deepest where there is most left to do.
The decision is open. There is a docket, a comment period, a vote, a deadline — and it has not passed.
#11146B
The window is still open and it is closing. This is the state that earns the second-strongest colour on the page.
#03577A
Nothing left to do about it. It stays on the page because it is how the thing came to be, and the next one will look like it.
#128696
A line is thin because it separates like things, not because it is faint. Text is small because it is secondary, not because it is grey. Fading is the first thing to fail — on a cheap panel, in sunlight, and to an ageing eye — and it is the reader this publication is built for. The strokes are two, four and eight pixels, and every one of them is full-strength ink.
Every publication colours by topic — green for environment, blue for technology, red for breaking. That is a filing system, and anyone can copy it in an afternoon. Hue is spent here on one thing: whether the reader still has a move. Nothing that is read is coloured, so nothing that is coloured can be missed.
About one man in twelve is missing one of the three colour cones, and a smaller number see no colour at all. If the three inks collapsed into each other for those readers, the one job colour does here would stop working for them — so the palette is checked against each case before it is allowed, not after someone complains.
The strips are the same three inks put through the published models for each kind of vision, applied in linear light. Most tools skip that step, and skipping it flatters the palette by understating how much two colours run together.
Distance between two inks, on a scale where anything under 10 means an eye reads them as one colour. The floor here is 12.5; a palette below it is rejected.
| Pair | Most eyes | No red cone | No green cone | No blue cone | No colour at all |
|---|---|---|---|---|---|
| now / closing | 18.4 | 17.0 | 15.6 | 16.7 | 17.9 |
| now / closed | 32.6 | 31.7 | 29.8 | 30.7 | 32.3 |
| closing / closed | 14.4 | 14.8 | 14.3 | 14.0 | 14.5 |
The Edition, when the reader’s own machine is set dark. Nothing else changes ground.
The readable window on a near-black ground is only the top half of the lightness axis, so the same four roles have half the room they have on paper. A search of the cool gamut offered 867 palettes that cleared the floor and every one was neon: the machine buys separation with hue, and hue is the axis one man in twelve does not have. This ladder buys it with lightness, inside the publication’s own indigo band.
| Pair | Most eyes | No red cone | No green cone | No blue cone | No colour at all |
|---|---|---|---|---|---|
| ink / now | 19.8 | 18.4 | 20.7 | 18.8 | 17.8 |
| ink / closing | 33.2 | 29.6 | 33.7 | 33.4 | 31.3 |
| ink / closed | 47.0 | 43.5 | 46.9 | 45.9 | 45.5 |
| now / closing | 15.5 | 12.7 | 14.3 | 14.7 | 13.5 |
| now / closed | 30.2 | 27.7 | 28.7 | 27.4 | 27.8 |
| closing / closed | 15.1 | 15.1 | 14.6 | 13.6 | 14.2 |
These were the publication’s colours until this version. They are kept on the record because a palette nobody can see the history of is one that will quietly grow back.
Links, data and kickers were carried by it. It sits on the red-green axis, which is the axis lost by roughly one man in twelve.
The old mark and rule flourishes. Decorative by its own description, which is the tell.
The alert tone — reserved for the party bearing a cost, and invisible as a hue to the readers most likely to be missing that axis.
The first replacement, measured and cool-headed and still warm. Retired by ruling with the rest of the warm half.
A one-pixel line in a pale warm grey: an edge drawn before deciding what the edge was for.
A design that is comfortable to read and expensive to load is only half a design, so the weight is measured here too, and published with the rest. The page below is nine paragraphs with nothing interactive on it, taken from the production build on 2026-08-20.
| Sent | Over the wire | Uncompressed | How much of it this page uses |
|---|---|---|---|
| JavaScript | 184 KB | 620 KB | None of it. This page has no interactive parts. |
| CSS | 13 KB | 67 KB | About a fifth. The rest is the legacy stylesheet still serving the front door. |
| HTML | 7 KB | 33 KB | All of it. |
That is about 204 kilobytes for nine paragraphs, and roughly nine tenths of it is a JavaScript framework this page never calls. It is not a bug; it is what a page built on a framework costs even when the page needs none of it.
The honest version of the fast-language question. Rewriting the server in Rust or C++ would not move this table. What a reader feels is the number of bytes their browser has to download, parse and execute before the words settle — and that number is decided by what we send, not by what language sent it. A Rust server emitting the same framework would feel exactly the same.
Where a compiled language does earn its place is in what it makes impossible. A generator written in Rust that reads the newsroom and writes plain HTML cannot accidentally ship a framework, because there is none to ship. Every interactive thing on this site — the reading settings, the consent notice, a reader poll, the live air reading — is small enough to write by hand in a few kilobytes. That is the change worth making, and it is a change in what we send rather than a change of language for its own sake.
The stylesheet has the same shape of problem, and it is ours rather than the framework’s:
| Stylesheet | Size | Standing |
|---|---|---|
| src/app/globals.css | 114 KB | legacy, still serving / and its reading experience |
| src/styles/world.css | 19 KB | the world |
| src/styles/blocks.css | 16 KB | the world |
The world is 36 KB and the legacy stylesheet it is replacing is 114 KB. The old one is still sent on every page because the front door still runs on it.
Everything the publication is built from, at working size. If a block is not on this page it does not exist: the gate reads the class list out of the stylesheet and fails when one is missing. Nothing below carries styling of its own, so anything that looks wrong here is wrong in the world.
Counted by kind, because a single total is the easiest number in design to pad. A kit’s worth is what it can be combined into, not how many parts it has: LEGO climbed from six thousand elements to twelve thousand for no gain at all before cutting back, and every part here is a permanent liability in documentation and in how much anyone has to hold in their head. Two declarations are left out on purpose — radius and shadow are written beside the values so the law sits where the numbers do, but nothing reads them and nothing may, so they are not things a person can reach for.
| Kind | Count | Which |
|---|---|---|
| Blocks | 76 | l-bar l-bar-track l-board l-body l-branch l-chain … |
| Variants of them | 33 | l-bar--2 l-bar--3 l-board--pairs l-branch--likely l-branch--unlikely l-control--primary … |
| Colour values + roles | 15 | closed closing fig-1 fig-2 fig-3 indigo ink mark now ocean paper raised rule sunken teal |
| Type + measure tokens | 19 | char font lead lead-tight measure measure-tight t--1 t-0 … |
| Space tokens | 8 | margin s-0 s-1 s-2 s-3 s-4 s-5 u |
| Stroke weights | 3 | w-edge w-rule w-slab |
| Other tokens | 8 | major minor mono phi phi-fr phi-half reader reader-space … |
| Liveries | 3 | contrast deep print |
| Layout grammars | 7 | l-desk l-page--column l-frame l-grid l-board l-edition l-page |
| States, on each of 8 interactive families | 40 | 5 states × 8 families |
| Documented, reachable things | 212 | 109 of 109 blocks and variants render on this page |
Uses: the brief on the front page, a figure, the standing review, the reading settings, a city readout. It replaces five hand-rolled bordered boxes and — this is the point — every line that was drawn to say 'this is a separate thing'. A page with eight panels used to draw eight boxes; that is where 'all so many hairlines' came from. A ground step needs no line at all.
The default: a surface raised off the room.
Set into the room instead of onto it.
One φ step of padding, for a dense row.
Three, when the panel is the subject.
The room’s own ground: a panel that has the panel’s spacing and none of its lift, for a group that should read as part of the page.
A thing on the room is told apart by its ground, never by a line drawn round it.
Uses: the desks index on the front page, the pieces we keep going back to on the record, a category listing. It replaces three hand-built multi-column lists, each of which had picked its own column count and its own gap. The columns come from the frame — one, then two at 60rem, then three at 80rem — so nothing has to be told how wide it is.
An index is columns of single lines, not a grid of cards.
Uses: a city row on the air pages, a figure row in a key visual, the counts in this record's own header.
Stacked it is a thing you look at; inline it is a row in a table of them.
Uses: the front-page band, the desks index, a category listing. A tile owns its own bottom edge, so a band of four does not become four columns of different length — which is what a row does when you put it in a grid and hope.
A story on a desk is an object occupying a cell; a story in running order is a row.
Uses: the six California regions on the air pages — six stacked tables a reader had to scroll past four of to reach theirs — and the sections of this record. Plain anchors, so the browser keeps the reader’s place and nothing depends on JavaScript arriving.
Regions of one instrument, reachable in one click, working with no script.
Uses: the Edition, where left and right turn the page, and the reading settings. It appears where a reader is already looking at the thing it does, which is the only place a shortcut is ever learned.
Turn the page with ← and →, or press Esc to stop.
The accelerator is silent. A key is printed beside the control it belongs to, never as a lesson.
Uses: ‘Begin reading’ against ‘The front page instead’ on the Edition cover; ‘Allow analytics’ against ‘No analytics’. Making it a surface rather than an ink means it needs no new colour and it reads as pressable rather than merely emphasised — the same move the panels make.
A primary is a SURFACE, not a colour.
Uses: the bar track, the text field, the scale, the histogram floor. The sunken tier is the same idea as the raised one, going the other way — and the two together are what makes a flat page read as having a front and a back.
A well is where something is set INTO the surface: a field, a track, an inset.
Uses: the AQI on every city page, the front-page key figures, the edit counts on the record, a reading pace. It replaces four hand-set number-and-label pairs, each of which had been spaced by hand and none of which matched.
The value is what you see; the words are what you check.
Uses: a city row on the air pages, a bar row in a key visual, a confidence row on the review desk. The scale is the page-sized version of the same question; the meter is the one that fits in a line.
A value against the range it lives in, at the size of a row.
Uses: the air band, whether a comment window is still open, whether a piece carries a correction, whether a live reading is current. No hue is invented for it — the three roles already answer ‘can you still do something about this’, which is exactly what a status says.
Status is ambient. It is a word at a weight beside a mark, never a pill.
Uses: the front-page band, the brief, the desks index. Without it a four-across band poured whole excerpts into 180px columns and the region grew until the desk was a stack again. The line count is stated at each use, never guessed.
Two lines, and then it stops: aragonite dissolves below a certain depth, and that depth is moving up as the ocean absorbs carbon, about one to two metres a year across the Pacific, which is a rate nobody expected when the first measurements were taken.
A tile shows what its cell can hold, cut at a line and never mid-word.
Four regions of one place — the lead, the brief, the band and the desks — instead of four things stacked down a page. It arrives at 80rem, and it asks about INPUT rather than width alone: a wide screen gets it unless its primary pointer is coarse, which is the one thing that actually means a finger. Below it the stack is the reading grammar, which was always right for a column.
The wide view is DESIGNED, never inherited. If it is the narrow view with more air, it is not a grammar.
One labelled bar per day is legible a row at a time and hides the series completely — twenty-seven rows, most of them the number one, and the shape nowhere. A column per day at a height you can take in at once is the same data as a picture: a burst at the start, a trickle after.
A series is shown as a shape, not as a column of rows.
The frame splits at φ into a major track that is read and a minor track that is consulted. A page with no minor track has nothing in the second half, and left as it was it put a reading column against the left edge of a 1440 frame with two fifths of the picture empty beside it — the exact failure this stylesheet accuses other sites of. One column, centred, at φ times the reading measure.
A single column, centred in the frame it is given.
A page with nothing to consult is centred, not left against the frame.
A bar answers how big each thing is. A scale answers where this one sits and how far it is from trouble, which is the question a reader of a live instrument actually has. The axis is a stroke, the thresholds are strokes, and each reading is a mark in whichever agency ink it has earned.
A reading is shown against the range it lives in, not on its own.
Seven steps, one ratio, and an eleven-fold range from the smallest legal mark to the loudest. φ is the only ratio in this world and type walks it at two paces: the sizes you read take half-steps, the sizes you scan take whole ones. WEIGHT MOVES OPPOSITE TO SIZE — the biggest type is the lightest and the smallest is the heaviest — because apparent weight rises with size, and a ramp set at one weight reads as a careful label beside a blunt slab rather than as one voice.
The loud voice
Display
Heading one
Heading two
Heading three
Body — the size everything else is measured against.
Small — metadata, captions, labels.
Nothing in the world sets a size outside this ramp.
The measure is in characters, not pixels, and rides the reader's scale. Everyone else holds a pixel column and grows the margins, which is why their pages are mostly margin.
The knock on the door is the last event in a chain that started in public documents months or years earlier — every step filed somewhere public and read by no one. This publication exists to hand you the chain while there is still a step left to act on.
A second paragraph, to show the rhythm: the gap between them is one line of body text, because every vertical space in this world is a whole or half line and nothing is nudged.
Never justified: even word gaps beat a straight right edge, because rivers of white break line-tracking.
An eyebrow names the kind of thing that follows. A note carries secondary text — smaller, never paler. Figures are the one job the monospace face exists for: numbers that stack in a column and must align.
A note: content, at reading size, on a shorter line. It is not fineprint and it must not look like it.
Small: one step down, for a label or a count that sits beside something.
Fineprint: the only text allowed to be genuinely small, and only for a timestamp, a credit or a legal line.
A.25-05-009 · 5,600 · 92% · $290
Sentence case, always. Capitals destroy word-shape, which is the first thing a low-acuity reader uses.
Two pixels separates like things in a list. Four opens an object. Eight opens a section of the world. A rule is never drawn pale to mean minor — it is drawn thinner, or it is not drawn.
Two — like things
Four — an object begins
Eight — a section of the world begins
Three weights are the entire vocabulary of separation here, and the thinnest of them is not a hairline.
Vertical rails claim a run of content without drawing a container around it.
A plain rail.
A marked rail — the near ink applied to structure.
A firm rail — heavier, for an object that opens a page.
A rail says these lines belong to one object. It is the house gesture; a box is not.
A page is a frame divided at φ. Wide, the headline and the figure share the top line and the margin follows the reader down; narrow, the headline leads, then the figure, then the reading.
The reading track, at the measure.
What a reader consults rather than reads.
One structure, two arrangements. An order flip instead of areas put a chart above the headline on a phone, and it took a phone screenshot to see it.
Where a surface begins and ends is the world's decision, not each route's. Inside it, three primitives and no more: things read downward, things on one baseline that wrap, and an even grid that becomes one column when a track would be too narrow to hold a line.
Text tracks are never a bare 1fr — a bare fr grows to its content's min-content width and takes the mobile viewport with it.
The whole screen, composed. It divides at φ: the major track carries what you read, the minor track carries what you consult. Below the width where both fit it becomes one column, and the consulting track goes first — on a phone the spine of a story should still lead.
The major track. Everything a reader reads in order lives here, at the reading measure.
What a reader consults rather than reads: the chain, the lever, the sources.
A frame divided down the middle has no subject. The minor track is claimed by a rail, so the strongest vertical line on the page is a decision rather than wherever the prose happened to stop.
The atom of every list and every front page: one section, one headline that states a fact, one line that adds rather than restates.
The headline is its own affordance — no colour, no underline at rest. Colour on an anchor is not inherited, so an unclaimed link falls back to 1993, not to us.
A ruler, not a timeline. Every timeline component on earth marks its steps with a dot, and every dot is the same dot, so none of them mean anything. Here the mark measures: a short tick for what has passed, a full-length heavy tick for now, a mid-length one for what is still ahead.
A public docket from the day it is filed.
Where the number is actually argued.
The step that reaches the reader.
The tick LENGTH carries the distance, so the chain survives with no colour at all. Hue only reinforces it.
Built from the numbers in the reporting. A story with no figure cannot publish, which is why the front page can lead with one.
Every number here also appears in the body, with attribution.
One unit per figure. Magnitude is carried by the bar AND by the printed number, so the figure survives with no colour at all.
Any forward-looking claim ships as branches, each carrying the signal that would make it the real one, dated, and closing with what would prove us wrong. Confidence is carried by the rail's weight and by the printed word — never by fading the text.
Watch for: the observable thing that would confirm it.
Given its own room, and its own distinct signal.
Never forecast a named person, and never a private individual at all. Systems only: a programme, a budget, a proceeding.
The handle: the docket, the channel, the date it closes. The same handle we used to find the story.
A closed window is a first-class state, not an omission — it teaches the reader to arrive earlier next time.
What is true first, what we said second. The one component a publication cannot be honest without.
At the top of the piece, never the foot. A correction filed where nobody looks is a correction made for the publication's comfort.
Nothing in the Edition scrolls. Sanchez and Wiley found a scrolling format reduced understanding of complex material, especially for readers lower in working memory, and that readers summarised better when the text was paginated; Rothkopf showed in 1971 that what you remember is tied to where on the page it sat, which scrolling erases. So the frame has a fixed height and the column inside is translated by whole pages — the words never move under the reader, the page is simply replaced.
Chrome marked l-quiet withdraws while the reading runs and returns on any pointer movement — every good e-reader hides its controls, because a permanent transport is a permanent reminder that you are operating software. Tap zones (l-turn) turn the page the way a book turns.
A page of the Edition. It holds still while it is read, and turns when the reading reaches its foot.
Break only between paragraphs. The spatial cue only survives if the block a reader remembers stays whole.
The Edition's two objects. The sentence being read takes the near ink while everything around it stays in reading ink — nothing dimmed, because the neighbours are the point, and nothing hidden, because a reader regresses constantly and needs the sentence before. The transport rides at the foot of the frame, on its own paper below the reading rather than over it.
A sentence a reader has already passed. The sentence being read, in the near ink. And the one coming next, which is exactly where it can be reached.
The Edition's column is centred by l-reading: it is a room with one thing in it, and everywhere else on this site the column sits left with apparatus in the margin.
No weight change and no highlight: a weight change re-measures the text and the paragraph shifts under the reader; a highlight is a box, and there are no boxes here.
The chain at monogram scale: three ticks sharing one edge, growing toward the reader, the nearest in the near ink. Drawn in borders, so it prints, scales, and survives with no colour.
A stranger given only the rules could draw the next one and have it obviously belong. That is the family test.
The frame every surface wears. It is chrome, so print drops it and every future chrome-dropping context inherits that.
Chrome is the world's one fixed frame: it stays quiet and small while the page beneath it grows.
How the world shows its own working: a field of one colour at a size worth judging, the same field put through eyes missing a colour axis, and figures that stack in a column.
| Reading | Value | Taken |
|---|---|---|
| PM2.5, Del Paso Heights | 38 µg/m³ | 14:00 |
| PM2.5, Land Park | 11 µg/m³ | 14:00 |
The colour a swatch carries arrives as data. The block holds no literal, so a page cannot invent a colour the world does not have.
A control is a line of text, not a filled button — a settings widget is the most software-looking object a news page can carry. A field is a rule under the line you write on, exactly like a form on paper. A notice pinned to the foot of the page is the same paper, opened from it by a slab.
This line carries l-chrome, so it does not print.
A notice, drawn in the world rather than in a dark panel with a filled button.
Chrome is furniture, not content: print drops it, and every future chrome-dropping context inherits that for free.
Everything you can press here has four states, and the first three of them are invisible in a screenshot, which is why they are usually the last thing anyone builds and the first thing a reader notices. At rest a thing looks like what it is. Under the pointer it answers within about a tenth of a second. Under a keyboard it shows a ring — and only under a keyboard, so a mouse click never leaves one behind. Pressed, it changes at the moment of the press.
The answer is the ink inverting: the ground fills and the letters turn to paper. It is the same gesture you already make a hundred times a day when you select text, it draws no line, it moves nothing, and it works with no colour at all, because it is a flip of light rather than a change of hue. Our first attempt answered with an underline appearing under the pointer, which is both the 1996 gesture and a hairline wearing a different name — the exact thing this design spent the day removing.
There is one underline left on the whole site and it is at rest, never on hover: a link inside a running sentence. That is the single case where colour is not enough, because a reader who cannot see the near ink has to be able to find it without hovering every word. It is drawn from the font’s own metrics rather than from the stroke ramp, because it belongs to the letters and not to the structure of the page.
The rule underneath it: meet what a reader already expects, then spend the surprise on the ideas. Thirty years of the web taught everyone that a thing which answers the pointer can be pressed. Breaking that does not read as originality, it reads as broken. What is genuinely new here — colour that says whether you can still act, a chain that measures how far away a decision is, a reading time taken at your own pace — is new in the reporting, not in the mechanics.
None of the above is a promise. Each line is a check that runs, and the build fails rather than shipping a broken fact.
Run it: bash design/tools/world_gate.sh
Every change to the design is recorded here with the reason, newest first. We do not stop editing, because we are still learning.
Two more grounds. The world had one surface per livery; it now has three — the room, a thing raised onto it, and a well cut into it — on the paper’s own hue, with steps of 0.03 and 0.04 in lightness.
A publication is a document and a document has one surface. What was asked for is the thing a document does not have: a place, where objects sit ON something and you can tell them apart without a line drawn round each one. It is also the honest answer to a complaint made twice and never properly solved — "all so many hairlines", "too many lines in one shot". Every one of those lines was drawn to say "this is a separate thing". A ground step says it instead, and says it the way a sheet of paper on a desk does.
The three agency inks stopped sharing one hue. They ran 267–276° — one axis, three depths — and now sweep the cool half: indigo 270°, ocean 235°, teal 210°. The lightness ladder underneath is unchanged. The deep livery took the same sweep and its ground gained real chroma, from a near-neutral blue-black at C 0.017 to a deep indigo room at C 0.060.
Measured across the pages a reader is sent to, this publication rendered 0.4% chromatic pixels. It was, literally, the black and white the Commander said it must not be. The monochrome was not required by the accessibility constraint that produced it: the three inks were held on one hue so an eye missing a colour axis could still separate them, but they were also held on a LIGHTNESS LADDER, and every one of 64 hue combinations tried still cleared the 12.5 separation floor for protanopia, deuteranopia, tritanopia and no colour vision at all. The ladder was doing the work; the hue was free and was being spent on one angle. A ground is the largest thing on a page, so a grey ground makes a grey page however coloured the marks on it are.
The ramp grew a seventh step and the weights stopped being fixed. Type now runs from 14.6 to 161.5 pixels at a standard desktop width — eleven-fold, against 6.9 before — and weight runs 300 to 700 instead of 500 to 700, MOVING OPPOSITE TO SIZE: the biggest type is the lightest and the smallest carries the most ink. A second ground joined the world, in the same indigo band as the first, and the Edition takes it when the reader's own machine is set dark. The measure was corrected again: it asked for 70 characters and rendered 77, so it now asks for 64 and renders 70.
A ramp set at one weight reads as a careful label beside a blunt slab rather than as one voice, because apparent weight rises with size and nothing was compensating for it. The second ground was not free: on a near-black ground the readable window is only the top half of the lightness axis, so the four roles have half the room they have on paper. A search of the cool gamut offered 867 palettes that cleared the separation floor there and every one of them was neon — the machine buys separation with hue, and hue is the axis roughly one man in twelve does not have. This ladder buys it with lightness instead, and survives with no colour vision at all.
The reading size came down. The body was set at 24 pixels on 30 July on the reasoning that a high floor is itself the design; measured against four working publications on 20 August it read as oversized, and it now sits in the middle of their band — about 18.5 at a standard desktop width. The single-ratio type scale was replaced by one with a hinge at the reading size: the sizes you read step by 1.2, the sizes you scan step by 1.4. The line went from 66 characters to 70. The kit and this dictionary stopped being two utility subpages and became one published design record.
The size was an assertion, and it was wrong; the four publications were an instrument, and they settled it. One ratio for the whole ramp is the naive move and it fails at both ends — wide enough for headlines makes captions look like a different publication, tight enough for reading leaves headlines quiet.
The warm palette retired and replaced. Savanna green, fruit gold, earth terracotta and ochre out; a five-value cool set in. The hairline removed from the world: the stroke ramp now starts at two pixels. The second reading ink deleted — it measured 8.9 apart from the first, under the threshold where two colours stop being two colours.
Warm inks put the publication's one meaningful signal on the colour axis that roughly one man in twelve cannot see, and hairlines and pale greys fake hierarchy with fading, which is the first thing a low-contrast eye loses.