Style: Micro-interactions. Type: General. Keywords: Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive. Primary Colors: Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B. Secondary Colors: Accent feedback, neutral supporting, clear action indicators. Effects & Animation: Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic. Best For: Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components. Do Not Use For: Desktop-only, critical performance, accessibility-first (alternatives needed). Light Mode: ✓ Full. Dark Mode: ✓ Full. Performance: ⚡ Excellent. Accessibility: ✓ Good. Mobile-Friendly: ✓ High. Conversion-Focused: ✓ High. Framework Compatibility: Framer Motion 10/10, React Spring 9/10. Era/Origin: 2020s Modern. Complexity: Medium. AI Prompt Keywords: Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.. CSS/Technical: animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop. Implementation Checklist: ☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle. Design System Variables: --micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error.