Found this helpful?
A walkthrough of spacing, hierarchy, interaction states, and small details that turn functional interfaces into experiences that feel crafted and intentional.
Polish is what separates a product that feels professional from one that just works. It's not about visual complexity — it's about consistency, attention, and restraint. Here's how I approach it.
Spacing is your first tool
Before touching colors or typography, get your spacing right. Use a consistent scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px) and never deviate. Most visual noise in interfaces comes from inconsistent spacing, not bad design.
Hierarchy through weight, not size
Resist the urge to make headings huge. Product companies like Linear and Notion use font-semibold with tracking-tight for headings and let weight do the work. Reserve large sizes for true hero moments — landing pages, key metrics, empty states.
Every interactive element needs four states
Default, hover, active, and disabled. If any of these are missing or inconsistent, users will feel something is wrong even if they can't name it. Focus states are especially important — they're the only way keyboard users understand where they are.
Micro-interactions earn trust
A 150ms ease-out on a button press, a subtle scale on card hover, smooth height transitions on accordions — none of these are individually impressive, but together they signal care. They tell the user that someone thought about them.
The 10-foot rule
Step back from your screen. Squint. Can you still read the hierarchy? Can you tell which element is most important? If not, your contrast or weight differentiation needs work.
Was this post useful?
2,341 readers have visited this post
