Play with the patterns

Top bar — best for a handful of top-level destinations on desktop/web. Always visible, low interaction cost.

Focus moves into the dialog, is trapped while open, returns to the trigger on close, and Esc dismisses it.

Confirmations are non-blocking and auto-dismiss; destructive actions pair with an undo window instead of a confirm dialog — recovery over prevention.

Modern practice: persistent top-aligned labels, validation on blur (not every keystroke), and specific, recoverable error messages tied to the field with aria-describedby.

Sortable headers expose aria-sort, right-align numeric columns, and use a subtle row hover for scannability.

Pagination — best when users need to find a known item, jump around, or remember a position. Keeps the page bounded and footers reachable.

Good autocomplete filters as you type, highlights the match, supports full keyboard control, and degrades gracefully when there are no results.

Filters apply instantly, show their active state, expose a count, and offer a one-click reset — and an empty result still explains what happened.

Strong onboarding is short, shows progress, asks only for what’s needed, and ends at a first win — not a feature tour.

Each microinteraction has a clear trigger, immediate visual feedback, and a calm resting state — the smallest unit of good interaction design.

Ease-out — fast start, gentle stop. The default for UI: elements entering or responding to input.

Respect the OS prefers-reduced-motion setting: replace large or looping motion with a minimal fade. Never remove feedback entirely — just the intensity.

Size, weight, color, and spacing guide the eye: eyebrow → headline → body → action. You know where to look first.

Proximity: elements placed close together are perceived as a group — spacing alone creates structure.

Higher elevation = larger, softer shadows and more separation from the background. In dark mode, prefer raising surface lightness over shadows, which are nearly invisible on dark backgrounds.

Every gap, padding, and size is a multiple of 8px (8, 16, 24, 32…). A single spacing unit makes layouts feel consistent and removes arbitrary, eyeballed values.

Every size is the base (16px) multiplied by the ratio raised to a step. One ratio yields a consistent, musical hierarchy instead of arbitrary sizes.

A column grid gives every element a shared place to start and stop. Components span a number of columns, so layouts stay aligned even as content changes. 12 columns is the web default because it divides cleanly into halves, thirds, and quarters.

Serif display over a clean sans — editorial, warm, and trustworthy. A safe, timeless pairing.

In light mode, elevation comes from progressively larger, softer drop shadows on white surfaces.

The time to choose grows logarithmically with the number of options (T = b·log₂(n+1)). Group, prioritize, or progressively disclose choices instead of exposing them all at once.

WCAG 2.2 requires 4.5:1 for normal text and 3:1 for large text (≥24px, or ≥19px bold). Don’t rely on low-contrast “light gray on white” for body copy.

Small targets cause mis-taps, especially for motor impairments and one-handed use. WCAG 2.2 sets a 24×24px floor (2.5.8); 44×44px is the comfortable target on touch.

Deuteranopia (green-blind, the most common CVD): red and green are nearly indistinguishable. This is why color alone fails. The takeaway: never encode meaning with color alone — pair it with an icon, label, or pattern (WCAG 1.4.1).

Write 3 options for an empty-state headline plus a one-line subtext.

A good prompt reads like a creative brief. Watch the specificity climb as you add a role, context, constraints, examples, and an explicit output format — a bare task alone leaves the model guessing.