interface-polish

Interface Polish

The last 10% that separates "works" from "feels great". Apply these rules to an interface whose layout, palette, and structure are already decided. Do not change the design direction — refine its execution.

Work through the sections as a checklist against the actual code. Fix what's missing; leave what's already right.

1. Interactive states

Every interactive element needs four distinct states: rest, hover, active, focus-visible. Missing states are the #1 "feels unfinished" signal.

.button {
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.button:hover  { background-color: var(--accent-hover); }
.button:active { transform: scale(0.98); transition-duration: 50ms; } /* press responds FASTER than hover */
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;   /* never outline: none without a replacement */
}

Rules:

• Hover changes must be subtle but unmistakable: one step of background shift, or 1–2px lift with shadow deepening — not both plus a color change.
• :active should feel physically pressed: scale 0.97–0.98 or translateY(1px), with a shorter duration than hover.
• Use :focus-visible, not :focus, so mouse clicks don't paint rings but keyboards do.
• Rows/list items: hover = background-color shift only; don't move them.
• Disabled: reduce opacity to ~0.5 AND remove hover effects (pointer-events: none or explicit rules).
• Touch: hover states must not be load-bearing; anything revealed on hover needs a touch/focus path too.

2. Transition timing and easing

• Durations: 100–150ms hover/press · 200ms dropdowns, tooltips · 250–300ms modals, drawers, layout shifts · 400–600ms only for page-level or decorative reveals. When unsure, subtract 50ms — slow transitions read as lag.
• Never transition: all. List properties explicitly; all causes accidental animation of layout properties and jank.
• Easing: ease-out for things appearing/responding to the user (start fast, settle). ease-in or ease-in-out for things leaving. cubic-bezier(0.16, 1, 0.3, 1) (expo-out) makes entrances feel expensive. Bounce/overshoot only if the design system is playful — and subtle (≤8% past target).
• Exit faster than enter: a modal opening at 250ms should close in ~180ms. Users wait for what appears; they've already dismissed what's leaving.
• Animate only compositor-friendly properties where possible: transform, opacity. Animating width/height/top/left/margin causes layout jank; if unavoidable, keep the element small or use transform tricks. Never animate box-shadow directly on large surfaces — crossfade a pseudo-element's opacity instead: