UX patterns, broken down.
The pattern library behind @designmotionhq: every video breakdown, plus the key insights in plain text.
Browse by layer.
Components, by family
40 patternsEvery pattern
interaction
CSS Has Selector
One line of CSS. The whole card reacts to its own checkbox.
visual
De-AI Landing Hero
Your landing page looks AI-made. Five tells. Five fixes.
visual
Reverse-Engineered Linear
Why does Linear feel expensive? Five decisions. None need a designer.
interaction
Bulk Actions
Bulk actions are a system, not a lone checkbox.
interaction
Disabled Buttons
The button is disabled, and nobody tells you why.
interaction
Hover Trap
Hover works on your laptop but is dead on mobile.
interaction
Behind the Button
Six things happen before the spinner stops.
forms
Settings System
Your settings page is harmless until the last section. Settings is a system.
forms
Autosave
Saved. It wasn't. Your wifi died mid-word.
interaction
Inline Editing
Click the title. It's an input now, and nothing moved.
interaction
Live Cursors
Three cursors land on your canvas. None of them are yours.
interaction
Destructive Actions
Dangerous actions are a design language, not just a red button.
interaction
Context Menu
A context menu is a system, not just a list of actions.
motion
Animation Timing
Same modal, two timings: one feels premium, one feels broken. It's all milliseconds.
visual
Charts That Lie
Same data, opposite stories: how you draw a chart decides which truth people see.
forms
Date Pickers
Same date. Six clicks. Or one. The picker that respects your users' time.
visual
Design System Kit
Random hex and eyeballed pixels don't scale. A token system does.
feedback
Doherty Threshold
Cross 400ms and your user checks out. Perceived speed is a design choice.
interaction
Drag and Drop
The board does the thinking: moving a card is moving state.
interaction
Dropdown Design
Your dropdown is broken. Five rules separate cheap from premium.
motion
Easing Curves
Same distance, different feel: the easing curve is what decides how motion reads.
content
Empty States
Your empty state is your first impression. Most apps waste it.
feedback
Error States
Same error. Better recovery.
forms
Form Field States
Six field states, one system. Miss one and you ship a bug.
visual
Golden Ratio
One layout looks cheap, the other expensive. The difference is 1.618.
visual
Grid System
Align everything to a 12-column grid, then break it on purpose.
forms
Input Masking
Type 16 digits. Watch them become a card.
feedback
Loading States System
Stop using skeletons for everything. Loading is a system, not a default.
navigation
Navigation Patterns
Five nav patterns, one system: mobile = tabs, desktop = sidebar.
feedback
Notification System
Notifications are a system. Pick the wrong surface and users tune out.
interaction
Peak-End Rule
Users don't average an experience. They remember its peak and its end.
visual
Proximity Rule
Close = related, far = separate: spacing alone groups your UI, no borders needed.
forms
Range Sliders
Drag to 47. Or 48? Your finger can't tell.
interaction
Search Experience System
Search is a system. Five parts. Most apps skip them.
content
Serial Position
Strongest first, strongest last: people forget the middle
visual
Shadow Elevation
Shadows aren't decoration. They encode hierarchy and depth.
interaction
Star Rating
Five stars looks trivial. Hover, half-fills, and honest averages are where it breaks.
forms
Stepper Wizard
Twelve fields, one wall. Four steps, one path.
navigation
Tabs System
Tabs aren't a widget. They're a system. Stop letting them jump.
feedback
Toast Notifications
Toasts done right: five rules for notifications that inform without blocking.
forms
Toggle Anatomy
Two toggles. One snaps. One morphs, and the difference is everything.
interaction
Tooltip Design
Your tooltip is annoying. Five rules that make it feel premium.
visual
Visual Hierarchy
Five rules that decide what your users see first, and what they skip.
visual
Z-Index Mastery
z-index lies: a bigger number won't win if the element isn't positioned.
feedback
Zeigarnik Effect
Your brain forgets what's finished, and won't stop nagging about what's not.
navigation
Focus States
Press Tab. Where did the focus go?
interaction
Swipe Actions
Your swipe actions are killing your UX
feedback
Undo UX
Deleted. You have five seconds.
interaction
Bottom Sheets
Your thumb can't reach that menu.
forms
Form Validation Timing
The error fires while you're still typing.
content
Microcopy
Same form. Different words. One converts.
feedback
Optimistic UI
Click like. One waits. One feels instant.
visual
Gradient Design
Why your gradients look cheap
feedback
Skeleton Loading
Your loading spinner is making the wait feel longer
interaction
Color Picker UX
Pick a color. Your whole UI answers.
forms
File Upload UX
Same file. One upload feels broken. One feels safe.
forms
Password Field UX
Eight characters, one symbol: still weak. Strength lives in real-time feedback.
interaction
Command Palette
⌘K is a system, not a search box.
interaction
Filter Chips
200 results. Three taps. 12 left.
forms
OTP Input
Your OTP input is a system, not six boxes.
navigation
Pagination
Add one row and your pagination breaks.
interaction
Accordion Disclosure
One accordion glides open, the other jumps. Four small rules separate them.
interaction
Data Table
Your data table feels cheap because it's a grid of divs, not a system.
motion
Card Hover Anatomy
Same card. One feels alive, three stay dead. Four rules separate them.
interaction
Modal Hierarchy
5 overlays. Most apps pick the wrong one.
visual
Icon Design Rules
Your icons look cheap. 5 rules turn them premium.
content
Landing Page Skeleton
Every landing page that converts follows the same 5-section skeleton.
motion
Scroll-Driven Animations
Same scroll: one feels dead, the other comes alive. Pure CSS, zero JavaScript.
visual
Design Tokens
47 changes, or just one. Design tokens change everything.
visual
Color Accessibility
Same text, same color: one is invisible. The contrast ratio nobody checks.
visual
Gestalt Laws
Same elements. One is chaos. The other clicks instantly.
visual
Border Radius
Same card. One looks off, one looks expensive. The gap is one CSS rule.
visual
Dark Mode
Same app, one inverts colors. The other feels premium.
visual
Von Restorff Effect
Three identical pricing cards, nobody clicks. Isolate one: 3× more conversions.
visual
Perfect Card
One card looks free. The other costs $1000. Four CSS changes.
visual
Depth Layers
Same layout, same colors: three properties turn flat cards into real depth.