Skip to content
Jordan Goulart

ArticleJun 9, 2026

The small decisions

A running log of small design-system calls, a margin, a hint color, a progress line, turned out to share one discipline: never invent a value the system already names, keep every indicator honest, and fix things where they propagate.

#design-systems#design-tokens#design-engineering#craft#ux

Brief

Turn a habit of logging tiny design-system decisions into a single argument: the smallest calls share a discipline, and that discipline is worth more than any one of them.

Initial idea

A redesign gets all the attention, but a product is mostly made of margins, hints, and progress indicators. I keep a short log of those small decisions, the ones that are boring on their own. Three from one week turned out to share the same spine, so the log itself became the article.

Decisions

  1. 01Don't invent a value the system already names. When three margins inside one panel disagreed, the fix wasn't a nicer number, it was anchoring everything to the 16px the header already declared.
  2. 02Let color carry one meaning. A reassurance notice didn't need a new treatment, it needed to join the info-blue the flow already used, the whole block in one family instead of greys plus a stray accent.
  3. 03Make the indicator honest. The stepper connector fills one completed step at a time, not as a smooth percentage that implies progress you haven't made.
  4. 04Keep the empty state quiet. The connector's base line uses the faintest grey available, the same token as the rail divider, so the track stays silent until the blue earns its place.
  5. 05Fix it where it propagates. All three lived in shared components, so the change went there, not into one screen. A patch makes one screen right; a fix makes the next screen right before anyone touches it.

Conclusion

The decision is cheap. The reason is what's expensive, and it's the first thing lost. Six months from now a margin is just a number in a file, and someone, maybe me, will be tempted to nudge it. Writing the small ones down keeps the anchor visible so the next person doesn't quietly pull it out.

Most of my design work in a given week isn't a redesign. It's a stack of small calls. Should this margin be 16 or 24. Should this hint be grey or blue. Should the progress line fill smoothly or step by step. None of them is interesting on its own. Together they are most of what makes a product feel considered or careless.

I keep a short log of these decisions. Not the big ones, the small ones. Three from a recent week ended up sharing the same spine, and that spine is the thing worth writing down.

## Don't invent a value the system already names

A set of drawers had drifted. The header sat 16px from the edge, the form fields at 4px, the footer at 24px. Three different margins inside one panel, so the left edge wobbled from top to bottom. The fix wasn't to pick a nice new number. It was to notice the header already declared the answer, 16px, and pull everything else to it. The value was never missing. It was just being ignored in two places.

Same move with color. A reassurance notice on the skippable steps was a mix of greys with a pale blue icon. The product already had a blue for support and information, used elsewhere in the same flow. So the notice didn't need a new treatment, it needed to join the one that existed: the whole block in that blue, text and icon in one family, the icon white on a filled circle for contrast. Reaching for the primary brand color would have invented a second meaning where one already worked.

## Make the indicator honest

The stepper had numbered circles and a separate percentage bar at the bottom. I added a vertical line connecting the numbers, filling as you go. The tempting version fills continuously by percentage. I filled it one completed step at a time instead. A step is done or it isn't, and the line should say exactly that, not average it into a smooth gradient that implies progress you haven't made. The empty line uses the faintest grey we have, the same token as the rail divider, so the track stays quiet until the blue earns its place.

## Fix it where it propagates

All three lived in shared components, so the fix went there, not into one screen. Anchor the drawer margins in the shared card and every drawer inherits the alignment. That's the difference between a fix and a patch: a patch makes one screen right, a fix makes the next screen right before anyone touches it.

None of this is dramatic. That's the point. The reason I write these down is that the reasoning is the part that doesn't survive on its own. Six months from now the 16px is just a number in a file, and someone, maybe me, will be tempted to nudge it to 12 to make room for something. The note is there to say: it's 16 because the header said so, and the header is the anchor. Take that away and the wobble comes back.