make-interfaces-feel-better

Details that make interfaces feel better Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code. Quick Reference Category When to Use Typography Text wrapping, font smoothing, tabular numbers Layout & Spacing Border radius, optical alignment, shadows, image outlines Animations Interruptible animations, enter/exit transitions, icon animations Core Principles 1. Concentric Border Radius Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off. 2. Optical Over Geometric Alignment When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment. 3. Shadows Over Borders Layer multiple transparent box-shadow values for natural depth. Shadows adapt to any background; solid borders don't. 4. Interruptible Animations Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once. 5. Split and Stagger Enter Animations Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay. 6. Subtle Exit Animations Use a small fixed translateY instead of full height. Exits should be softer than enters. 7. Contextual Icon Animations Animate icons with opacity , scale , and blur instead of toggling visibility. Spring animations work well here. 8. Font Smoothing Apply -webkit-font-smoothing: antialiased to the root layout on macOS for crisper text. 9. Tabular Numbers Use font-variant-numeric: tabular-nums for any dynamically updating numbers to prevent layout shift. 10. Text Wrapping Use text-wrap: balance on headings. Use text-wrap: pretty for body text to avoid orphans. 11. Image Outlines Add a subtle 1px outline with low opacity to images for consistent depth. Common Mistakes Mistake Fix Same border radius on parent and child Calculate outerRadius = innerRadius + padding Icons look off-center Adjust optically with padding or fix SVG directly Hard borders between sections Use layered box-shadow with transparency Jarring enter/exit animations Split, stagger, and keep exits subtle Numbers cause layout shift Apply tabular-nums Heavy text on macOS Apply antialiased to root Review Checklist Nested rounded elements use concentric border radius Icons are optically centered, not just geometrically Shadows used instead of borders where appropriate Enter animations are split and staggered Exit animations are subtle Dynamic numbers use tabular-nums Font smoothing is applied Headings use text-wrap: balance Images have subtle outlines Reference Files typography.md — Text wrapping, font smoothing, tabular numbers layout-and-spacing.md — Border radius, optical alignment, shadows, image outlines animations.md — Interruptible animations, enter/exit transitions, icon animations