A dictionary of design language.

The crossfade is the default transition for unrelated content — and a cop-out for related content. If the next state is spatially or structurally connected to the last one, a morph or a directional move explains the change; a crossfade just admits you didn’t model it.

Damping is the taste parameter of spring motion. Low damping is bouncy and toy-like; critical damping settles with no oscillation at all and reads as calm confidence. Most product UI wants to live just below critical — one subtle overshoot, then rest.

Duration should scale with distance and size: small elements moving short distances want 100–200ms, full-screen transitions can hold 300–400ms. Past half a second, motion stops feeling responsive and starts feeling like waiting. When in doubt, shorter.

Linear motion looks mechanical. Almost every UI animation benefits from easing. The most common mistake is applying ease-in where ease-out is needed — elements should decelerate as they arrive, not accelerate.

Morphing earns its complexity when object permanence matters — the user should believe the card became the detail view. If the two states share no real structure, a morph invents continuity that doesn’t exist; use a crossfade and let the change be a change.

Overshoot implies mass. A trace of it makes an element feel like it moved under its own momentum; too much turns the interface into a cartoon. Reserve visible overshoot for playful or weighty elements — it’s the signature of a spring, and damping is how you keep it honest.

Springs feel alive in a way that cubic-bezier curves don’t. But overdone springs read as playful or unstable. Tune stiffness and damping to match the weight of the element.

Density is a contract with the user, not a failure of design. Power tools — terminals, spreadsheets, consoles — should be dense; onboarding should not. The mistake is uniformity: consumer airiness applied to expert tools, or expert density on a first-run screen. Density and whitespace are the same dial read from opposite ends.

A grid is most visible when it’s broken — which is also its main expressive tool. Establish it strictly, then break it deliberately for emphasis. Layouts that almost align read as sloppier than layouts that never tried.

Hierarchy is subtractive: it exists only if most things are visually quiet. If everything is bold, nothing is. The fastest hierarchy fix is rarely making the important thing bigger — it’s making everything else smaller.

Masonry works well for content with unpredictable aspect ratios. It breaks down for content that needs to be scanned in order — use a grid instead.

Shelves trade visibility for breadth: every category is present, but most items hide off-screen. They work when categories matter more than items. If users come looking for one specific thing, horizontal scrolling is friction — give them a grid and a filter.

Stacks replace margin arithmetic with one spacing decision, which is why every modern design system is built on them. The discipline is keeping spacing on the container (gap), never on the children — the moment items carry their own margins, the system leaks.

Whitespace is structure, not absence. Proximity is the strongest grouping signal there is — stronger than borders or background colors — and whitespace is how you control it. Cramped layouts usually don’t need more decoration; they need fewer boxes and more space.

Kerning is a per-pair correction; tracking is a global setting — confusing the two is the most common typographic vocabulary mistake. In practice you only hand-kern at display sizes: body text relies on the font’s built-in kern tables, and font-kerning is on by default in every browser.

Pronounced “ledding,” after the strips of lead once placed between lines of metal type. Body text wants roughly 1.4–1.6× the type size; headlines want much less — large sizes accumulate vertical space, and loose leading makes a two-line headline fall apart into two separate thoughts.

Metal type had optical size by necessity — every size was cut separately — and digital type lost it by default. Variable fonts brought it back through the opsz axis. If your typeface has one, leave it on; captions set with display proportions are why small text sometimes looks spindly.

Two rules cover most cases: track caps and small caps open, because capitals were never designed to sit side by side; track large headlines slightly negative, because display sizes accumulate visual space. Tracking lowercase body text in either direction mostly damages the rhythm the typeface was designed with. Not to be confused with kerning, which adjusts individual pairs.

Weight contrast is the quietest hierarchy tool: it ranks information without disturbing the layout the way size changes do. The trap is adjacent weights — regular against medium reads as a rendering error, not a decision. Skip at least one weight; contrast must be unmistakable to count as contrast.

Widows make copy feel unfinished. The fix is almost never CSS — rewrite the sentence until the line breaks fall where you want them. text-wrap: balance helps at the margins.

Contrast is the only word in this category with a pass/fail grade: WCAG asks 4.5:1 for body text and 3:1 for large type, and no amount of taste overrules it. The fashionable failure is the whisper-gray caption on a white card — elegant in a Dribbble shot, gone on a sunlit train. Luminance isn’t the only lever either; size and weight contrast can rescue a pair of colors that the ratio alone would condemn.

Hue is what civilians mean by “color,” so using it precisely is the cheapest upgrade in design crit: “shift the hue toward green” names one dial, “make it more minty” spins three at once. Mind the tooling, though — HSL’s hue wheel is perceptually lumpy, so equal hue steps don’t look equal (OKLCH’s do). A palette survives almost any adjustment to saturation and lightness; move a hue and you’ve touched the brand.

