The grid 24 columns, a 3px line

Twenty-four columns, a 3px line and one margin for every page — a standard the way InDesign has one, not a convention. Text beside text shares a first baseline, a two-line label meets its sample by its last line, a component moves whole. Everything on this page outside a stage is on the line, and on the columns too: the rail spans five of the 24, one stays empty, and the copy starts on the seventh and runs to the margin (below 1024 the rail is a bar and the copy takes all 12). A stage — a demo with type of its own, like the sheets below — keeps its own room, and is never half on the line. GRID.md is the standard in words; the bench is where it was cut.

Columns 24, and 12 below 1024

24It halves, thirds, quarters, sixths, and eighths, and the Cal Sans case study splits its sections 5:7 three times, which is 10 and 14 in whole columns. 12 below 1024, because the phone's count has to divide the desktop's: a half is still a half and a third still a third when the columns fold. The gutter is the pad scale's 24, 12 on a phone; the margin is the case study's, and it is everyone's. A card is a box on the columns, and its contents step in one column and one gutter.

1440, drawn to scale · 24 columns, the cards take 10 and 14

900, drawn to scale · 12 columns, the cards take 5 and 7

390, drawn to scale · the cards stack, and the inset stays one column and one gutter

Baseline 3px, the leading subdivided

The line is a unit every leading divides into, not a leading itself — the way 12/15 sits on a 3pt grid. Body is 16/24, eight units. Each block's first line is nudged down onto the next line, and every line after it is a whole number of units behind, so a long paragraph stays on the grid its first line was put on.

Big type beside small

Set every lead in whole 3px lines, so a lead of 24, 27, or 48 is eight, nine, or sixteen of them and a block's later lines stay on the grid its first line was put on.

In a row of side-by-side text, take the smallest lead as the row's step, and size the big text so its lead is a whole multiple of it — a size one token larger, never a loosened lead. Each headline line then lands on every other caption line.

Keep one step of white around big type, put rules and marks on the step, and when a row's leads cannot divide, change the size, not the grid. The full list is in GRID.md.

A row meets side by side, one baseline

Items that start in one row have their first line moved to the lowest first baseline among them. An item can meet the row by its last line instead, so a two-line caption ends on the big word's baseline rather than hanging below it. Only the block being aligned moves; the rest of each card keeps its own snap, so text set at the bottom of a card stays on its line. A shift larger than the text it moves is refused: that is a row that matched the wrong text.

A component moves whole words stay with their control

Snap a label alone and it leaves the thing it labels. The pair below sits under a block that is off the unit on purpose, so both rows start between lines and something has to move. On the left it moves only the words, and the words slide off the pink line through the thumb. On the right the row is a component, and it travels as one: words, track, and thumb stay level. Step the block above from 48 to 52px and watch which side walks.

Breakers and tools a page has a margin, a tool has none

A page keeps its margin; a tool has none, ever. wordmark.nyc and its Cal Sans case study are pages. font-proofer and ReCal are tools: their columns run edge to edge and the gutter stays, and a box that touches the window holds its text one gutter in from it, never flush. A breaker is the page's way out of its margin: a box that reaches the window's edge while its words stay at the margin. A picture breaker is all box.

A macOS window screenshot carries its drop shadow as a transparent margin, so the window sits inside the image and lands short of the columns. Flagged as a macOS shot, the shadow is cut out of the layout, and a file scaled after capture says by how much. Below, the window's edges sit on the lines of columns 11 and 24.

A breaker: the ground meets the window, the words stay on the margin.the padding it took back is the margin

The window, not the image, on the columns.columns 11 to 24

A page, drawn to scale · a breaker strip, a text breaker, and a window screenshot whose edges meet columns 11 and 24

A tool, on this page's own columns, numbered as the page numbers them · columns to the window's edges, and text one gutter in where a box touches an edge

Corners — ReCal only

The COSS demo kit is out: it was 81 of the original 168. What remains is 87 corners — 13 circles excluded, 74 taking the law, and of those 32 are in the frozen App.css. The live surface is 42.

The 13 circles excluded — every one a true circle on a square box

