better-ui

Use the concentric radius formula: outer radius equals inner radius plus padding. For example, a card with 8px padding and a 12px inner radius needs a 20px outer radius. Equal radii on nested surfaces make the inner element look pinched.

Animate icons with opacity, scale (0.25 to 1), and blur (4px to 0px) instead of toggling visibility. With Motion or framer-motion use a spring transition with duration 0.3 and bounce 0; without a motion library, keep both icons in the DOM and cross-fade with CSS transitions.

Use CSS transitions for interactive state changes like hover, toggle, and open/close because they are interruptible mid-animation. Reserve keyframe animations for one-shot staged sequences such as enter animations or loading states.

Yes, the principles include Tailwind-specific patterns such as active:scale-[0.96] for press feedback, transition-transform for transform-only transitions, and outline-black/10 dark:outline-white/10 for image outlines. It also warns against transition-all in favor of explicit properties.

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

Match the icon stroke to the adjacent text weight: 1.5px beside regular 400-weight text, 2px beside semibold 600, and 2.5px beside bold. Keep one stroke weight per icon set and never mix icon libraries on a single surface.