A design glossary that explains why a term matters.

Terms designers reach for

Visual hierarchy

The ordering of size, weight, colour and position so a reader's eye lands on the right element first and moves through the rest in a sequence that makes sense. On a landing page with a headline, a subhead and three buttons, hierarchy is what stops all three buttons competing for the same click.

Typographic scale

A fixed set of type sizes used across a project, usually built on a ratio, so headings and body copy relate to each other predictably. A scale keeps an H3 a consistent step below an H2 across every page, so a writer adding a new heading doesn't have to guess a size that looks right.

Leading

The vertical space between lines of type, named after the strips of lead once inserted between lines in metal typesetting. Tight leading on a dense paragraph of body copy makes lines feel like they're competing with each other; opening it up usually fixes the reading rhythm without touching the type size.

Kerning

The adjustment of space between two specific letters, done because some letter pairs sit awkwardly close or far apart at certain sizes even when the font's default spacing is fine everywhere else. A logotype set in a display size often needs the gap between an A and a V pulled in by hand, since the font's built-in spacing was tuned for body text.

Tracking

A uniform adjustment to the spacing across a whole run of letters, applied evenly. Widening the tracking on a small caps label gives it room to breathe at a tiny size, where letters set at normal spacing would start to blur together.

Baseline grid

An underlying grid of horizontal lines that text sits on, used to keep the vertical rhythm of a layout consistent across columns and sections. Two columns of text with different heading sizes can still line up row for row if both are locked to the same baseline grid, so the page reads as one system.

Grid system

A structure of columns, gutters and margins that a layout is built on, so elements align to a shared logic. A twelve-column grid lets a hero image span the full width while a caption sits neatly within four of those columns, without the two needing separate rulers.

Whitespace

The deliberately empty space around and between elements, used to separate ideas, give type room to be read, and signal which things belong together. Cramming a pricing table's rows closer together to fit more on screen usually makes it harder to compare plans, because the space that separated them was doing real work.

Contrast ratio

A measured comparison between two colours, usually text against its background, that predicts how readable that pairing is for people with low vision or in poor lighting. Grey text on a white card can look fine on a calibrated studio monitor and still fail a readability check on an older phone screen in daylight.

Colour palette

The defined set of colours a project draws from, usually a small number of core brand colours plus supporting neutrals and functional colours for states like error or success. A palette limited to five colours keeps a product feeling coherent even as new screens get added by different people over time.

Design system

A shared set of components, patterns, tokens and rules that a team designs and builds from, so decisions about spacing, colour and interaction are made once. A new feature team can ship a settings page in days if the buttons, form fields and spacing already exist as agreed pieces elsewhere in the system.

Component library

The catalogue of reusable interface pieces, buttons, cards, form fields and the rest, that a design system is built from, kept in one place so the same button doesn't get reinvented on every screen. A component library's local override sometimes loses to the design system's base style for no reason the designer can spot on the screen. The CSS Specificity Calculator breaks two selectors down side by side and shows which one the cascade actually favours, though it only scores what's pasted in, not what a browser does with inherited or later-loaded rules.

Wireframe

A low-fidelity layout showing structure, content and rough positioning without visual styling, used to agree what goes where before anyone spends time on colour or type. A wireframe for a checkout flow settles the order of fields and buttons before a single colour is chosen, which saves an argument about spacing turning into an argument about layout.

Prototype

An interactive model of a design, ranging from a few linked screens to something close to the finished build, used to test how a flow actually feels. A prototype of a sign-up form can surface that a required field is easy to miss, something a flat mockup would never reveal because nobody actually tries to submit it.

Affordance

A visual cue that suggests how an element can be used, a shadow suggesting a button can be pressed, an underline suggesting text can be clicked. Flattening every button to look identical to plain text removes the affordance that told people it was clickable in the first place, and click-through often drops as a result.

Information architecture

The structure and labelling of content across a product or site, deciding what's grouped with what and how someone finds their way from one thing to another. A confusing navigation menu is usually a symptom of an information architecture problem, and restyling the menu won't fix it.

Meta description

The short block of text attached to a page for search engines to draw on when they show it in results, written to earn the click. A description that runs a few characters too long gets cut off mid-sentence once it reaches results, and checking the wording against something like the SERP Snippet Previewer beforehand shows exactly where that cut lands before the page ever goes live.

Responsive breakpoint

A defined screen width at which a layout changes to suit a different device, so a three-column grid can collapse to one column once the screen gets too narrow to hold it. A card grid that looks considered on a laptop can overlap badly on a tablet if the breakpoints were only ever checked against a phone and a desktop.

Design token

A named, reusable value, a colour, a spacing unit, a corner radius, stored once and referenced everywhere it's used, so changing the value in one place updates it across the whole product. Renaming a token's underlying colour from a specific blue to a slightly warmer one updates every button and link built from it.

Accessibility and WCAG

Accessibility is designing so people with visual, motor, cognitive or hearing differences can use a product; the Web Content Accessibility Guidelines (WCAG) are the published standard most teams check their work against, set out in levels from A to AAA. A form that only shows an error in red text fails a basic accessibility check, because colour alone doesn't communicate the problem to someone who can't distinguish red from the surrounding text. Keyboard focus is its own recurring trip-up: removing the browser's default outline without replacing it strips sighted keyboard users of any way to see where they are on the page. The Focus Ring Architect builds a replacement ring that survives Windows High Contrast Mode and lets you preview it on a light and a dark surface before it goes anywhere near production, though it can only show you what you've configured, not what your actual page background will do to it.

Alt text

A written description attached to an image so someone using a screen reader, or with images turned off, still knows what the image shows or what it's for. Alt text on a purely decorative background pattern should usually be left empty, so a screen reader skips past it.