Design Vocabulary Glossary

A cheat sheet for talking about web and editorial design with precision. Each entry: a 1–2 sentence definition + canonical examples (with URLs where they exist). Cross-linked to the typography guide and mood board.

The goal is to replace gestural descriptions (“I like that one, it’s clean”) with category labels (“that’s neo-grotesque sans on a 12-column grid with warm-neutral palette and a single accent — restraint as positioning”).

Type

Humanist sans

Sans-serif typefaces whose proportions derive from old-style serifs — variable stroke width, open apertures, slightly calligraphic. Reads warmer and more readable at length than geometric sans. Examples: Inter (rsms.me/inter), Source Sans 3, IBM Plex Sans, Lato. See Anthropic.

Geometric sans

Sans-serif constructed from pure geometric shapes (circle, line). Bauhaus heritage. Modern, deliberate, slightly cold; great for headlines, fatiguing for body text. Examples: Futura, Avenir, Mona Sans, Poppins. See Vercel, Mona Sans.

Neo-grotesque sans

The Swiss mid-century tradition (Helvetica is the archetype). Neutral-by-design, authoritative, corporate-clean. Tighter apertures than humanist. Examples: Helvetica Neue, Söhne (klim.co.nz), Neue Haas Grotesk, Roboto. See Stripe, OpenAI.

Transitional serif

Serif typefaces in the Baskerville / Times tradition — moderate stroke contrast, bracketed serifs, optimized for sustained reading. The default editorial serif. Examples: Source Serif 4, IBM Plex Serif, Charter, Times New Roman. See The Atlantic, NYT.

Slab serif

Serif typefaces with thick, blocky, often unbracketed serifs. Confident and industrial; used for headlines and pull quotes, not body. Examples: Roboto Slab, Tiempos Headline (klim.co.nz), PT Serif Display. See Bloomberg.

Monospace

Every glyph occupies the same horizontal width. Originally for typewriters and code; signals “technical” or “honest” in modern design. Examples: IBM Plex Mono, JetBrains Mono, Fira Code, Berkeley Mono (usgraphics.com), Geist Mono. See Read.cv, ia.net.

Variable font

A single font file containing continuously interpolatable axes — typically weight, width, optical size, slant. One file replaces a dozen weight variants and enables animation between states. Examples: Inter Variable, Source Serif 4 Variable, Mona Sans, Recursive (recursive.design).

Optical sizing

A variable font axis (or family with separate cuts) that auto-adjusts letterform proportions for display vs body use — display cuts have higher contrast, tighter spacing; body cuts are sturdier. Examples: Source Serif 4, Newsreader (Production Type), PT Serif Display vs Caption.

x-height

The height of a lowercase x — the visible bulk of body text. High x-height fonts look “bigger” at a given point size and read better at small sizes. Examples (high x-height): Inter, Roboto. Examples (low x-height): Garamond, Centaur.

Weight

The thickness of a font’s strokes, conventionally numbered 100 (Thin) through 900 (Black), with 400 = Regular and 700 = Bold. Variable fonts allow any weight in the range continuously.

Kerning

Adjustment of space between specific letter pairs (V–A, T–y, A–W) so the visual gap looks even. Modern fonts ship with kerning tables; you almost never set kerning manually except in display logos.

Tracking (letter-spacing)

Uniform horizontal space added to all letters in a run. Slightly positive tracking helps small caps and uppercase headings; negative tracking is a 2010s display-design tic that often hurts legibility. CSS: letter-spacing.

Leading (line-height)

The vertical distance between baselines of successive lines. Body text wants 1.5–1.6× the font size on web; tighter for headlines. The single biggest lever for readability after font choice itself.

Measure

The length of a line of text, traditionally counted in characters. Butterick: 45–75 characters per line for body, 60–66 ideal. CSS: max-width: 65ch.

Tabular figures

Numbers that all occupy the same width, so columns align. Critical for financial tables, dashboards, anywhere numbers stack. Most modern fonts include them; enable via font-variant-numeric: tabular-nums. Example: Inter, IBM Plex Sans, Source Sans all ship tabular figures.

Drop cap

The first letter of a paragraph set 2–4× larger than body, often in a display face, dropping into the surrounding text. Editorial convention from medieval manuscripts. CSS: ::first-letter.

Ligature

A single glyph combining two or more letters where the natural shapes would collide (fi, fl, ffi). Code ligatures are a separate thing — they replace => with ⇒, etc., for visual clarity in code editors. Examples: Fira Code, JetBrains Mono.

Color

Monochromatic

A palette built from tints, shades, and tones of a single hue. Reads as restrained and unified. Examples: Linear (near-black with subtle hue shifts), Are.na (grayscale).

