Workspace
Northbound Studio
- Seats used
- 12/2012 of 20
- Requests this month
- 12849301,284,930
- Renews
- 3/4/264 Mar 2026
You’re absolutely crushing it this month.
AI × Design
“I didn’t use AI to build a design system. I built a design system that AI can use.”
The product I’m building now is unreleased. Its interface is generated end to end — every screen a machine proposes, unsupervised. That arrangement is supposed to be the moment taste gets replaced. What it actually did was move my job one layer up: I stopped drawing the screens and started writing the rules the screens have to be true to.
Constraints aren’t the cage. They’re taste, encoded — the part of my judgment that works while I sleep. Four times the generated interface came back wrong in a way no review would have caught reliably, and every time the fix was the same shape: stop reviewing harder, write the rule down.
Those four rules are below, running. Nothing on this page is a screenshot: the demonstrations start as you scroll to them, and every control on them works.
Beat 01 from The Last Mockup
The system, not the model, makes it shippable.
Same model, same prompt, same markup. The only variable is whether a system was in the room. At zero rules this card is what slop looks like — not broken, just unaccountable. Hand it my five rules, one at a time, and watch a generated card turn into a product.
The system, one rule at a time
system 5 / 5 shippable
Generated specimen — live HTML
A specimen, not a product: its controls demonstrate states and submit nothing.
The copy still over-cheers at 5/5. Copy is the sixth constraint, and it’s still on me.
Beat 02 from Centered Is a Feeling
The eyeball can’t stay the API.
Generators are ruler-lovers to their core: every icon arrives bounding-box centered, every label sits exactly where the line box says. Nine pixels separate these two states. Flip it twice and try to name what changed without reading the flags — you can’t, and you can’t unfeel it.
Specimen enlarged on wide screens — the corrections are still measured at 1×.
- Nine pixels, five corrections
- Play triangle ▸ one-sixth of its width
- Chevrons ± 1px into their circles
- Heart ↓ 1px — round shapes read high
- Count badge ◂ 1px — the numeral’s side bearing
- Track label ↑ 1px off the line box
By the ruler it measures perfectly and reads slightly, uniformly off — a room where every picture frame is level to the laser and wrong to the eye. So I state the correction as a ratio, not a pixel: the play triangle’s nudge is one-sixth of its width, which survives every resize instead of dying at the next redesign, taking the reason with it.
Beat 03 from Fast Is a Feeling
A spec nobody had bothered to write.
Generated interfaces are pathologically pessimistic: every action awaits its round trip, and the machine, having no pride, is happy to show you a spinner for a 60-millisecond write. Both buttons below wait exactly 1,400 ms. Press them in either order.
Twin A silent
Idle
- First response
- —
- Complete
- —
Twin B narrated
Idle
- First response
- —
- Complete
- —
- The timing spec I handed the generator
- 100ms acknowledge — silence is the only unrecoverable state
- 1,000ms hold one state; don’t flicker through three
- beyond narrate, and only narrate labor that is happening
- undo be optimistic only where it exists
Identical latency, different length of time as experienced. The stopwatch measures when work completes; a person measures when something responds. Perceived performance, it turns out, was never a talent — it was a spec nobody had bothered to write.
Beat 04 from Accessibility Is a Design Material
Accessibility is a design material.
“Looks fine” is a report from exactly one pair of eyes, on one good day, holding nothing. So borrow three other pairs. As shipped, this card holds quiet failures — quiet because each one photographs well. Redesigned, it survives all three, and with your usual eyes it simply looks more finished.
Borrow different eyes
- Placeholder doing a label’s job
- Error stated in red and nothing else
- Hint text at 2.8:1 on white
- Focus ring deleted for tidiness
Demonstration specimen: this version deliberately fails four accessibility checks, which are listed beside it. The redesigned version is the default.
Create your account
Start the 14-day trial. No card needed.
Password too short
We’ll email you a receipt each month.
Create your account
Start the 14-day trial. No card needed.
Password too short — 12 characters minimum
We’ll email you a receipt each month.
In generated UI every accessibility default dies quietly: the models have read a decade of
outline: none, they emit placeholder-as-label because the training set shipped it a million times,
they animate everything because demos reward it. So my job became writing the constraints that make those
regressions impossible. Accessibility that lives in taste evaporates at scale; accessibility that lives in the
system is just what the product is made of. This page holds itself to that bar — turn reduce-motion on in
your OS and every demo here becomes a still.
The closing object merged from five ledgers
Twenty-four rules a machine can follow.
Every essay I write ends the same way: six things that used to live in my judgment, written down as a token, a ratio, or a budget. Merged, they are the system the generator actually runs inside — the anchor quote rendered as an object.
- accessibility
Focus is a designed token.
outline: nonewas never the fix. - accessibility
Target floor 24px, rising to 44px on touch.
- accessibility
The label is an element. A placeholder is not a label.
- accessibility
Color never carries a state alone — a second channel, always.
- accessibility
Reduced motion is a second designed grammar, not an off switch.
- accessibility
Contrast floor 4.5:1, written into the generation rules.
- color
Ramps step in OKLCH — even steps of light, not of arithmetic.
- color
Hover is L − 0.06. Pressed is L − 0.10.
- color
Disabled is C × 0.3, never a grey repaint.
- color
A chroma budget per ground; clamp to gamut on the way out.
- color
Dark mode is a lightness architecture, not an inversion.
- color
A token is a promise; HSL’s lightness pays in a floating currency.
- time
Acknowledge within 100ms of the press.
- time
Hold one state to 1,000ms before you change the story.
- time
Past a second, narrate — labels must describe labor that is real.
- time
Be optimistic only where undo exists.
- time
A progress bar never decelerates at the end.
- time
Skeleton bones match the body they promise.
- optics
State the correction as a ratio; +2px dies at the next redesign.
- optics
The play triangle’s nudge is one-sixth of its width.
- optics
Round shapes overshoot their flat neighbours, on purpose.
- optics
Corrections freeze into the asset, never into its usage.
- optics
Keylines live in the icon template, not in the designer.
- optics
Optical centre above geometric: craft tradition, and labelled as such.
Filters dim, never delete — the whole system stays on the page.
None of this retires the eye. What retires is the eye as the storage medium.
Every correction I feel and don’t encode will be re-felt, badly, by someone with a ruler. So I write them down. My design system used to be documentation for people; it’s now also an instruction set for machines, and it pays both audiences the same dividend — fewer decisions made twice.