Saturation is the loudness knob, and an interface is conversation, not concert: text, surfaces, and borders live near gray so the single saturated action can carry the hierarchy. Two cautions. Desaturated is not the same as quiet — a pale screen can still be cluttered. And on today’s wide-gamut displays, “fully saturated” is louder than it was on the sRGB monitor where your taste was calibrated.

Elevation turns shadow into hierarchy along the z-axis: what floats above what, which layer owns the moment. Material Design’s real contribution was rationing it — fixed levels instead of a free shadow slider, one imagined light source for the whole interface. Two things break the illusion: decorative shadows under things that sit above nothing, and dark mode, where shadow has nothing darker to fall on and height must be restated as a lighter surface.

Isometric is depth for systems people: no horizon, no foreshortening to argue about, every tile composable on the same grid. That modularity is why strategy games built cities with it, and why every SaaS landing page eventually grew the same floating cutaway cubes. Reach for it when the content is genuinely spatial — architecture, hardware, a pipeline. As pure decoration it now reads as “we bought an illustration pack.”

Parallax is the one depth cue you can feel through a scroll wheel, which is why marketing pages can’t leave it alone. At whisper volume — a background drifting slightly slower than the content — it reads as physical space. Bound tightly to scroll and turned up, it becomes scrolljacking, the genre where the page fights your thumb. True to this site’s own rule, this entry does not demonstrate it.

Brutalism is a position, not an absence of skill — the difference between a brutal site and a broken one is total intentionality. It works for brands whose audience is in on the statement. As a default for product UI, it mostly punishes users for the designer’s taste.

Clinical earns trust where personality would read as bias — medical, legal, and financial tools. Anywhere else it reads as neglect: if users are meant to feel welcomed rather than processed, you want warm, not clinical.

Considered is the compliment designers actually want: it means the details survive scrutiny. The tell is the edges — error states, focus rings, truncation, the empty state. Anyone can design the happy path; consideration shows up where nobody was required to look.

Minimal is about quantity, not volume — the count of elements, not their intensity. That’s the distinction from quiet. Minimalism’s failure mode is removing affordances along with decoration: when the chrome goes, what remains has to work harder, not vanish too.

Quiet is not the same as minimal. Minimal is about quantity — fewer elements. Quiet is about volume — lower intensity. You can have a complex interface that is still quiet. Notion is quiet. Linear is minimal.

Restraint is only legible when capability is evident — a plain page by a limited designer is just plain; the same page by a capable one is restrained. The practical method: build the louder version, then pull it back until removing anything more would cost clarity. What survives is the design.

Warmth lives mostly in color temperature and copy tone — rounded corners are the least of it. The failure mode is performative friendliness: exclamation marks, mascots, confetti. A warm interface is a calm host, not an entertainer.

Strictly, an affordance is the action possibility itself; the visible hint is a signifier — a distinction Don Norman spent a career defending and designers ignore daily. The working rule survives the pedantry: every interaction needs a perceivable invitation. Remove it and you’ve created an affordance gap.

Affordance gaps are where features go to be undiscovered: swipe actions, right-click menus, keyboard shortcuts, double-tap gestures. Power users find them; everyone else lives without them. Either signal the interaction, teach it once, or accept that you shipped it for the demo.

The red label is convention, but placement matters more: never put a destructive action where muscle memory expects a safe one. And the strongest protection isn’t a confirmation — confirmations train users to click through. Undo forgives them after the fact, which is the only moment they’re paying attention.

Empty states are the most-seen screens of a product’s most important week, and the last screens anyone designs. The bar isn’t a charming illustration — it’s an answer to “what should I do first?” One action, not three.

Progressive disclosure is how complex tools stay approachable without lying about their depth. It fails in both directions: bury daily-use controls and you’ve added a click to everyone’s day; disclose nothing and the first screen is a cockpit. The craft is knowing which fifth of the options serves four-fifths of the sessions.

Fidelity is a dial for the feedback you want, because people critique at the level you finish: show polished pixels in week one and the meeting is about the blue; show wireframes in week ten and the meeting is about your effort. The craft is mismatching on purpose — rough where you still want argument, considered where you want sign-off.

The name comes from “it’s all Greek to me,” and the most famous greeking text is Latin — the practice has always outrun its etymology. Greeking is honest early, when it keeps a review pointed at structure instead of word choice, and dishonest late: lorem ipsum never produces a widow, never overflows a button, never arrives in German. A layout isn’t finished until real content has tried to break it.

Inspect panels were supposed to kill the redline — every value one click away — but they report without judging. A measuring tool says 17px; a redline says “16, on the grid, and the 17 in the mock is a mistake.” Redlining is the moment a designer declares which numbers are intentional, which ones scale, and which were never decided at all. That judgment is the spec; the pixels are just where it’s written down.