Browse everything
Library
Every concept in one place. Filter by track, difficulty, or topic, search the lot, and mark lessons read or saved to shape your own path. Your reading data lives only in this browser — nothing is collected.
Track
Difficulty
Topic
62 concepts in the library
- FoundationsBeginner7 min
UI vs UX, clearly
UI is what a person sees and operates; UX is the whole experience of reaching their goal. You design both, on purpose.
- FoundationsBeginner8 min
The UX process end to end
A lightweight path from a fuzzy problem to a shipped feature: discover, define, develop, deliver — diverging then converging, twice.
- FoundationsBeginner9 min
User research basics
Match the question to the method: what people say vs what they do, exploring vs evaluating — and how many participants is enough.
- FoundationsIntermediate9 min
Information architecture
Group and name a product's content by the user's task, not your org chart, so people can find things without thinking about structure.
- FoundationsBeginner8 min
Wireframes to hi-fi
Climb the fidelity ladder on purpose: each step from wireframe to hi-fi forces one new decision and defers the rest.
- FoundationsIntermediate9 min
Customer journey mapping
Map a goal across stages — doing, thinking, feeling — to find the friction moments and the opportunities hiding in them.
- FoundationsBeginner8 min
Design thinking
A five-mode loop — empathize, define, ideate, prototype, test — for turning a fuzzy human problem into something worth building.
- FoundationsIntermediate10 min
Usability heuristics
A short checklist of interface common sense — status, control, consistency, error recovery — you can audit any screen against in minutes.
- FoundationsBeginner10 min
Empty states & onboarding
The zero-data screen is a designed moment, not an accident: name the space, explain what appears here, and offer one clear path to a first success.
- Visual craftBeginner14 min
Visual hierarchy
Hierarchy is how a screen tells you where to look first. Four signals carry it — size, weight, color, and spacing — and you rarely need more than three levels.
- Visual craftBeginner15 min
Typographic scale
A modular type scale derives every text size from one base and one ratio, so headings and body relate by a consistent multiplier instead of arbitrary pixels.
- Visual craftBeginner13 min
Spacing & rhythm
Consistent spacing on a base unit (usually 4 or 8px) gives a layout vertical rhythm. Ad-hoc margins are the most common reason a screen feels off.
- Visual craftBeginner16 min
Color & contrast
Color carries mood and meaning, but contrast carries legibility. Learn the WCAG ratios, how to hit them, and why OKLCH makes accessible palettes easier.
- Visual craftIntermediate16 min
Layout & grids
A grid turns scattered elements into a system of columns and gutters. Learn CSS Grid, responsive reflow with auto-fill/minmax, and when to reach for subgrid.
- Visual craftIntermediate12 min
Dark mode & theming
Real theming is semantic tokens, not inverted colors: follow the system scheme, allow a persisted override, avoid pure black, and hold WCAG AA in both modes.
- Design systems & tokensBeginner20 min
Design systems gallery
A tour of the major public design systems — what each is built for, what to steal, and what to skip — so you can choose well or build your own.
- Design systems & tokensBeginner14 min
What is a design system?
A design system is four layers working together — tokens, components, patterns, and governance. See what each layer does and why the order matters.
- Design systems & tokensBeginner16 min
Design tokens
Named design decisions — color, space, type, radius, motion — stored once, referenced everywhere. Inspect Motif's own tokens and the three-tier model.
- Design systems & tokensBeginner14 min
Atomic design
Brad Frost's atomic design names five levels — atoms, molecules, organisms, templates, pages — so a UI composes from primitives instead of one-off screens.
- Motion & micro-interactionsBeginner9 min
Motion principles
Borrowed from classic animation: timing, anticipation, follow-through, and staging turn a mechanical move into one that reads as intentional.
- Motion & micro-interactionsBeginner8 min
Anatomy of a micro-interaction
Every small feedback moment has four parts — trigger, rules, feedback, and loops. Name them and you can design any of them on purpose.
- Motion & micro-interactionsIntermediate9 min
Easing & spring
Easing scripts a move over a fixed time; a spring simulates physics and settles on its own. Knowing which to reach for is half of good motion.
- Motion & micro-interactionsBeginner8 min
Jelly button: squash & stretch on press
Make a control feel physical: it squashes when pressed and springs back with a wobble.
- Motion & micro-interactionsBeginner8 min
Tap & gesture feedback
Touch interfaces lack physical clicks, so a tap needs visible feedback — a ripple and a small press — to confirm the surface felt you.
- Motion & micro-interactionsBeginner8 min
Loading & skeleton states
A skeleton that mirrors the real layout makes waiting feel shorter and prevents the layout jump a spinner can't.
- Motion & micro-interactionsBeginner8 min
Toast / notification motion
A toast should arrive with a spring and leave with a quiet ease — and announce itself to screen readers without stealing focus.
- Motion & micro-interactionsIntermediate9 min
Scroll-driven reveals
Let content fade and rise into place as it enters the viewport — an enhancement that must never hide content when JavaScript doesn't run.
- Web animation enginesBeginner15 min
CSS transitions & keyframes
The two native CSS animation primitives: transitions interpolate a state change, keyframes choreograph a named multi-step sequence. Learn when each one fits.
- Web animation enginesIntermediate16 min
The View Transitions API
The View Transitions API animates between two DOM states — including a shared element that morphs across a navigation — with the browser doing the work.
- Web animation enginesIntermediate14 min
Choosing an animation tool
CSS, View Transitions, Motion, GSAP, Lottie, Rive — six engines for different jobs. A guide to matching the tool to the animation, starting from boring.
- Web animation enginesIntermediate12 min
The Web Animations API
element.animate() runs keyframe animations from JavaScript on the compositor — with play, pause, reverse, and a finished promise CSS can't give you.
- The modern web platformIntermediate15 min
Container queries
Container queries let a component respond to the width of its container instead of the viewport — so one card works in a sidebar and a wide column unchanged.
- The modern web platformIntermediate14 min
The :has() selector
The :has() relational selector styles an element based on what it contains — the long-wished-for parent selector — replacing a lot of state-tracking JavaScript.
- The modern web platformAdvanced15 min
CSS anchor positioning
CSS anchor positioning tethers a floating element to another element — tooltips, popovers, menus — with edge-flipping fallbacks, no JS position math required.
- The modern web platformIntermediate12 min
CSS Subgrid
Subgrid lets a nested element adopt its parent's grid tracks, so content inside a row of cards lines up across them with no fixed heights or magic numbers.
- The modern web platformIntermediate13 min
The Popover API
The native popover attribute gives any element show/hide, light-dismiss, Esc, and the top layer for free — menus and tooltips with almost no JavaScript.
- The modern web platformIntermediate12 min
Modern CSS color functions
color-mix(), light-dark(), and relative color let CSS derive whole palettes and theme by scheme from one source color — no preprocessor needed.
- The modern web platformIntermediate12 min
Scroll-snap carousels
CSS scroll-snap makes the browser's scroll position the carousel — touch, trackpad, and keyboard work for free, with new pseudo-elements for controls.
- 3D & graphics for UIBeginner15 min
SVG essentials
SVG draws in resolution-independent user units inside a viewBox, so one graphic stays crisp at any size. Learn the coordinate system, paths, and currentColor.
- 3D & graphics for UIBeginner14 min
Scalable icon systems
Build icons as a set: a shared grid, one stroke width, currentColor, and an accessible Icon component. One vector beats an icon font at every size.
- 3D & graphics for UIAdvanced16 min
WebGL & WebGPU
Past SVG and Canvas 2D lies the GPU: WebGL and WebGPU. Learn the rendering ladder, when each rung is worth it, and the accessibility fallback you always owe.
- Accessibility & inclusive designIntermediate18 min
The dropdown taxonomy
Every dropdown is really one of ten patterns — native select, listbox, combobox, multiselect, and more. Learn each ARIA contract and when to reach for it.
- Accessibility & inclusive designIntermediate16 min
Fieldsets, legends & grouping
Use fieldset and legend to give related controls a shared accessible name — and learn when grouping helps, when it hurts, and the ARIA fallback.
- Accessibility & inclusive designIntermediate16 min
Keyboard navigation
Every interaction must work from the keyboard alone. Learn tab order, the roving tabindex pattern for composite widgets, and the keys users expect.
- Accessibility & inclusive designIntermediate16 min
Focus management
When UI appears or moves, focus has to follow. Learn to move focus into a dialog, trap it while open, restore it on close, and always keep it visible.
- Accessibility & inclusive designIntermediate14 min
Live regions
When content changes without a page load, a screen reader only knows if you tell it. Learn aria-live, polite vs assertive, and the rules that make it work.
- Accessibility & inclusive designBeginner10 min
Designing for reduced motion
prefers-reduced-motion lets motion-sensitive users opt out of large animation. Reduce or replace the motion — keep the feedback — don't strip it all.
- Accessibility & inclusive designIntermediate13 min
Accessible form validation
Forgiving, accessible validation: check at the right moment, tie plain-language errors to fields with aria, summarize them — never signal by color alone.
- Psychology & conversionBeginner13 min
Hick's Law
Hick's Law: the time to decide grows with the log of the number of choices. Fewer, well-grouped options mean faster decisions — but the cost is logarithmic.
- Psychology & conversionBeginner14 min
Fitts's Law
Fitts's Law: time to hit a target grows with distance and shrinks with size. Big, close targets are faster — and screen edges are effectively infinite.
- Psychology & conversionBeginner12 min
The Von Restorff effect
The Von Restorff (isolation) effect: the item that differs from its neighbors is the one people notice and remember. Isolate one thing — and only one.
- Brand & product strategyBeginner14 min
Brand as a system
A brand isn't a logo — it's a system where positioning, color, type, shape, and voice all point the same way. Change one and the rest must follow.
- Brand & product strategyBeginner14 min
Color in branding
Brand color is a meaning system before it's a contrast problem. Pick a palette from a personality — primary, support, accent, neutral — minus the clichés.
- Brand & product strategyBeginner13 min
Brand voice
Voice is your brand written down. Define it as a few adjectives, then apply it to every string — while letting clarity win in errors and legal text.
- Generative & agentic UIIntermediate16 min
Declarative UI for models
Generative UI is safest when a model emits structured data, not markup. Your app renders it with a fixed allow-list of trusted components — never raw HTML.
- Generative & agentic UIIntermediate15 min
Tool UI patterns
When an AI agent calls tools, the user needs to see it: pending, streaming, result, error, and a human-in-the-loop approval before anything consequential runs.
- Generative & agentic UIAdvanced16 min
Bring your own key
The BYOK pattern lets users run a feature with their own API key, kept on their device and never sent to your server. Learn the data flow and the real risks.
- Generative & agentic UIIntermediate13 min
Streaming & optimistic UI
Model UIs feel instant when you stream tokens as they arrive and render the user's action optimistically, reconciling with the server and rolling back on error.
- Platform internals & deliveryAdvanced16 min
The rendering pipeline
The browser turns DOM and CSS into pixels in stages: style, layout, paint, composite. Knowing which a property triggers is the key to smooth, jank-free UI.
- Platform internals & deliveryIntermediate15 min
Core Web Vitals
Core Web Vitals score real user experience: LCP for loading, INP for responsiveness, CLS for stability. Learn the thresholds and what moves each one.
- Platform internals & deliveryAdvanced15 min
Containment & isolation
CSS containment lets you tell the browser a subtree is independent, so it can skip work. Learn contain, content-visibility, and will-change — and their costs.
- Platform internals & deliveryIntermediate12 min
Responsive images
srcset and sizes let the browser fetch the smallest sharp source; modern formats and reserved dimensions cut bytes and layout shift for better Core Web Vitals.