A design glossary that explains why a term matters.

A design glossary is only useful when it explains why a term exists. This one sets out the problem each term solves and the moment in a project when a designer reaches for it, so an entry reads less like a dictionary definition and more like a note from someone who has hit the same wall. Take visual hierarchy: it isn't a stand-in for "make the important thing bigger". It's the ordering of size, weight, colour and position so that a reader's eye lands on the right element first and moves through the rest in a sequence that makes sense.

How the entries are written

Every definition opens with a situation rather than a formula, because a term like typographic scale means little until you've watched one collapse under real content: a heading that wraps awkwardly, a body size that reads fine on a 15-inch screen and cramped on a phone. That gap between a spec written in one unit and a screen measured in another is exactly where the CSS Unit Converter (px / rem / em / vw / vh) earns a mention. If an entry talks about px, rem, em, vw or vh and you want to see how a given base font size behaves against a particular viewport, the CSS Unit Converter (px / rem / em / vw / vh) will convert between them, which is a smaller job than the glossary itself but a daily one for anyone turning a typographic scale into working CSS. The entry then names the underlying idea, so the reader can carry it into the next brief. Where a term has a common misuse attached to it, that misuse gets named too, because knowing what a word doesn't mean is often the faster route to using it correctly.

What's covered

The glossary spans the vocabulary a working designer picks up across a career, so entries range across:

• layout and grid systems
• typography and typographic scale
• colour theory and contrast
• user experience (UX) and interaction design
• brand identity
• accessibility (a11y)

Some terms sit comfortably in more than one of these categories, and the entries say so.

Where the definitions lead

A term like contrast is easier to feel than to read about, so some entries point to the True-Contrast Smart Palette, a tool for checking colour pairings against the WCAG accessibility thresholds (AA at 4.5:1, AAA at 7:1), alongside its accompanying guide. Enter a foreground and background colour and it returns a ratio to two decimal places with a pass or fail badge at each level, plus a preview card showing what body text actually looks like in that pairing. When a pairing fails, it offers two suggested fixes, one for AA and one for AAA, and each is built by holding the original colour's hue and saturation fixed and adjusting only its lightness until the ratio clears the target against the background given. That matters because a naive fix can nudge a brand blue toward something that reads as teal; this one keeps the hue and simply makes it lighter or darker, and where no lightness of that hue can reach the target on that background, it says so plainly and falls back to plain black or white instead. The tool gives a reading based on the values entered, and like any calculation it can be wrong if the inputs are, so it's worth treating the result as a starting point rather than a verdict. The entry for design tokens works the same way: it points to the CSS Variable Architect, which turns a handful of base values, four colours, a spacing unit and a corner radius, into a ready-to-paste block of CSS custom properties, with a live preview card so you can see the palette.

An entry on aspect ratio follows the same pattern, because a ratio between width and height is one of those terms that gets used loosely until a video frame, an image crop or a responsive screen forces the point. The Aspect Ratio Calculator splits the job in two: enter a width and a height and it reduces them to the simplest form, so 1920 by 1080 comes back as 16:9 along with the decimal ratio, or pick a target ratio, using one of the 16:9, 4:3, 1:1 or 21:9 presets or typing your own, enter one dimension and it works out the other, rounded to a whole pixel. It updates as you type, which makes it a quick way to check whether a crop or a breakpoint actually holds the proportions it's meant to, though like any calculator it only does the arithmetic on the numbers it's given, so a mistyped width will hand back a confidently wrong height. Other entries connect back to the writing on Criticism & Commentary, where the terms defined here get argued over in the context of real work.