The Details Nobody Notices (But Everyone Feels)

You’ve visited a website that just felt off. Nothing was broken. The layout made sense. The colors were fine. But something about it made you want to leave. You couldn’t explain it if someone asked.

That’s the 5% at work. The invisible layer of craft that separates a site that functions from a site that feels right. Users never notice these details consciously. But they feel every single one.

The trick is that these details don’t just happen through good taste. They happen through systems.

Transition timing is a vibe check

Hover over a button. If nothing happens for 400ms, then the color snaps instantly, it feels broken. If the transition is linear, it feels robotic. These are milliseconds we’re talking about, but they set the tone for the entire experience.

I use 150ms for small UI elements like buttons and links. 300ms for larger movements like cards lifting or panels sliding. And the easing matters more than the duration. A smooth ease-out gives everything a natural weight, like objects in the real world that decelerate as they come to rest. Linear easing feels like a machine did it. Because one did, and you didn’t bother to hide it.

The key is that these values shouldn’t live in your head. They should live in your code. We define duration and easing as design tokens. --duration-fast, --duration-normal, --ease-out-expo. Every animation on the site pulls from the same small set of values. That’s what makes a site feel like one thing instead of forty components stitched together. When a developer reaches for a transition, the right answer is already decided. No guessing, no inconsistency.

Spacing is the thing you feel but can’t point to

Inconsistent spacing is the fastest way to make a site feel amateur. Not because users are measuring pixels. Because their brains are pattern-matching machines, and when the rhythm breaks, something registers as wrong.

We use a spacing scale for everything. 4px increments that compound: 4, 8, 12, 16, 24, 32, 48, 64. It sounds rigid, but it’s the opposite. Constraints like this free you up to make decisions faster and keep the whole page feeling cohesive. When padding, margins, and gaps all snap to the same scale, the page breathes evenly.

This is where a design system earns its keep. Instead of writing padding: 16px in fifty places, you write padding: var(--spacing-4). The value is defined once and used everywhere. If you ever need to adjust the rhythm of a page, you change one token, not fifty declarations. More importantly, it makes inconsistency harder to introduce in the first place. When your options are constrained to a scale, there’s no “I’ll just eyeball 13px here.” You pick from the scale or you don’t.

Here’s a quick test: squint at your page until it blurs. If the blocks of space feel uneven, users will feel it too. They just won’t know why.

Every clickable thing should talk back

Buttons that don’t respond to hover feel dead. Links that don’t shift on interaction feel static. It’s a small thing, but interactive feedback is how users know a site was built by someone who cared.

A card that lifts 2px on hover with a subtle shadow change. A button that deepens in color when you press it. A link with an underline that slides in from the left. None of these take more than a few lines of CSS. But together they communicate something important: this works, and someone paid attention.

I think of it as the difference between pushing a cheap plastic button and a well-made mechanical one. The function is identical. The feeling is not.

This is also where consistency compounds. If one button lifts on hover but another just changes color, and a third does nothing, users pick up on the inconsistency even if they can’t name it. We define shadow tokens for interactive states. --shadow-sm for resting, --shadow-lg for hover. Every interactive element follows the same elevation language. Lift means clickable. Depth means active. Once users internalize that pattern, the whole site becomes more intuitive without a single line of instruction.

Typography has more knobs than you think

Most people pick a font, set the size, and move on. But font choice is maybe 30% of how text feels on screen. The rest is line height, letter spacing, font weight, and measure.

Measure is the one almost everyone ignores. It’s the width of a text block, usually described in characters per line. Anything over 80 characters and reading becomes exhausting. Anything under 40 and the eye is bouncing back and forth too fast. The sweet spot is around 65-75 characters. Set a max-width on your paragraphs and the readability improvement is immediate.

Line height is the other silent killer. Body text needs room to breathe. 1.5 to 1.7 for body copy, tighter for headings. Too tight and the text feels cramped. Too loose and the lines disconnect from each other.

A type scale works the same way as a spacing scale. Define your sizes as tokens. --font-size-sm, --font-size-base, --font-size-lg, up through your display headings. Pair each size with a line height that’s already tuned for it. Now every piece of text on the site has a considered relationship to every other piece. Hierarchy becomes automatic. You’re not choosing a font size for each element. You’re placing it within a system that already has the right proportions baked in.

The system is the craft

One smooth transition won’t save a bad site. Consistent spacing won’t fix ugly colors. Good typography won’t make up for a confusing layout.

But when you get all of these small things right, something happens. The site stops feeling like a collection of elements and starts feeling like a single, coherent thing. Users relax into it. They stay longer. They trust it more. They can’t tell you why.

The secret is that craft at this level isn’t about making a hundred perfect individual decisions. It’s about building a system that makes good decisions the default. Design tokens, spacing scales, type systems, interaction patterns. These aren’t bureaucracy. They’re how a small team ships work that feels like it came from a team ten times the size.

That’s the work we obsess over at ZADIE. Not because anyone will notice. Because everyone will feel it.