Design systems, motion, accessibility, and conversion-driven UX patterns.
Design tokens die at the handoff boundary. Here's the Figma Variables → Tailwind pipeline we use so color, spacing, and radius changes make it to production without a designer filing a Jira ticket.
Most empty states are decorative apologies. The good ones sell the product, teach the mental model, and reduce support tickets. Here's how we design and build them without shipping cartoon mascots nobody asked for.
Skeleton screens became the default loading pattern, and most teams use them wrong. Here's when they help perceived performance, when they hurt it, and what to reach for instead.
Most teams ship focus rings by accident. Here's how to design them on purpose — with tokens, offsets, and a rule that survives dark mode, buttons on gradients, and picky designers.
Hover is a desktop luxury that quietly breaks on half your traffic. Here's how to design interactions that survive touch, keyboard, stylus, and the weird in-between devices your analytics forgot about.
Most product animations feel off because durations are chosen by vibe. Here's how to build a motion ratio scale that makes 200ms feel intentional and 400ms feel earned.
Most modal bugs aren't styling issues — they're state management issues pretending to be UI. Here's how to treat overlays like routes and stop shipping broken back buttons.
Most form validation fails not because the rules are wrong, but because the timing is. Here's a field-tested model for when to validate, when to wait, and when to say nothing at all.
Toasts fade in three seconds and expect users to catch, read, and act on them. Here's how we redesigned notification patterns to stop punishing distracted users and keyboard-only users alike.
Most design token systems die at the second theme. Here's a three-tier naming convention that survives dark mode, brand refreshes, and the inevitable Tailwind migration.
Empty states get treated like an afterthought — a shrug icon and a sentence. They're actually one of the highest-leverage screens in your product. Here's how to design and ship them like it.
Skeleton screens became the default for perceived performance, but most implementations make apps feel slower and less trustworthy. Here's when to use them, when to skip them, and what to build instead.
Most focus rings are either invisible or ugly enough that a designer strips them out. Here's how to design keyboard focus that survives brand review, passes WCAG, and doesn't break your dark mode.
Hover states quietly hide critical UI from most of your users. Here's how to design interactions that work on touch, keyboard, and mouse without shipping three different UIs.
Disabled primary buttons feel safe but they hide the real problem: the user doesn't know what's wrong. Here's a pattern that keeps intent visible and errors honest.
Most modal bugs aren't styling issues. They're routing issues in disguise. Here's how to think about dialogs as URL state, and what that fixes.
Most inline validation is punishment dressed up as UX. Here's how to design and build form errors that reduce abandonment instead of causing it.
Toasts get dismissed before anyone reads them, stack into unreadable columns, and vanish for screen reader users. Here's the pattern we use instead when work happens off the main thread.
Most design token systems die the moment they hit a real codebase. Here's how we structure tokens so they actually get used — and stay in sync between Figma, Tailwind, and native.
Empty states are the first thing new users see and the last thing designers polish. Here's how to treat them as a real product surface instead of a placeholder illustration with a sad robot.
Loading states are where trust is won or lost. Skeletons, spinners, and doing nothing at all each have a job — most teams pick wrong and pay for it in bounce rate.
Your designer hates the default focus outline. Your accessibility auditor demands it. Here's how to ship focus indicators that pass WCAG, respect the brand, and actually help keyboard users.
Hover was designed for a world with one input device. In 2026, most users have three. Here's how to design interaction states that don't quietly break on tablets, foldables, and Windows touchscreens.
Disabled submit buttons feel tidy in Figma and hostile in production. Here's why we've stopped shipping them, and the patterns we reach for instead.
Most modal bugs aren't CSS bugs. They're routing bugs, focus bugs, and state bugs pretending to be design decisions. Here's how to actually ship dialogs that behave.
Inline validation looks helpful on the Figma frame and hostile in production. Here's how to design error states that guide users through a form instead of punishing them for typing.
Toasts fail screen readers, disappear before users can read them, and stack into unreadable towers. Here's the async feedback pattern we ship instead.
Most design token systems die somewhere between Figma and production. Here's how we structure tokens so they actually round-trip between designers and engineers without becoming a second source of truth nobody trusts.
Empty states are the first product experience most users see, and most teams treat them like a 404. Here's how to design zero-data screens that teach, activate, and quietly do the heavy lifting for onboarding.
Skeletons feel modern, spinners feel dated, and sometimes showing nothing is the fastest option. Here's how we decide between them on real product work.
Focus rings get slapped on at the end of a project, clash with the brand, and then get disabled. Here's how to treat them as a first-class design token — one that survives redesigns, dark mode, and QA.
Hover is a desktop assumption baked into most component libraries. Here's how to design and build interactions that behave correctly across mouse, touch, stylus, and hybrid devices in 2026.
Most dark mode implementations are a broken CSS variable swap held together with hope. Here's what breaks in production — shadows, images, brand color, contrast — and how to build a dark theme that doesn't feel like a bug.
Most product UIs animate too much, too long, and at the wrong easing. Here's the motion budget we use to keep interfaces feeling fast, accessible, and intentional.
Validating on every keystroke feels responsive but punishes users mid-thought. Validating only on submit feels rude. Here's the timing model we use to make forms feel calm and competent.
Modals look simple in Figma and break in twelve different ways in production. Here's the focus trap, scroll lock, and ESC handling we actually ship — and why the native <dialog> element finally earns its keep in 2026.
Most design token systems look great in Figma and fall apart in the codebase. Here's how to structure tokens so they actually hold up across Tailwind, iOS, and three product teams.
Most empty states show a sad cloud and a 'No data yet' label. That's a dead pixel. Here's how to turn the zero state into the most persuasive screen in your product.
Skeleton screens aren't automatically better than spinners. Here's the decision tree we use on real projects, with code, timing thresholds, and the accessibility traps nobody talks about.
Removing the focus ring is the most common accessibility regression we see in audits. Here's how to keep keyboard users happy without making your designer cry.
Toasts feel modern, but they're quietly failing the people who need them most. Here's how we audit, fix, or replace them — with patterns that hold up under accessibility and conversion scrutiny.
Greyed-out buttons feel safe to designers and ship-ready to engineers. They're neither. Here's why disabled states quietly tank conversion, and the patterns we use to replace them without breaking validation.
The 44px tap target rule is a starting point, not a finish line. Here's how thumb reach, target spacing, and gesture conflicts actually break mobile UX — and what to measure instead.
Most form validation advice obsesses over error styling. The harder question is timing: validate on blur, on change, or on submit? Here's a decision framework that holds up in production.
Modals feel like a free UI primitive until you count the focus traps, the scroll locks, the stacking bugs, and the conversion drop. Here's how we cut a client's modal count in half and got measurable wins.
Most dark modes are a light theme with the lights off. Here's how to build a token system that keeps brand identity, passes WCAG, and doesn't make your buttons glow like radioactive candy.
Empty states are the most under-designed screens in most products. Here's how to turn them into onboarding, activation, and conversion moments without dressing them up as cartoons.
Skeleton screens became the default loading pattern years ago, but most implementations make perceived performance worse, not better. Here's when to use what, and how to build skeletons that don't lie to your users.
Most teams either kill focus rings for aesthetics or ship the browser default and call it accessible. Here's how to design rings that survive design review and pass WCAG 2.2.
Most UI animation feels off because the durations and easing curves are guessed, not designed. Here's the ratio system we use to make motion feel intentional across web and mobile.
A practical pipeline for syncing Figma variables to Tailwind v4 tokens, with the trade-offs we hit on real projects and the bits we'd skip next time.
