Web Design

UI Details

Small design details that make a big difference

UI Details

detail.design

A curated collection of small UI/UX details that make a big difference. Micro-interactions, motion design, accessibility patterns, layout tricks, and easter eggs.

Highlights

Prevent Layout Shift from Font Weight Change — avoid jank when toggling bold/normal text
Larger Hit Area than It Appears — accessibility win with invisible padding
Shake Disabled Button while Clicking — motion feedback for disabled actions
Outer and Inner Border Radius — the math behind nested rounded corners
Closing Modal Respects Physics — smooth scroll position tracking during modal transitions
Blur Trick for the Optical Fit — subtle blur for optically balanced layouts
ASCII Loaders — creative text-based loading animations
Photo Response to Theme Mode — adapting images to light/dark themes
Avoid Using WebP for OG Images — social platforms have inconsistent WebP support
Drop the WWW Prefix — cleaner URLs

Typography

Font recommendations and typography resources for web design

Draftboard

A shared space for teams to post designs, ideas, and work in progress.