If you can’t name what you’re seeing, you can’t direct it, collaborate on it, or critique it. Wording collects the words that make design discussable. Built by Rene Wang.

Works with

Motion

How interfaces move and settle.

Choreography

The deliberate timing and order of several elements moving at once, arranged so a transition reads as one coordinated gesture rather than parts firing at random. (illustrated)

Crossfade

A transition in which one element fades out while its replacement fades in, overlapping in time so the change reads as a swap rather than a removal and an arrival. (illustrated)

Damping

The force that drains energy from a spring animation, controlling how quickly oscillation dies down and the element comes to rest. (illustrated)

Duration

The length of time an animation takes from start to finish, typically measured in milliseconds. (illustrated)

Easing

A curve that controls how an animation accelerates and decelerates over time, rather than moving at a constant rate. (illustrated)

Morph

A transition in which an element’s geometry transforms continuously into a new form, so the before and after read as the same object. (illustrated)

Overshoot

The behavior of an animated element traveling slightly past its destination before settling back into place. (illustrated)

Spring

A physics-based animation model where an element overshoots its target and oscillates before settling, simulating the behavior of a physical spring. (illustrated)

Stagger

A small, uniform delay between the start times of identical animations across a group, so elements arrive in sequence rather than as one block. (illustrated)

Layout

How space is divided and arranged.

Bento

A layout of rounded, self-contained compartments packed into one tight grid, each cell stating a single feature or fact at its own scale. (illustrated)

Density

The amount of information presented per unit of screen space, set by type size, spacing, and how many elements share the view at once. (illustrated)

Grid

An underlying system of columns, gutters, and margins that elements align to, turning individual layout decisions into a repeatable structure. (illustrated)

Hierarchy

The visual ranking of elements by importance, expressed through size, weight, color, and position, so the eye knows what to read first. (illustrated)

Masonry

A layout where items are arranged in columns of equal width but variable height, each item stacking directly below the shortest column, like brickwork. (illustrated)

Shelf

A horizontally scrolling row of items inside a vertically scrolling page, presenting one category per row: the pattern popularized by streaming apps. (illustrated)

Stack

A layout primitive that arranges children along a single axis (vertical or horizontal) with consistent spacing between them. (illustrated)

Whitespace

The deliberately empty space between and around elements, used to group related things, separate unrelated ones, and give content room to be read. (illustrated)

Typography

How text is set, spaced, and read.

Kerning

The adjustment of space between a specific pair of letters to correct optical unevenness. Distinct from tracking, which spaces all letters uniformly. (illustrated)

Leading

The vertical distance between lines of text, measured baseline to baseline: line-height, in CSS terms. (illustrated)

Modular scale

A sequence of type sizes produced by multiplying a base size by a fixed ratio, so every size on the page is mathematically related to every other. (illustrated)

Optical alignment

Aligning elements by how they look rather than where their bounding boxes sit: letting round glyphs, punctuation, and icons overshoot the edge so the result reads straight. (illustrated)

Optical size

The adaptation of letterforms to the size they’ll be read at: sturdier shapes and looser spacing at small sizes, finer detail and tighter spacing at display sizes. (illustrated)

Tracking

The uniform spacing applied across a run of letters, opening or closing the overall texture of a word or line: letter-spacing, in CSS terms. (illustrated)

Weight contrast

Hierarchy created by pairing clearly different font weights, often at the same size, instead of changing the type size. (illustrated)

Widow

A single word or very short line left alone at the end of a paragraph, visually disconnected from the rest of the text block. (illustrated)

Color

How color is measured and named.

Blend method

The rule for how a layer combines with the one beneath it instead of just covering it: multiply darkens, screen lightens, overlay raises contrast. (illustrated)

Contrast

The difference in luminance between two colors, usually text against its background. Measured as a ratio from 1:1 (identical) to 21:1 (black on white). (illustrated)

Hue

The attribute that places a color on the spectrum, independent of how light or saturated it is: red, orange, yellow, green, blue, violet. (illustrated)

Saturation

How far a color sits from neutral gray at the same lightness: its intensity, from fully muted to the most vivid version a display can show. (illustrated)

Value

How light or dark a color is, independent of hue and saturation: the axis that remains when an image is reduced to grayscale. (illustrated)

3D

How depth is faked on a flat screen.

Elevation

A surface’s implied height above the page, communicated by its shadow: the higher the surface, the larger, softer, and farther the shadow falls. (illustrated)

Isometric

A projection that draws three-dimensional objects without a vanishing point: the three axes equally foreshortened, parallel edges kept parallel, so nothing shrinks with distance. (illustrated)

