frontend-interfaces

Use concentric border radius: outer radius equals inner radius plus padding. For example, a card with 8px padding and 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). Since neither icon unmounts, both enter and exit animate smoothly.

Use CSS transitions for interactive state changes like hover, toggle, and open/close because they are interruptible and retarget mid-animation. Reserve keyframes for one-shot staged sequences like enter animations, since keyframes restart from the beginning when interrupted.

Proportional fonts give digits different widths, so updating counters or timers shifts surrounding layout. Apply font-variant-numeric: tabular-nums (Tailwind: tabular-nums) to make all digits equal width and prevent the shift.

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

Use scale(0.96) for press feedback, and never go below 0.95 since smaller values feel exaggerated. Implement it with CSS transitions so releasing mid-press smoothly returns, and add a static prop to disable it where motion would distract.