This week I went looking for a name for something I’d been circling, and found one: a headless design system.
The idea is to keep what a component does apart from how it looks. The behaviour, like focus, keyboard and accessibility, lives in unstyled parts such as Radix or React Aria. The look lives in tokens: raw values like a color or a spacing step, and then names that say what each one is for, like the primary color.
I’ve worked on design systems from a few sides. At Adobe we designed on Spectrum while it was still being built, around components that didn’t exist yet. At PubMatic we started a design system and released a component library engineers used directly. A design system only helps once engineers can build from it.
What made me look it up is how I build now. In Morning, I set up a design system first, so every screen shares the same type and color. At Zūm, our design system stays in Figma, and our prototypes are built in code.
When an agent writes the screen, it needs the rules more than the pictures: which color means what, how much space goes where, what a button does when it’s disabled. Named tokens give it those rules directly, where a mockup gives it one example.
The part I’m still thinking through is Figma. If the look lives in tokens and the behaviour lives in code, the Figma file could read from the same tokens instead of being where they start.