Design Glossary
Every design term explained with visual examples. Not just definitions, but the context that makes them useful.
86 terms
0-9
A
Accent Color
The color role in a design system reserved for brand identity, primary actions, and key signals, used with discipline so it holds its meaning.
AI Session
A single continuous conversation thread with an AI model, from the first message to the last. Each session has its own context window that resets when a new session starts.
AI Token
The basic unit of text that AI language models process. Roughly 0.75 words per token in English, though the ratio varies by language and content type.
AI-native
A design or system built to be composed by an AI model at request time, not assembled by hand at build time.
APCA
The Accessible Perceptual Contrast Algorithm, a perceptual contrast formula designed to replace the WCAG 2 luminance math in the WCAG 3 draft, accounting for font size, weight, and polarity.
Artisan and Craft Brand
A brand that emphasizes handmade quality, unique craftsmanship, and often the imperfect, human touch in its products and services.
B
Bento Grid
A layout pattern of unequal rectangular cells arranged in a unified composition, replacing the three-column feature row for modern product and marketing pages.
Brand Architecture
The organizational structure of brands, sub-brands, and products within a company portfolio. Defines how each entity relates to the parent brand visually and strategically.
Brand Consistency
The discipline of expressing a brand identity the same way across every format, platform, and interaction.
Brand Equity
The commercial value derived from consumer perception of a brand, beyond the functional value of its products or services.
Brand Guidelines
The rulebook that defines how a brand identity should be applied across every format, platform, and context.
Brand Identity
The complete visual and verbal system that makes a brand recognizable, consistent, and impossible to confuse with anyone else.
Brand Palette
The defined set of primary, secondary, and accent colors that represent a brand's visual identity across all touchpoints. More structured than a generic color palette.
Brand Promise
The core value or experience a brand commits to delivering to its customers, forming the fundamental expectation for every interaction.
Brand Strategy
The one-page foundation that defines who the brand is for, what it stands for, how it differs from alternatives, and what it must never be.
Brand System
The interconnected set of visual and verbal rules that work together to produce a consistent brand experience across every context.
Brand Touchpoint
Any moment where a person interacts with or encounters a brand, from a website visit to a packaging unboxing to a customer service call.
Brand Voice
How a brand sounds in writing and speech. The personality, tone, and word choices that make it recognizable even without visuals.
C
Claude Code
Anthropic's agent-mode command-line tool that reads your entire codebase, edits files, runs tests, and opens pull requests from a terminal prompt.
Color Accessibility
Ensuring color choices meet minimum contrast standards so content is readable by users with color vision deficiencies. WCAG AA requires a 4.5:1 contrast ratio for normal text.
Color Harmony
The pleasing arrangement of colors based on their relationships on the color wheel. Complementary, analogous, triadic, and split-complementary are the most common harmony types.
Color Palette
The defined set of colors a brand uses across all materials, typically including primary, secondary, accent, and neutral colors.
Color Psychology
The study of how colors influence human perception, emotion, and behavior. In design, it is the practice of choosing colors based on the response they trigger, not just how they look.
Color Tokens
Named color variables tied to roles in a design system rather than raw hex values, so the same role can resolve to different colors in different themes.
Color Wheel
A circular diagram of hues organized by their relationships, used by designers to reason about which colors pair, clash, or complement based on their position on the circle.
Component Library
A collection of reusable UI elements (buttons, inputs, cards, modals) built from design tokens and documented with usage guidelines. One layer of a design system, not the whole thing.
Context Threshold
The percentage of context window usage at which AI output quality begins to noticeably degrade, typically around 50-70% depending on the model and task complexity.
Context Window
The total amount of text, code, and conversation history an AI model can hold in active memory during a single session. Measured in tokens, not words.
Contrast Ratio
The measured difference in luminance between two colors, used to ensure text and interactive elements are readable for all users.
Core Web Vitals
Google's three measurable user-experience metrics for loading, interactivity, and visual stability that act as both a search ranking input and a design quality signal.
CTA
Call to Action. A design element, usually a button or link, that prompts the user to take a specific action like signing up, buying, or downloading.
D
Design Governance
The ownership structure, decision-making process, and contribution model that determines how a design system evolves. The most common reason design systems fail.
Design Grid
A structured framework of intersecting lines used in design to organize elements, ensure alignment, and create visual consistency and balance.
Design Handoff
The structured transfer of a finished design from designer to engineer (or to the client's internal team), including source files, tokens, specs, and the open questions the recipient needs answered before they can build.
Design Pattern
A documented solution for a recurring design problem. Patterns tell you when to use a dropdown versus a radio group, how to handle empty states, and how forms should behave.
Design Token
A named variable in a design system that stores a visual decision (color, spacing, type, radius, motion) and can resolve to different raw values per theme, platform, or context.
Design Tokens
The atomic design values (colors, spacing, typography, shadows, motion) stored as platform-agnostic variables that every component in a design system references.
F
F-Pattern
A common eye-tracking pattern where users scan content-heavy pages in an F-shape: across the top, down the left side, then across shorter horizontal scans.
Favicon
The small icon displayed in browser tabs, bookmarks, and mobile home screens. Typically 16x16 or 32x32 pixels, it is the ultimate scalability test for any logo.
Fluid Typography
A responsive technique where font sizes scale smoothly between breakpoints using CSS clamp(), eliminating the layout jank from hard breakpoint changes.
Focal Point
The first element the eye is drawn to in a composition. Established through size, contrast, color, or isolation, a focal point anchors the entire visual hierarchy.
Focus State
The visual indication that an interactive element currently has keyboard focus, required by WCAG 2.2 and the only way keyboard and screen-reader users know where they are on a page.
Font Pairing
The strategic selection of two or more typefaces that work together in a design system. Good pairings create contrast in structure while maintaining harmony in proportion.
G
Geometric Foundation
The practice of building logos, especially minimalist ones, using fundamental geometric shapes like circles, squares, and triangles for universal understanding and structural integrity.
Geometric Logo
A logo built primarily from circles, squares, triangles, or other mathematical shapes. Geometric foundations give marks universal readability and structural integrity.
H
Heritage Brand
A brand with a long history, often spanning decades or centuries, that carries significant visual weight, tradition, and established recognition.
Hero Section
The hero section is the first full-width content block on a page, built to tell a visitor where they are, what they can get, and what to do next before they decide to scroll or bail.
L
Letter Spacing
The uniform adjustment of space between all characters in a block of text. Also called tracking. Distinct from kerning, which adjusts space between specific character pairs.
Line Height
The vertical distance between baselines of consecutive text lines. The single most impactful spacing property for readability, and the one most often set incorrectly.
Logomark
A symbol or icon that represents a brand without any text. The Apple apple, the Nike swoosh, the Airbnb Belo.
Logotype
A logo made entirely of styled text, where the brand name IS the logo. Google, Coca-Cola, and FedEx are logotypes.
M
Material Palette
The selection of physical materials (paper, board, glass, aluminum, film) used in packaging design. Material choice communicates brand positioning before any graphic element.
Minimalist Logo Design
The practice of reducing a logo mark to its most essential visual elements to maximize recognition and meaning.
Model Context Protocol
An open standard introduced by Anthropic that lets AI agents read and interact with external tools, data sources, and services through a shared interface.
Mood Board
A curated visual collection of images, textures, colors, typography, and references used to define a brand's aesthetic direction before detailed design begins.
N
O
One Idea Per Mark
A principle of minimalist logo design where the mark communicates a single, clear concept without trying to convey multiple messages simultaneously.
One-Color Test
A crucial design test where a logo is evaluated for its strength and recognition when rendered in a single color, typically black on white.
P
Packaging Identity
The complete system of structural, material, and visual decisions that make a product recognizable across shelf, e-commerce, unboxing, and social media contexts.
Progressive Disclosure
An interface pattern that shows the minimum information needed for the current decision, then reveals additional detail only when the user signals they want more.
Prompt
The input text, question, or instruction given to an AI model to generate a response. The quality of the prompt directly shapes the quality of the output.
Prompt Engineering
The practice of writing instructions that produce consistent, usable output from a language model. Functionally identical to writing a good creative brief.
R
Rebranding
The process of changing a brand's visual identity, messaging, positioning, or all three to better reflect what the brand has become or wants to become.
Reduction Process
The systematic practice of removing non-essential elements from a design until only the elements that carry meaning remain. The core method behind minimalist logo design.
S
Scalability
A design's ability to maintain clarity, impact, and legibility across all reproduction sizes, from a 16px favicon to a highway billboard.
Semantic Tokens
Design tokens that assign meaning to raw values. Instead of referencing color-blue-500 directly, components reference color-primary, which resolves to the appropriate raw value.
Shelf Impact
The ability of packaging to attract attention and communicate brand identity from typical retail viewing distance (approximately three feet). The primary performance metric for retail packaging.
Silhouette
The solid outline shape of a design when filled with a single flat color. A strong silhouette means the mark is recognizable without internal detail, color, or texture.
SKU Color System
A systematic approach to differentiating product variants within a packaging line through color while maintaining overall brand recognition.
Squint Test
A quick hierarchy check where you blur your vision (or squint) to see which elements stand out when detail is removed. If the right things pop, the hierarchy works.
System Instructions
Hidden directives loaded into an AI session that shape the model's behavior, tone, and constraints. They consume context window tokens like any other input.
T
Token Reuse
The compounding effect where each new AI response requires reprocessing all previous conversation tokens, increasing latency and cost with every turn.
Type Scale
A set of font sizes generated from a consistent mathematical ratio. Instead of picking sizes by feel, you pick a base size and a ratio, and every other size flows from that relationship.
Typography Hierarchy
The system of font sizes, weights, and styles that guides the reader's eye through content in order of importance.
Typography Scale
A system of proportional text sizes that creates consistent visual order across headings, body text, captions, and labels. Usually based on a mathematical ratio.
U
V
Value-Based Pricing
A pricing model that sets the fee as a function of the outcome the client gets, not the hours the work takes or the cost of producing it.
Variable font
A font file that exposes one or more axes (weight, width, slant, optical size, or custom) that can shift at runtime without loading additional files.
Visual Hierarchy
The arrangement of design elements so the eye processes them in a deliberate order, controlled by size, contrast, color, spacing, and position.
Visual Identity
The visible elements of a brand: logo, color palette, typography, imagery style, and layout patterns.
W
WCAG
The Web Content Accessibility Guidelines, published by W3C, defining measurable criteria for making digital content usable for people with disabilities, including color contrast, keyboard navigation, and screen reader support.
White Space
The empty area between and around design elements that creates breathing room, establishes hierarchy, and improves readability.
Whitespace
Whitespace is the empty area in a composition that shapes how the eye moves, groups elements, and signals hierarchy without adding any visual content.
Wireframe
A deliberately low-fidelity layout sketch that locks structure, hierarchy, and content placement before any visual design or interaction polish is applied.