make-interfaces-feel-better

Use concentric border radius: outer radius equals inner radius plus padding. For example, a card with 8px padding and a 12px inner radius needs a 20px outer radius. If padding exceeds 24px, treat layers as separate surfaces instead.

Keep both icons in the DOM with one absolutely positioned over the other, then cross-fade using CSS transitions on opacity, scale (0.25 to 1), and blur (4px to 0) with cubic-bezier(0.2, 0, 0, 1). This gives enter and exit animations without any dependency.

Use CSS transitions for interactive state changes like hover, toggles, and drawers because they are interruptible and retarget mid-animation. Reserve keyframes for one-shot staged sequences such as enter animations or loading states.

Proportional numerals have varying widths, so changing values shift surrounding layout. Apply font-variant-numeric: tabular-nums (Tailwind: tabular-nums) to counters, timers, and prices so all digits share equal width.

Use will-change only for GPU-compositable properties: transform, opacity, and filter. Add it only when you notice first-frame stutter, particularly in Safari, and never use will-change: all since extra compositing layers cost memory.

Use pure black rgba(0, 0, 0, 0.1) in light mode and pure white rgba(255, 255, 255, 0.1) in dark mode. Never use tinted neutrals like slate or zinc, since they pick up the surface color and read as dirt on the image edge.