Warm neutrals

Off-whites, beiges, and grays that lean toward yellow/red — paper-colored. Feels human, editorial, archival. Examples: Anthropic (cream backgrounds), The Atlantic.

Cool neutrals

Off-whites and grays leaning blue/green. Reads as technical, clinical, modern. Examples: Stripe, Linear dark mode.

Accent color

A single saturated color used sparingly against a neutral palette to direct attention — typically links, primary buttons, key callouts. The opposite of “everything is colorful.” Examples: Stripe’s purple, Linear’s purple, Notion’s red.

Brand-distinct accent

An accent color chosen specifically because it’s not in the standard tech palette — avoiding the “Stripe purple / Linear purple / Vercel black” cluster. Examples: Mailchimp’s yellow, Substack’s orange, Discord’s blurple (now ubiquitous, originally distinct).

Contrast ratio (WCAG)

The luminance ratio between text and background, expressed X:1. WCAG AA requires 4.5:1 for body text, 3:1 for large text (18pt+). AAA is 7:1 / 4.5:1. Most “subtle gray text on white” violates AA.

Semantic color

Colors with conventional meaning across UIs — green = success, yellow/amber = warning, red = error, blue = informational. Reusable as design tokens (--color-error, --color-success). The convention is so strong that violating it is its own kind of statement.

Dark mode

A UI variant with light text on dark backgrounds. Reduces eye strain in low light, conserves OLED battery. Done well, it’s a parallel design system, not a CSS filter inversion. Examples: Linear (designed dark-first), Vercel.

Mesh gradient

A gradient interpolated across multiple control points on a 2D surface (not just a linear A→B sweep) — produces soft, blob-like color blends with multiple hues meeting at indistinct boundaries. Replaced the flat-color hero around 2022. Examples: Stripe hero backgrounds, Linear marketing surfaces.

Grainy gradient

A mesh gradient with a visible noise/grain texture overlaid — the noise breaks up banding artifacts and adds tactile, almost-analog depth. The dominant 2024–2026 SaaS hero aesthetic. Implemented via SVG <feTurbulence> filter, a noise PNG overlay, or shader. Examples: Linear, Vercel, Grainient Supply (sells this look as a product).

Aurora gradient

A specific grainy-gradient sub-style — sweeping ribbons of color (often pink/orange/teal) across a near-black canvas, evoking the northern lights. Heavily used by AI-product landing pages 2024–2026. Example: the Grainient hero is a textbook aurora gradient.

Layout

Grid

A regular structure of columns and rows that constrains element placement. The 12-column grid is the web default because 12 divides cleanly into 2/3/4/6. CSS Grid and Flexbox are the modern implementations.

Modular grid

A grid divided into both columns and rows, creating a matrix of “cells” that elements snap to. Editorial heritage (Müller-Brockmann’s Swiss style). Allows complex layouts that still feel organized.

Asymmetric grid

A grid where columns have different widths — common in editorial layouts (a wide content column + narrow sidebar) and in modern landing pages where sections deliberately break alignment for emphasis. Contrast with symmetric grids.

Vertical rhythm

The principle that all vertical spacing in a layout should be a multiple of a base unit (often the line-height of body text). Creates an underlying beat that makes the page feel organized even when readers can’t articulate why.

Optical alignment

Adjusting the position of elements based on what looks aligned rather than what measures aligned. A capital O is geometrically the same width as a capital H but appears smaller — display headlines often nudge round letterforms to compensate. Most relevant for logos, large type, and icon alignment.

White space (negative space)

The empty area around and between elements. Positive space = the elements themselves; negative space = what’s left. Restraint with positive space gives negative space room to do the work of hierarchy and breath.

Bento grid

A landing-page layout where features are presented in rectangular tiles of varying sizes, evoking a Japanese bento box. Apple popularized it for product features; now ubiquitous on SaaS landing pages. Examples: apple.com/iphone, linear.app, vercel.com features.

Hero section

The first full-viewport section of a page, typically containing the headline, subhead, primary CTA, and a key visual. The single most reviewed and re-iterated section on any landing page.

Above the fold

The portion of a page visible before scrolling. Newspaper heritage (the literal fold of a folded newspaper). On web, “the fold” varies by viewport — mostly a heuristic, not a measurable line, but the concept (what does the visitor see in the first second?) still drives layout decisions.

Narrow prose vs wide content

Narrow prose: body text constrained to ~65ch (a single comfortable column) for reading. Wide content: images, code blocks, tables, callouts that can extend wider than the prose column for emphasis. The pattern most editorial sites use. Example: macwright.com.

Style movements

Swiss style (International Typographic Style)

