Glossary

Above the Fold

The area of a webpage visible without scrolling. Derived from newspaper layout terminology. This zone contains the most critical first-impression content.

Affordance

A design property that communicates how an element should be used. A button that looks pressable affords clicking; an underlined word affords following. Good affordances are intuitive; bad ones cause confusion.

Analogous Colors

Colors that sit adjacent to each other on the color wheel (e.g., yellow, yellow-green, green). They create harmonious, natural-feeling color palettes.

Baseline Grid

An invisible horizontal grid aligned to the line height of body text. Aligning all text and elements to this grid creates vertical rhythm and visual order throughout a layout.

Bleed

An element that extends to the absolute edge of the viewport or page, with no margin. Full-bleed images are common in hero sections. The term originates from print design.

Breadcrumb

A navigation aid showing the user's current location within a site hierarchy. Example: Home > Menu > Coffee. Improves UX for multi-level websites.

CTA (Call to Action)

A design element (typically a button) that prompts the user toward a specific action: 'Book a Table,' 'View Menu,' 'Order Now.' Every page should have at least one clear, visible CTA.

Complementary Colors

Colors directly opposite each other on the color wheel (e.g., blue and orange). When used together they create maximum contrast and visual vibration.

Contrast Ratio

The mathematical relationship between the luminance of two colors. Used to measure text readability for accessibility compliance (WCAG AA = 4.5:1 minimum for body text).

Design Token

A named variable that stores a design decision (color, spacing, radius, shadow). Tokens make design systems scalable: --color-primary, --spacing-md, --border-radius-sm.

Drop Shadow

A simulated shadow cast behind an element to create the illusion of depth and elevation. In CSS: box-shadow: 0 4px 16px rgba(0,0,0,0.12).

F-Pattern

An eye-tracking reading pattern typical of content-dense pages; users scan across the top, then down the left side, with diminishing attention as they go. Informs where to place critical content.

Font Stack

The ordered list of fonts specified in CSS, including fallback options. If the first font fails to load, the browser uses the next.

Glassmorphism

A UI trend featuring semi-transparent frosted glass-like panels, typically using backdrop-filter: blur() in CSS. Popular in Y2K revival and modern minimalist designs.

Grid System

A framework of invisible columns and rows used to organize layout elements consistently. Most common: 12-column grid with configurable gutter widths.

Gutter

The space between columns in a grid system. Governs how much breathing room exists between adjacent content blocks. Typical desktop gutters: 24–40px.

Hero Section

The large first section of a webpage, designed to make a strong first impression and communicate the brand's core value proposition immediately.

HSL

Hue-Saturation-Lightness. A human-readable color format where Hue (0–360°) is the color wheel position, Saturation (0–100%) is color intensity, and Lightness (0–100%) is brightness.

Kerning

The adjustment of space between individual letter pairs in typography. Different from tracking (which adjusts spacing uniformly). Used to fix awkward letter combinations in headlines.

Leading

The vertical space between lines of text (line height). Name comes from the lead strips used in movable type printing. Standard web body leading: 1.5–1.7× font size.

Microinteraction

A small, contained interaction that provides feedback for a specific action. Examples: a like button that animates on tap, a loading spinner, or a success checkmark after form submission.

Mockup

A static visual representation of a design, typically showing how a real product (website, app) would look without functional code behind it.

Monochromatic

A color scheme using only one hue in various shades, tints, and tones. Creates elegant, cohesive designs when executed with care.

Mood Board

A visual collage of references (photographs, color swatches, typography, textures) used to communicate and align on a design direction before building anything.

Negative Space

The empty areas surrounding and between design elements. Also called 'whitespace.' Active negative space is deliberately shaped to contribute to the design's meaning or feel.

Parallax Scrolling

A web technique where background elements scroll at a different speed than foreground elements, creating an illusion of depth. Used in hero sections and storytelling pages.

Responsive Design

A design approach where a website's layout and content adapt fluidly to different screen sizes (desktop, tablet, mobile). Achieved through CSS media queries and flexible grid systems.

Sans-Serif

A typeface category without decorative stroke endings. Generally considered more readable on screens at body sizes. Examples: Inter, Poppins, Roboto.

Serif

A typeface category with small decorative strokes (serifs) at the ends of letter forms. Associated with print traditions, authority, and elegance. Examples: Playfair Display, Georgia, Cormorant.

Type Scale

A defined set of typographic sizes based on a mathematical ratio (e.g., 1.25 Major Third, 1.333 Perfect Fourth). Creates harmonious size relationships between heading and body levels.

Typography

The art and technique of arranging type — including font choice, size, weight, spacing, and color — to make text readable, legible, and visually compelling.

UI (User Interface)

The visual and interactive layer of a digital product: buttons, inputs, navigation, cards, and all the elements a user directly interacts with.

UX (User Experience)

The overall experience a user has while interacting with a product — including how easy it is to navigate, how quickly they find information, and how satisfied they feel.

Variable Font

A single font file that contains multiple variations (weight, width, slant) along continuous axes. Variable fonts reduce HTTP requests and enable smooth animation between weights.

Viewport

The visible area of a web page in the browser window. Viewport units (vw, vh) are CSS measurements relative to this area. 100vw = the full width of the viewport.

Visual Hierarchy

The arrangement of elements in a design to communicate their relative importance. Achieved through size, color, weight, spacing, and position.

Visual Weight

How much visual attention an element attracts. Larger, darker, and more saturated elements have higher visual weight. Balancing visual weight creates stable, intentional layouts.

WCAG

Web Content Accessibility Guidelines. The international standard for web accessibility, published by the W3C. AA and AAA designate minimum and enhanced compliance levels for contrast, keyboard navigation, and more.

Whitespace

See Negative Space. The empty areas in a layout that provide breathing room, reduce cognitive load, and direct visual focus.

Wireframe

A low-fidelity sketch or diagram showing the structure and layout of a web page without visual design details. Used in the planning phase to establish content hierarchy before adding color or typography.

Z-Pattern

An eye-tracking pattern typical of landing pages; the eye moves from top-left to top-right, then diagonally to bottom-left, then to bottom-right. Informs the optimal placement of brand, navigation, supporting content, and conversion CTAs.