better-ui

Apply the concentric radius rule: outer radius equals inner radius plus the padding between them. For example, a card with 8px padding and a 12px inner radius needs a 20px outer radius. Past 24px of padding, treat layers as separate surfaces.

Use AnimatePresence with a keyed motion.span, animating opacity 0 to 1, scale 0.25 to 1, and blur 4px to 0px with transition type spring, duration 0.3, and bounce 0. Without a motion library, keep both icons in the DOM and cross-fade with CSS transitions.

Use layered transparent box-shadows for depth on cards, buttons, and elevated elements, since they adapt to any background. Keep borders only for structural purposes like dividers, separators, and focus or selected states.

A theme flip changes color, background, border, and shadow on every element at once, so all transitions fire together and smear. Inject a stylesheet disabling all transitions, force a reflow, then remove it on the next frame.

Use will-change only for transform, opacity, and filter, which the GPU can composite, and only after observing first-frame stutter. Never use will-change: all or apply it preemptively, since each compositing layer costs memory.

Match stroke width to adjacent text weight: 1.5px beside regular 400 text, 2px beside semibold 600, and 2.5px beside bold 700. Keep one stroke convention per surface and one icon library per toolbar.