The Brew
An 8px padding difference may seem harmless — until your modal breaks on mobile. Until your text overlaps at smaller breakpoints. Until your “quick fix” becomes a cascading mess in production.
That’s the Padding Paradox: The smaller the inconsistency, the harder it is to debug later.
Here’s what I’ve learned building across systems:
Padding decisions are often “in the moment” hacks
But these hacks create silent drift over time
That drift becomes tech debt — invisible but expensive
In one case, we had:
4 modals that looked the same, but used 3 different padding values
One broke at tablet, one clipped on desktop, and one didn’t scale with content
None used tokens
Fixing it required reverse engineering and remapping components — something that wouldn’t have happened if spacings were systemized upfront.
Pro Tip: Use spacing tokens like space-md, space-lg, section-padding — not arbitrary values. And define them in your design system docs.
Sip Thoughtfully Build your UI like it’s LEGO — align the bricks, not the eyeballs.
Consistent spacing isn’t just aesthetics. It’s structural integrity.
Your Turn: Audit one screen today. Ask:
Are paddings consistent across similar sections?
Are you using spacing tokens or freestyling with numbers?
Would your dev team know which padding to use without asking you?
Let’s make it a two-way espresso. ☕️
Loved this issue? Got a question, hot take, or your own design rabbit hole?
Message me on LinkedIn
Book a casual chat on Topmate
Explore all my work on Bento
You talk. I brew. We ship better together.