The mid-20th-century Swiss design movement — Müller-Brockmann, Hofmann, Lohse. Sans-serif type, mathematical grids, asymmetric layouts, photography over illustration, restraint as expressive choice. The aesthetic substrate of most “modern” web design. Spiritual heir: Stripe, OpenAI. Ray-rendered example: Ray in Swiss style

Brutalism (web)

A 2010s+ web movement that consciously rejected polish — visible HTML, default browser styles, monochrome palettes, raw text-heavy layouts. The web equivalent of architectural brutalism’s exposed concrete. Reads as anti-corporate and “real.” Examples: Bloomberg.com (industrial-brutalist news), read.cv (resume platform), Craigslist (involuntary brutalist). Ray-rendered example: Ray in Brutalism

Neumorphism

A short-lived 2020 style of soft, embossed-feeling UI elements — elements that appear to push out of or sink into the background using subtle dual shadows. Beautiful in stills, low-contrast and accessibility-hostile in practice. Largely abandoned. Ray-rendered example: Ray in Neumorphism

Glassmorphism

Frosted-glass effects on UI surfaces — semi-transparent backgrounds with backdrop blur. Apple popularized it in macOS Big Sur (2020) and visionOS. Used well, it adds depth; overused, it adds visual noise. CSS: backdrop-filter: blur(...). Ray-rendered example: Ray in Glassmorphism

Claymorphism

A style of soft, rounded, slightly 3D UI elements that look molded from clay — pastel colors, soft shadows, generous radius. Friendly and approachable. Common in consumer / kid-facing apps. Ray-rendered example: Ray in Claymorphism

Skeuomorphism

UI design that mimics real-world materials and textures (felt poker tables, leather notebooks, brushed-aluminum panels). Apple’s pre-iOS 7 (2013) aesthetic. Replaced by flat design but periodically resurfaces in voice-of-product apps (musical instruments, calculator apps). Ray-rendered example: Ray in Skeuomorphism

Flat design

A 2013-onward style stripping skeuomorphic ornamentation — pure colors, no gradients, no shadows, geometric icons. Microsoft’s Metro (2010) and Apple’s iOS 7 (2013) made it the default. Now considered dated in its purest form; modern designs use almost flat (subtle shadows, gradients). Ray-rendered example: Ray in Flat design

Material Design

Google’s design system (2014–) — physical-metaphor cards that “stack” with elevation/shadow, ink-ripple animations, geometric sans (originally Roboto). Now in Material 3 / Material You with dynamic color theming. Defines the look of Android. Ray-rendered example: Ray in Material Design

Modern minimalism

The dominant 2020s product-design style: humanist or neo-grotesque sans, restrained palette with single accent, generous white space, subtle shadows, soft radius (8–16px), monochrome with semantic color used surgically. Examples: Stripe, Linear, Vercel, Anthropic, OpenAI all converge here. Ray-rendered example: Ray in Modern minimalism

”Apple-style” premium product

Apple’s marketing-page aesthetic: dramatic full-bleed product photography, massive type, single-product focus per section, generous black space, parallax / scroll-driven reveals. Imitated by every premium-positioned product launch. Example: apple.com. Ray-rendered example: Ray in Apple-style premium

Bauhaus

The early-20th-century German modernist movement (Weimar/Dessau, 1919–1933) that reduced form to geometric primaries — circles, squares, triangles in red, yellow, blue. Form follows function; ornament is crime. Influence on every subsequent geometric-sans typeface, every primary-color identity system. Designers: Kandinsky, Moholy-Nagy, Bayer, Albers. Spiritual heir: Material Design’s geometry, IBM’s identity. Ray-rendered example: Ray in Bauhaus

Memphis design

The 1980s Italian postmodern movement led by Ettore Sottsass — clashing pastels (pink, turquoise, yellow), squiggle and confetti pattern accents, asymmetric geometric shapes, deliberate visual chaos rejecting modernist restraint. Aesthetic of Saved by the Bell intros, early MTV graphics, Slack’s redesign-era illustrations. Comes back in cycles whenever design feels too sterile. Ray-rendered example: Ray in Memphis

Cyberpunk / glitch

A digital-native aesthetic combining neon (magenta, cyan, electric green) on dark backgrounds with intentional visual artifacts: RGB channel separation, scanlines, datamosh, terminal text fragments, pixelation. Lineage from Blade Runner (1982) to vaporwave (2010s) to crypto / web3 marketing. Signals “futurist,” “underground,” or “edgy tech.” Ray-rendered example: Ray in Cyberpunk glitch

Hand-drawn / notebook