The 5 pills your 2:1 rule — min-width = 2 × height

Accent buttons AccentButton

Two acid buttons, each a pill (the Download button) or a chip (a Try-bar toggle that is on). The light is a pre-rendered, dithered image behind a near-black face, never a CSS gradient or blur, so it keeps its long falloff without banding. Q5 is underlit: a rim along the bottom edge, a spill beneath it, and a light that deepens slowly on hover while the face never brightens. Q6 to N4 rests as a pinprick of rim light and, on hover, moves the light from beneath to behind: it travels along the bottom edge, round the lower corners and up the sides, and the top edge lights all at once.

Disabled is unlit and neutral, a dark face with a faint hairline and a grey label, never a dimmed acid. A pressed button sits one pixel down. The pill is a full render at its own size, 225 × 32 for Q5 and 227 × 33 for Q6 to N4, so its box is fixed and the host places it. The chip is 32 tall with an 8px radius, and its light is a 9-slice of two end pieces and a stretched middle, so one set serves any width. Dark ground only: the face is --surface.

Q5 has an HDR light. On an HDR display, in the dark theme, its spill, its rim, and its label go past SDR white: each lit layer is a PQ image whose value is the light itself, floor plus glow, peaking at 589 nits, and the label is acid at that same peak, painted through the glyphs. On an SDR screen it is exactly the button above. The images bake the #1a1a1a ground they sit on. In the light theme Q5 is ink on paper: an ink face, an apple light below it, and an apple label. On an HDR display the light theme's Q5 is lit in acid instead, a broad light that peaks at 405 nits on the white ground, with an acid label at 605.

Q6 to N4 has the same HDR light, dark and light: the spill, the traveling rim, the streak, and the label, whose resting ink thins to show acid as the light comes on. Where the browser decodes JPEG XL, both looks' light is transparent, so it sits on any ground, as the five grounds show. The traveling light steps one frame at a time instead of cross-fading. Both looks show their HDR only on an HDR display.

To contain the light, give its box overflow: clip. Never a mask, overflow: hidden on a scroller, opacity, or transform on an ancestor. The pill in a rail above is ReCal's Download, at the foot of its rail.

<AccentButton look="q5" shape="pill">Download</AccentButton>, or look="q6n4" shape="chip". The images are in assets/accent/, and tools/accent/ renders them.

Ramps

One curve, two channels. A scrim's alpha and a blend's color are one cubic Bézier applied to two quantities: one sampler, two emitters, no second engine. The blur that used to be the third is one radius, and the page says why. Every gradient here is a string src/gradient.ts emitted; nothing is typed in, so nothing can go stale on its own.

The curve cubic-bezier(0.416, 0.657, 0.695, 1)

Two CodePens make this fade by hand: seven stops, each typed in. A cubic-bezier() fitted to those seven lands within 0.0012 of every one, RMS 0.00071 — a third of one step in 8-bit. The fit is measured, not asserted, and it means the clothoid is a preset here, not a code path: the hand-written fade and the curve are the same fade. The white dots are the eight default stops. They crowd toward the transparent end because the curve is sampled by its own parameter, not at even positions — which is where the pens' own stops crowd too.

The edge where a fade announces itself

A straight alpha ramp does not read as straight. Perceived lightness moves fastest at the transparent end, so a linear fade announces itself where it starts and then crawls; on live text that is a visible line across the second row of type, and it is the failure this curve was fitted to remove. The unveiled panel is the control: both scrims fade the same color over the same text across the same distance, and only the curve differs.

Where you mix the midpoint, four spaces

The received wisdom is that oklab rescues a gradient from the gray sRGB puts at its midpoint. It does not. For the pair above, the midpoint's saturation is 11% in sRGB and 14% in oklab: a straight line between opposite hues crosses the neutral axis in any rectangular space, because that is where the axis is. What oklab buys is even lightness — the red→green midpoint sits at luma 111 against sRGB's 101, so the ramp no longer dips dark in the middle. Only oklch holds chroma, 63% at the same midpoint, by treating hue as an angle and going around the axis instead of through it; it pays with a hue nobody picked. The default stays oklab, the predictable one. The first draft of this page had the claim the wrong way round.

