Atom

Drawing whole screens produced parts that drifted screen by screen. Draw five screens over five weeks and you get five buttons. Not five deliberate variants — the height and padding simply got redecided each time to suit the screen in front of you.

At implementation that drift comes back as a question: why is the button 40 high on this screen and 36 on that one. Nobody can answer, because nobody ever decided which was right. The engineer either builds both, which leaves two buttons in the code, or picks one, which puts the mockups and the product out of step.

So the order flipped: settle the small pieces before the large screens. This word names the bottom layer of that order. Settling the small pieces first also means fewer open questions by the time a full screen gets drawn.

The test is whether the thing still means something on its own. A button, an input, a label, an icon, a checkbox — put any one of them alone on a screen and it reads as itself. A search field made of an input plus a button splits back into an input and a button, so it isn't this layer; it belongs one layer up, in the molecule.

Color, spacing, and type size sit below this layer. Those are design tokens — named values — and parts at this layer get built out of them.

Building one means building the whole set. A single button needs its resting state, hover, pressed, disabled, and waiting-on-a-result. On top of that come three characters — default, secondary, danger — and three sizes. Finish the full set here and assembling upward becomes a matter of choosing rather than deciding.

One rule comes attached: the part knows nothing about its context. It carries no outer margin of its own, and whatever contains it decides where it goes and how far from its neighbors. Let a button carry 16 of bottom margin and every other placement of that button needs an exception to strip it.

The count stays low, usually twenty to thirty. If the number climbs, molecules have almost certainly crept in. A list of sixty is a sign the line moved, not a sign the product got complicated.

"That's not an atom, it's a molecule. It splits into an input and a button."

Judging the layer, with splitting as the test.

"The button atom has no waiting state, so the double-press bug is still there."

The set wasn't finished.

"Don't put margin on the atom — we'll handle spacing where it's used."

Keeping the part free of context.

Noa started here when Pagedeck first organized its design system. Collecting the buttons scattered across the product turned up eleven of them, across three heights and two border widths. They were merged into one atom carrying five states and three characters. Theo collapsed four button components in the code into one the following week.