A style mimicking pencil, pen, and marker on paper — wobbled contours, visible cross-hatching, casual washes, optional grid or ruled lines. Signals “concept stage,” “human-made,” “behind the scenes.” Used by Basecamp, Notion onboarding, IDEO case studies. The opposite signal of polished vector illustration. Ray-rendered example: Ray in Hand-drawn

Editorial engraving

The 19th-century printing aesthetic of fine black-ink lines and dense cross-hatching for tone, descended from woodcut and copperplate engraving. Survives today in Wall Street Journal hedcut portraits and New Yorker spot illustrations. Signals “venerable,” “editorial authority,” “old-world craftsmanship.” A sharp anachronism when applied to a modern subject. Ray-rendered example: Ray in Editorial engraving

Illustration patterns

Cutout-character illustration

A single detailed object or character rendered as a flat single-color silhouette (almost always white) against a saturated, committed background field. The character is concrete and specific (a microphone, a typewriter, a toucan, a classical bust) — not an abstract shape. When used as a set across multiple surfaces, all cutouts share render style, level of detail, and visual weight so the surfaces read as one authored series. The opposite signal of generic vector iconography or stock illustration. Canonical example: Every’s six product stamps (Read / Email / Speak / Listen / Write / Organize), each a white-cutout detailed character on a different jewel-tone field. Adjacent: Statamic’s photoreal toucan on a sunset field; classical Stripe-style spot illustrations; magazine spot art.

Components / patterns

Nav (sticky vs floating vs hidden)

Sticky nav stays at the top of the viewport on scroll.
Floating nav sits as a pill or capsule away from the page edges (Linear, Vercel marketing).
Hidden / collapsing nav disappears on scroll-down and reappears on scroll-up.
The choice signals priorities: sticky = utility-first, floating = aesthetics-forward, hidden = content-first.

Hero

The first-viewport section. Patterns include centered-text-with-visual, split (text left + visual right), full-bleed-photo-with-overlay, and animated/interactive heroes. The hero choice frames the entire page personality.

Rich footer: sitemap-style link directories, newsletter signup, social proof, legal — everything below the fold consolidated. Stripe, Vercel.
Sparse footer: minimal links + copyright. Linear, Apple-style focus pages.
The choice signals SEO priority (rich) vs aesthetic priority (sparse).

Card

A bounded rectangular container that groups related content — typically with shadow, border, or background tint. The atomic unit of most modern UI layouts and bento grids.

An overlay window that interrupts the page to demand focus. Use sparingly — modals are interruption tools. Common abuses: newsletter signup popups on first visit, “are you sure?” confirmations on reversible actions.

A control that reveals options on activation. Native <select> is functional but ugly; custom dropdowns are everywhere but accessibility-fragile. Headless UI libraries (Radix, shadcn) solved most of this.

Tabbed interface

Horizontal or vertical tabs that swap content in a single panel. Compresses surface area at the cost of discoverability — content not behind the active tab is invisible.

Progressive disclosure

The pattern of revealing complexity only as the user demonstrates need — collapsed sections, “Advanced options” toggles, multi-step forms. Reduces cognitive load on first encounter; signals that the simple case is the common case.

Concepts

Visual hierarchy

The intentional arrangement of elements so the eye moves through them in priority order — typically via size, weight, color contrast, and spacing. The single most important concept in layout. If everything is emphasized, nothing is.

F-pattern reading

Eye-tracking research (Nielsen Norman Group) showing that users on text-heavy pages read in an F shape — full top line, partial second line, then scanning down the left edge. Drives content placement: lead with the headline, frontload paragraphs.

Z-pattern reading

For lighter, less text-dense layouts (landing pages, hero sections), the eye traces a Z — top-left to top-right, diagonal to bottom-left, across to bottom-right. Drives logo/CTA placement on marketing pages.

Scannable content

Writing and layout designed to be consumed by skimming, not reading: short paragraphs, bullet lists, bold lead-ins, descriptive subheads, plenty of white space. Web readers default to scanning before committing to read.

Brand voice (separate from brand visual)

The tone, vocabulary, and sentence patterns of a brand’s writing — distinct from its visual identity. A brand can have a serious visual and playful voice (Mailchimp), or vice versa. Voice shows up in microcopy, error messages, marketing pages, and email — surfaces designers often hand off without thinking about voice.

Affordance

A property of an object that suggests how it can be used — buttons look pressable, links look clickable, drag handles look draggable. Skeuomorphism made affordances explicit; flat design hid them and many users got lost. Most modern UIs split the difference with subtle hover states and consistent visual conventions.

Cognitive load

The mental effort required to process an interface. High load = many elements competing for attention, unclear hierarchy, dense copy, novel patterns. Low load = clear hierarchy, conventional patterns, restrained palette, generous white space. Restraint is largely a cognitive-load reduction strategy.