better-ui

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). Since neither icon unmounts, both enter and exit animate smoothly.

Use layered box-shadows for cards, buttons, and elevated elements because transparent shadows adapt to any background. Keep borders for dividers, table boundaries, and form input outlines where layout separation is the goal.

transition: all forces the browser to watch every property, causing unintended animations on colors, padding, or shadows and blocking optimizations. Always list exact properties like transition-property: scale, opacity instead.

Use will-change only for transform, opacity, or filter when you notice first-frame stutter, especially in Safari. Never use will-change: all or apply it preemptively, since each compositing layer costs memory.

Interactive elements need a 44x44px hit area for touch or mobile contexts, and at least 40x40px in desktop interfaces. Extend smaller visible elements with a centered pseudo-element, and never let two hit areas overlap.