ui-designer/interaction-specification

Map each loading scenario to a pattern: skeleton screens for first page loads, top progress bars for refreshes, in-button spinners for form submissions, and bottom spinners for infinite scroll. Skeleton screens should mimic real content layout with gray placeholder blocks and a subtle shimmer animation.

An empty state should include a friendly illustration or icon, an explanation of why the view is empty, and a clear call-to-action guiding the next step, such as a create button for no-data views or a retry button for network errors. Never leave users without direction.

WCAG AA requires at least 4.5:1 contrast for body text, 3:1 for large text of 18px or more, and 3:1 for icons and UI components. Verify each text and background color combination against these thresholds before finalizing a design.

Micro-interactions like button hovers should run around 100-150ms, while larger transitions such as page fades and modal appearances can take 200-300ms. Keep animations purposeful and restrained, and respect user preferences for reduced motion.

Mobile touch targets should be at least 44x44px, with 48x48px recommended, while desktop targets can be 32x32px minimum. Maintain at least 8px spacing between adjacent interactive elements to prevent mis-taps.