Parallax

The depth cue in which nearer things move faster across the view than farther ones: in interfaces, layers scrolling at different rates to imply space behind the screen. (illustrated)

Aesthetics

How a design feels.

Brutal

An aesthetic that exposes raw structure and refuses conventional polish on principle: system fonts, hard edges, unstyled controls, stark contrast. (illustrated)

Clinical

An aesthetic of deliberate neutrality: desaturated color, exact spacing, unadorned components, and copy stripped of personality. (illustrated)

Considered

The quality of design in which every detail shows evidence of a deliberate decision: nothing default, nothing accidental, nothing left over. (illustrated)

Minimal

An aesthetic built on reduction: every element that isn’t structurally necessary is removed, and the few that remain carry the whole design. (illustrated)

Quiet

A visual tone that reduces contrast, motion, and visual competition to create a calm, unobtrusive interface: one that doesn’t demand attention. (illustrated)

Restrained

A quality of design that uses far less expression than it could: color, motion, and emphasis held in reserve rather than spent. (illustrated)

Warm

An aesthetic that reads as human rather than institutional: palettes shifted toward cream and amber, softened corners and shadows, and copy that sounds like a person. (illustrated)

Style

The movements that came with manifestos.

Art Deco

The interwar style of geometric luxury: stepped forms, sunburst fans, strict symmetry, metallic contrast. Machine-age optimism dressed for the evening. (illustrated)

Bauhaus

The 1919–1933 German school that fused craft and industry into one doctrine: form follows function, ornament must justify itself, and good design is mass-producible. (illustrated)

Memphis

The 1980s Milan group that weaponized bad taste against good-taste modernism: clashing primaries, squiggles, terrazzo speckle, toy geometry. (illustrated)

Skeuomorphism

Rendering digital things as their physical ancestors (stitched leather, glossy buttons, page curls) so that borrowed material logic explains unfamiliar behavior. (illustrated)

Swiss Style

The International Typographic Style of 1950s Switzerland: mathematical grids, asymmetric composition, sans-serif type, and photography over illustration. Design as objective information. (illustrated)

UI Language

How interfaces behave and respond.

Affordance

The perceivable property of an element that indicates how it can be used: the shading that says “press me,” the handle that says “drag me.” (illustrated)

Affordance gap

The mismatch between what an interface can do and what it visibly offers: functionality that exists but is signaled nowhere. (illustrated)

Destructive action

An action that deletes data or undoes work in a way that can’t be trivially reversed: delete, overwrite, revoke, leave-without-saving. (illustrated)

Empty state

What a screen shows when there is no data to display yet: the first-run view of a list, inbox, or dashboard before the user has done anything. (illustrated)

Optimistic UI

An interface that shows the result of an action immediately, assuming the server will succeed, and reconciles quietly when it doesn’t. (illustrated)

Progressive disclosure

The technique of presenting only essential options up front and revealing advanced ones in steps, as the user signals they need them. (illustrated)

Skeleton

A placeholder version of a screen that renders the layout’s shapes (bars for text, blocks for images) while the real content loads. (illustrated)

Accessibility

How an interface includes everyone.

Focus ring

The visible outline drawn around the element that currently holds keyboard focus, marking where the next key press will land. (illustrated)

Reduced motion

A system setting, surfaced to the web as the `prefers-reduced-motion` media query, by which a person asks software to cut animation that could unsettle them. (illustrated)

Touch target

The area a finger must land on to fire a control, kept large even when the icon inside it is small. WCAG asks for at least 24px; platform guidance prefers 44 to 48px. (illustrated)

Components

The named parts an interface is built from.

Modal

An overlay that suspends the rest of the interface until it is dealt with, trapping focus inside itself and dimming the page behind it. (illustrated)

Toast

A small, transient message that slides in at the edge of the screen to confirm an action, then dismisses itself without taking focus or blocking the view. (illustrated)

Tooltip

A small label that appears on hover or focus to name or explain the element under the pointer, taking no permanent room in the layout. (illustrated)

Misc

What fits nowhere else.

Fidelity

How closely a mock approximates the finished product, from boxes-and-arrows wireframes at the low end to pixel-accurate, fully populated screens at the high end. (illustrated)

Greeking

Standing in for real text with placeholder content, nonsense words or gray bars, so a layout can be judged before the copy exists. (illustrated)

Shader

A small program the GPU runs for every pixel on every frame, computing color directly instead of compositing images; how a screen gets gradients that drift, glass that refracts, and grain that never tiles. (illustrated)