Discover the design.
Understand the details.

A text field paired with a list of suggestions. People type to narrow a set, then commit a value with pointer or keyboard. Typed text, the active suggestion and the committed selection are separate states. Provide a clear empty result and a way to clear the field when nothing matches.

A form region for selecting files, checking constraints and managing a pending list. It may use a native picker or a drop zone, but drag-and-drop must have a picker alternative. Selection is not upload completion: distinguish pending, processing, success and failure, and explain accepted types and size limits.

An input for a bounded subjective score, often represented by stars or labeled satisfaction levels. Hover previews a value; pointer or keyboard selection commits it. Give each level a text meaning, distinguish no rating from the lowest score, and label read-only averages and their sample counts clearly.

A compact group of mutually exclusive choices with an immediately visible selection. Use it to change a time range or display mode within the same view. Keep labels short and all choices visible. Unlike tabs, it usually changes how the current content is presented rather than moving between separate panels.

An ordered progress indicator that explains the stages of a task, the current step and completed work. Pair it with a multi-step form to make a long task easier to understand. Validate before advancing, preserve values when going back, and keep progress indication distinct from the controls that move the flow forward.

A display that orders events by time, using timestamps, markers and content to explain sequence. It works for activity logs, project journals or order history. Unlike a stepper, which emphasizes task stages to complete, a timeline tells an event story. Keep titles and times visible when details expand.

A layout language that packs the interface like a bento box: rounded tiles of varying spans snap to one grid with narrow gutters — big cells carry the hero content, small cells hold stats and garnish. A card-grid upgrade where area itself encodes priority.

A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.

A loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.

A floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.

Grey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.

Elements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.