Design System.

Four rules everything else falls out of.

A system is only worth having if it decides things for you. These four do the deciding; every token further down is a consequence.

Three weights of each.

Lite is the tile. Ink is its label, its artwork, and the ground its page opens on. Mid carries rules, links and accents. Click any swatch to copy it.

Why the tiles sit at L 0.775

Two ways to read “bright.” Watch the bars arrive: one set lines up and the other can’t.

Worst case …, best …, a spread of … across eight different hues. That evenness is the rule working, not luck.

Two faces, no middle ground.

One face shouts and one explains. Nothing sits between them. The moment a third weight appears to bridge the two, the hierarchy stops working.

The scale

A grid with a hole in it.

Four columns at 20/30/30/20, the middle two offset from each other by half a button, every seam tangent to an edge of the centre button. All eight tiles are different sizes, which is what stops it reading as a spreadsheet.

Space

Two numbers, three states.

The whole site changes shape at exactly two widths: 1024px and 640px. Everything else, meaning column count, where the section numeral sits, which rules are structural, how many cards fit in a row, is derived from those. Drag the handle to watch the grid re-form.

Why 14, 8 and 4

Desktop keeps two columns for the margin numeral, which leaves twelve for the body, and twelve divides by 2, 3, 4 and 6, so every repeating row lands on a drawn rule instead of near one. Below that the numeral moves above the content and the body takes the full width: eight divides by 2 and 4, four only by 2. Three across is the one arity that never divides cleanly, so it gets a shared utility that narrows the row rather than being re-derived per page.

Solid is earned, per state

A rule is drawn solid only where content actually starts or stops on it; a rule content crosses stays dashed and says so. That verdict is re-made at each state. Boundary 2 is structural on desktop because the body begins there. Below desktop the body spans the full width, so the same line stops marking anything and demotes to a dashed reference. Drawing it solid on a phone put a hard line straight through body copy.

Two numbers, and they are widths. Every breakpoint on this site is a width. There was once a single height-based one, on a case study whose full-screen hero pushed its product shot below the fold on a short phone, but that page has since been retired and the exception went with it. The rule it proved still holds: reach for a height query only when the problem is genuinely vertical, which is rarer than it looks.

Solid at rest, outlined on touch.

One icon per tile, in that tile’s own deep tier. Five are the tile’s real vector reused rather than traced, including Mayo’s crest, coordinate for coordinate. Every one is a filled shape that hollows to a 2px stroke on hover: same silhouette, inverted weight. Hover them.

Mass Virtual is the exception, and for the opposite reason to the rest. There is no vector mark to reuse: the only copy of that logo here is burnt into a photograph, and tracing a wordmark off a JPEG ships a slightly wrong version of somebody else’s brand. So its cell is drawn, a headset rather than a logo, which is the subject of the work instead of the client’s identity.

Each glyph keeps whatever viewBox its source came on: 100×100 for the drawn ones, 300×200 for the cloud, 45.4×28 for the crest. That is because reusing a real mark means taking its coordinate space with it rather than refitting it. vector-effect: non-scaling-stroke holds the outline at exactly 2px whatever the box, and fill and stroke are both currentColor, which is what lets a tile invert without a single extra rule.

Motion is architecture, not decoration.

Four rules decide whether motion on this site feels built or bolted on. None of them are about taste. Each one is a structural choice that a curve cannot rescue. Every demo below is live.

One more, learned the hard way: direction belongs in a custom property, not a selector. A retired case study's mockups alternated the side they entered from. Written as :nth-child(even) that rule counted the tab row as a child and outranked the arrived state on specificity, so two of four panels stopped mid-flight. Moving the direction into --dx / --rot fixed it, because custom properties carry no specificity at all.

The four curves

None are stock. Each exists because a stock easing visibly flattened the thing it was applied to. Each curve draws itself in its own shape; the dots run on the real values.

Reveals are one-shot. Once an element has arrived it never resets, even on the way back up. Replaying them makes a long page feel twitchy and makes re-reading unpleasant.

The constraint that set the palette.

Contrast wasn’t checked at the end. It picked the lightness the whole system sits at, which is why all eight clear AA without a single hand adjustment.

A library I keep a live file.

Everything above documents the site you are standing in. This one is the other half of the practice: a working Figma library, open and messy at the edges, that I use to keep up with the tool. When Figma ships variables modes or a new way to handle properties, this is where I go and rebuild something in it.

It started as the design system for a reading app called Pagepaw. I shelved the product after some research turned up two competitors doing it better, which was the right call and a cheap one to make at that stage. The library outlived it. It is the piece that was always going to be useful again.

The file’s own cover, which doubles as its index. Use the page menu top left to move through foundations, components, screens, wireframes, decisions, the prototype and the art.

Where this came from.

The pinwheel grid, the tile-to-page transition and the idea that a brand site should behave like the thing it documents are all lifted from one place, and it would be dishonest not to say so.