The Glossary of Visual Design for Product and UI

Typography (Is the Whole Game)

Type Scale — A predefined, ratio-based set of font sizes (e.g. 12/14/16/20/24/32) used across an interface so text sizes feel related rather than arbitrary.

Leading (Line Height) — The vertical space between lines of text, usually set as a multiple of font size (1.4–1.6x for body copy); too tight hurts readability, too loose breaks the paragraph apart.

Tracking — Uniform spacing adjustment applied across a run of text, commonly tightened for large display type and opened up for all-caps labels.

Kerning — Spacing adjustment between a specific pair of letters (like "AV" or "To") to correct for irregular visual gaps that uniform tracking can't fix.

x-Height — The height of lowercase letters like "x", excluding ascenders/descenders; typefaces with a tall x-height tend to read more legibly at small sizes.

Optical Sizing — Font styles/weights specifically drawn for a size range (e.g. a "display" cut vs a "text" cut of the same family) rather than one master scaled up or down.

Widows & Orphans — A widow is a short line left alone at the top of a new column/page; an orphan is a lone word left on its own line at the end of a paragraph — both considered typographic defects.

Font Pairing — Combining two typefaces (typically a display face and a text face) that contrast enough to read as intentional rather than accidental.

Variable Fonts — A single font file that can interpolate across weight, width, and other axes at runtime, replacing dozens of separate static font files.

Spacing & Rhythm

8-pt Grid — A spacing system where every margin, padding, and gap is a multiple of 8px (or 4px for finer adjustments), keeping layouts visually consistent without ad-hoc values.

Baseline Grid — An invisible horizontal grid, spaced to match line-height, that text and UI elements snap to so multiple columns of content line up.

Whitespace (Negative Space) — The empty space around and between elements; it isn't "unused" space — it's what separates groups and signals relationships.

Proximity — The Gestalt principle that elements placed closer together are perceived as related; used to group fields, labels, and actions without needing borders.

Gutter — The fixed space between columns in a grid layout, distinct from the margin at the outer edge of the layout.

Rhythm — The sense of a repeating, predictable spacing pattern down a page (consistent vertical gaps between sections) that makes a layout feel composed rather than improvised.

Padding vs. Margin — Padding is space inside a component's boundary (between its edge and its content); margin is space outside it (between the component and its neighbors).

Modular Scale — Applying the same ratio used for type sizes to spacing values too, so text and layout grow together proportionally.

Density & Hierarchy (on Data Pages)

Information Density — How much content is packed into a given area; dashboards and admin tools often need higher density than marketing pages, at the cost of visual breathing room.

Visual Hierarchy — The deliberate ordering of size, weight, color, and position so the eye lands on the most important element first, then the next, and so on.

Progressive Disclosure — Showing only essential information up front and revealing detail (via expand, drill-down, or hover) only when the user asks for it — a core density-reduction technique.

Table Density Modes (Compact / Comfortable / Spacious) — User-toggleable row-height presets on data tables, trading rows-per-screen against readability and tap-target size.

Scannability — How quickly a user can locate a specific piece of information without reading linearly — driven by consistent alignment, clear labels, and hierarchy.

Chunking — Breaking a large block of data or a long form into smaller, labeled groups so the brain processes it as a few chunks instead of many individual items.

F-Pattern / Z-Pattern — Observed eye-tracking patterns for how people scan text-heavy pages (F) versus sparser, image-led pages (Z); used to place key actions where eyes naturally travel.

Above the Fold — The portion of a page visible without scrolling; still a useful heuristic for prioritizing content even though "the fold" varies wildly across devices.

Imagery

Hero Image — The large, lead visual at the top of a page that sets tone and context before any supporting content.

Iconography — A consistent system of icons (stroke width, corner radius, grid size) used in place of or alongside text labels for common actions and objects.

Illustration vs. Photography — A stylistic choice between custom-drawn imagery (more brandable, more control) and photography (more literal, often faster to source) — mixing both inconsistently is a common tell of an unpolished system.

Art Direction — The deliberate choice of subject, framing, lighting, and mood across a product's imagery so it reads as one coherent visual voice rather than stock photography.

Aspect Ratio — The width-to-height ratio an image is cropped to (1:1, 4:3, 16:9); locking this per component prevents layout shift as real images load in.

Empty State Illustration — A visual (not just text) shown when a list, inbox, or dashboard has no content yet, used to explain what belongs there and prompt a first action.

Image Compression (WebP / AVIF) — Modern image formats that produce smaller file sizes than JPEG/PNG at comparable quality, reducing page weight.

Alt Text — A text alternative attached to an image for screen readers and failed loads; also a signal search engines use to understand image content.

Color (Beyond the Primitives)

Semantic Color — Colors named by purpose (success, warning, danger, info) rather than by hue, so the same token can be re-themed without touching component code.

Tints, Shades & Tones — A tint mixes a base color with white (lighter), a shade mixes it with black (darker), and a tone mixes it with gray (muted) — the building blocks of a full color ramp.

Color Ramp / Scale — A full range of a single hue from very light to very dark (e.g. blue-50 through blue-900), used for backgrounds, borders, text, and states without introducing new colors.

Accessible Contrast Ratio (WCAG) — The minimum luminance difference required between text and its background (4.5:1 for normal text under WCAG AA) to remain legible for low-vision users.

Neutral Palette — The grays (often slightly warm or cool-tinted, rarely pure gray) used for text, borders, and backgrounds — doing most of an interface's visual work despite being "boring."

Accent Color — A single color reserved for primary actions and key highlights, kept rare deliberately so it retains visual weight.

Dark Mode Tokens — A parallel color scale mapped to the same semantic roles (background, text, border) but inverted in lightness, ideally authored as tokens rather than a CSS filter.

Color Blindness–Safe Palette — A palette checked against common color-vision deficiencies (deuteranopia, protanopia) so meaning isn't conveyed by hue alone — pairing color with icons or labels as backup.

*written with Claude Sonnet 5