Steering a channel Mass Driver's schema

One curve on the interpolation re-spaces the stops along a fixed path through color space. A curve per channel moves the path. Left: the same two colors with one channel steered at a time — the ramp leaves the straight line between its endpoints, which is how a ramp escapes sRGB's gray without changing space. Right: the three channels of #F65030 → #3050F6, each on its own axis. R falls, B rises, and G does not move. That flat channel is why the pair never grays, and why steering G on it does nothing at all. channelBlend() reproduces Mass Driver's published output byte for byte; the equality is a test.

The blur one radius, not a ramp

One backdrop-filter, one radius, nothing masked. This chapter was a progressive blur until 2026-09-20 and every way of building one over live text failed the same way. Hard bands: no ghost, but the radius jumps at each boundary and the staircase shows. Feathered bands: no steps, but at partial mask alpha the compositor blends the blurred copy over the still-sharp original — when it was tried, one full-cover layer at half alpha measured a peak edge of 108 against 217 unblurred and 19 fully blurred, so half the sharp text survives in every feather zone and the words double. That construction is not on this page any more; the figures are kept with their method so the decision stays checkable. Content copies: the same defect, measured worse. A stepless blur that varies down the page needs the text rasterized to a canvas, which costs the live text, and live text is the point. So: a uniform blur, whose row-to-row sharpness change across the panel below is 0.002, and a slider on its radius. The first draft of this chapter blamed the mask for smearing the whole panel; the mask was never broken. The page's corner-shape: superellipse drops a mask on any layer whose host has a non-round corner, and only the host, which is why resetting the layers changed nothing. Found by lifting the panel up its ancestors until masking worked.

It blurs pixels. It does not redact. The words stay in the DOM — selectable, copyable, findable, and read aloud in full by a screen reader, which sees no blur. Never use it to withhold anything.

Banding 8-bit, and what no curve can fix

Eight bits give 256 levels of alpha, and one step between neighbors is about the same faint edge wherever it sits — 0.365 ΔL* at the dark end of the rows below, 0.351 at the light end — and one edge that size is under what an eye resolves. Banding is not the edge. It is the repetition: steps close enough to read as a pattern, far enough apart not to fuse. Visibility peaks; it is not a slope. The control crosses 217 levels at 5px each and fuses into a smooth ramp. The dark fade crosses 76 at 14px each and bands unmistakably. Push the same steps out to 155px apart, as the previous draft of this chapter did, and the field goes flat and the edges vanish with it. More stops cannot help: an 8-stop ramp and a 2-stop ramp quantize to the same levels and band identically, and nothing in CSS asks for more output bits. Tone matters on its own: the third row has the same 76 levels at the same 14px and a per-step ΔL* within a twentieth of the dark row's, and it is clean. CIELAB is uniform for small patches, not for a one-level edge run across a wide smooth field, which is why every banding complaint is about the dark end.

Mostly you do not need it. Skia dithers a background-image gradient and very nearly does not dither a mask-image: the same ramp measures a per-pixel deviation of 2.98 as a background against 0.22 as a mask. So a scrim is dithered for you, a mask over a flat ground is not, and that mask is the one place in this package that bands. .wm-dither goes after the quantizer, on the wrapper: inside the masked element the noise modulated the ink before the mask touched it and measurably did nothing. After the quantizer is also its limit. It composites over the steps rather than preventing them, so it breaks the widest identical run from 35px to 23px and hides the edge, but the one-level step survives in the column mean, 1.29 against the mask's 0.99, and turning it up adds noise faster than it removes step. The background row is the one that halves the step itself, to 0.49, because Skia dithers before it quantizes. The first draft of this chapter said dither removes the staircase; the second said wide terraces are what make it visible. Both were wrong, and both were measured wrong before they were written wrong. Nothing here makes a 76-level fade at this density disappear. The fix that works is a ramp that fuses or a scrim Skia dithers, not a mask across a wide dark field. Judge this chapter on a real display at 100%: a downscaled screenshot averages the steps away.