Design Glossary

Living reference. Updated as new concepts are introduced across lessons. · Drill with flashcards →

Core Principles

Contrast L0001: Making different elements look clearly different, not slightly different. Achieved through size, weight, color, or spacing. Creates visual hierarchy by giving the eye entry points. Weak contrast reads as a mistake; strong contrast reads as intentional.
Repetition L0001: Reusing the same visual elements throughout a piece (fonts, colors, bullet styles, line weights). Builds unity and signals that elements belong to the same system. What consistency is to code, repetition is to design.
Alignment L0001: Placing every element so it has a visual connection to something else on the page. Creates clean, invisible lines the eye follows. Default center-alignment reads as amateur; strong edge alignment (usually left) reads as intentional.
Proximity L0001: Grouping related items together physically. Items close together are perceived as belonging to each other. White space between groups replaces the need for borders and boxes. The simplest and most powerful organizing principle.

Layout & Space

White Space (Negative Space): Empty space around and between elements. Not wasted space, it is the breathing room that lets content be read. Generous white space signals quality and confidence. Cramped layouts feel cheap and overwhelming.
Visual Hierarchy L0003: The arrangement of elements to communicate their order of importance. Achieved through five tools: size, weight, colour/contrast, position, and white space. Tells the viewer where to look first, second, and last. Without it, the eye wanders; with it, the eye obeys.
Focal Point L0003: The single element a viewer is meant to land on first. Created by stacking hierarchy tools (large + bold + coloured + isolated). Rule: one focal point per view. If three things tie for first, the viewer picks none.
Scale L0003: The relative size of elements. The strongest signal of importance, the eye always lands on the biggest thing first. Beginner mistake: timid scale (1.2× differences). Reach for 3–4× when something must dominate.
Weight L0003: Stroke thickness of text or lines. Bold text pulls the eye even at the same size as its neighbours. The right tool when you need emphasis but can’t change size (e.g. table cells, body copy).
F-Pattern L0003: Eye-tracking shape for text-heavy pages (articles, docs, dashboards): the reader sweeps the top line, a shorter middle line, then scans down the left edge. Design implication: lede goes top-left; key terms anchor the left margin.
Z-Pattern L0003: Eye-tracking shape for sparse pages (landing pages, slides, single-screen visuals): top-left → top-right → diagonal → bottom-left → bottom-right. Design implication: logo top-left, call-to-action bottom-right.
Balance: The distribution of visual weight across a composition. Symmetrical balance is formal and stable. Asymmetrical balance is dynamic and modern. Both can work; the key is that no side feels heavier without intent.

Typography

Typeface L0004: A family of fonts sharing a common design (e.g., Helvetica, Georgia). Not the same as font: Helvetica is a typeface; Helvetica Bold 12pt is a font. In practice, most people say “font” for both.
Serif L0004: Typefaces with small decorative strokes (serifs) at the ends of letterforms. Examples: Georgia, Times New Roman, Charter. Best for long-form reading (whitepapers, postmortems). The eye fatigues less on serif body text over many words.
Sans-Serif L0004: Typefaces without serifs. Examples: Helvetica, Arial, Inter. Best for UI: dashboards, buttons, labels, headings. Safe default if you’re unsure.
X-height L0004: The height of a lowercase x in a given typeface. Tall x-heights (Inter, Verdana) read larger and stay legible at small sizes. Short x-heights (Garamond) feel elegant but disappear in body copy. Pick tall for UI.
Leading L0004: The vertical space between lines of text (pronounced “ledding”). Default for body: 1.5–1.7. Headings can be tighter (1.1–1.25). Too tight and lines collide; too loose and the paragraph falls apart.
Measure (Line Length) L0004: Characters per line. The sweet spot is 45–75 characters; ~66 is the classical ideal. Too short chops thought; too long and the eye loses its place on the return trip. Cap your max-width.
Tracking (Letter-spacing) L0004: The uniform space between letters across a word or line. Tighten large headlines (-0.02 to -0.06em); loosen small all-caps labels (+0.08 to +0.18em). Leave body text alone.
Kerning L0004: The space between two specific letters (the V–A gap in “VARIANCE”). Software handles it; you rarely touch it. Distinct from tracking, which spaces all letters uniformly.
Type Scale L0004: The small fixed set of font sizes you allow yourself to use on a document (typically 5–7). Each step a fixed ratio bigger than the last (1.25× = major third, common and safe). Engineering analogue: design tokens. Pick from the scale; never invent a one-off.
Font Weight L0004: The stroke thickness of a font: thin, light, regular (400), medium, semibold, bold (700), heavy, black. Use weight to create hierarchy without changing size (e.g. in tables). See also Weight as a hierarchy tool.

Color

Hue L0005: Position on the colour wheel, measured 0 to 360°. Red = 0, yellow = 60, green = 120, blue = 240. What people mean when they say “colour”. The H in HSL.
Saturation L0005: Intensity or purity of a colour. 0% = pure gray; 100% = pure hue. UI body should sit at 10 to 30%; reserve 70%+ for one or two attention-grabbing elements per view. The S in HSL.
Value / Lightness (Brightness) L0005: How light or dark a colour is, 0% = black, 100% = white. The L in HSL. Lightness contrast (not hue contrast) is what makes text legible and is the basis of accessibility. Avoid pure 0% and 100%; use ~8% and ~98% instead.
HSL L0005: Colour model based on Hue, Saturation, Lightness. The only model that maps to how humans think about colour. Prefer it over RGB/hex for design decisions; hex is just storage.
Neutral Scale L0005: A 9 to 11-step ramp from near-white to near-black, used for 80%+ of any UI: backgrounds, text, borders, dividers. Often given a whisper of hue (low-saturation blue or warm) so it harmonises with the accent, instead of being pure gray.
Accent Colour L0005: A single brand or focal colour used sparingly on top of the neutral scale. Marks the focal point of a view (the primary button, the bar to look at, the focal KPI). One accent per product is the norm.
Semantic Colour L0005: A colour that carries fixed meaning: green = success, amber = warning, red = error or destructive, blue = info. Don’t use semantic hues decoratively; doing so costs you the meaning when you need it.
Sequential Palette L0005: Data-viz palette for ordered data that goes in one direction (revenue, count, percentile). One hue, varying lightness, low to high. Standard for heatmaps.
Diverging Palette L0005: Data-viz palette for ordered data with a meaningful midpoint (profit vs loss, above vs below target). Two hues meeting at a neutral. Avoid red and green together; use orange and blue for colourblind safety.
Categorical Palette L0005: Data-viz palette for unordered groups (product line, region, source). Hues equally spaced on the wheel. Cap at 6 or 7 categories; beyond that the eye cannot distinguish them.

Practice

Composition L0006: The deliberate arrangement of all design elements (hierarchy, typography, colour, alignment) into one finished view. The act of choosing which tool to reach for and when. Not a separate concept; the synthesis of everything else.
Design Checklist L0006: A short list run on every diagram before sharing it: focal point, scanning pattern, typography, palette, and CRAP (contrast, repetition, alignment, proximity). Catches 80% of beginner mistakes in under a minute.

Message & Communication

BLUF (Bottom Line Up Front) L0007: US military comms standard, also called the Minto Pyramid in consulting. Rule: state the conclusion first, defend it second. Applied to slides: the headline carries the takeaway; the diagram is supporting evidence.
Squint Test L0007: Blur the screen or step 10 feet back. If the headline still reads and you can grasp the takeaway, the slide works. If you have to lean in, the headline is failing.
Headline (in design) L0007: The sentence that states the slide’s conclusion, not its topic. “Architecture Overview” is a label. “One semantic layer means every dashboard speaks the same language” is a headline. Write it before the diagram.
Label Title (anti-pattern) L0007: Naming a slide by its topic instead of its conclusion. “Development Workflow”, “Data Flow”, “Metric Governance”. The viewer learns nothing they didn’t already know from the slide they were promised.
Contrast Pattern L0007: Headline shape «Same X. One difference: Y.». Best for side-by-side comparisons: names the one variable that matters and ignores the rest.
Outcome Pattern L0007: Headline shape «X gives you Y.». Best for introducing a single feature or concept: names the why before the what. Y must be a benefit, not a feature.
Surprise Pattern L0007: Headline shape «Most teams assume X. Actually Y.». Best for breaking an assumption the audience walked in with. Use sparingly; overuse makes every slide sound like a sales pitch.

Anti-AI Writing

AI Scaffolding Principle L0008: Use AI for thinking, outlining, critiquing, fact-checking, and light copy-editing. Write the final prose yourself. Over-reliance on AI to produce final text is impolite: the reader pays attention to words that had no thought behind them.
The Right Workflow (5 stages) L0008: (1) Think with AI as Socratic partner. (2) Outline with AI. (3) Write alone, no AI. (4) Critique with AI. (5) Polish with AI lightly. Stage 3 is non-negotiable; skipping it is what the reader feels.
The Pen Test L0008: After finishing, ask “who held the pen at the end?”. Sharper version: can you defend every sentence as a choice you made? Not “I read it and didn’t change anything”, but “I wrote this because of X.” If not, you let AI hold the pen too long.
The Eight Tells (workflow diagnostics) L0008: Process-failure signals visible in final output. (1) em-dash separators, (2) triadic abstract lists, (3) empty intensifiers, (4) “not just X, it’s Y”, (5) formal transitions, (6) vague unfalsifiable claims, (7) symmetric balanced sentences, (8) no proper nouns or specific numbers. Any one present = you let AI write past Stage 3. Not a disguise checklist; fixing symptoms without fixing the workflow just produces better-disguised over-reliance.
Replacement Test L0008: Mid-process check (Stage 4). Mentally replace every concrete noun in a sentence with “thing”. If it still parses, your specifics never made it in; rewrite with names, numbers, dates. Human sentences break when stripped of nouns because the information lived there.
Triadic List (anti-pattern) L0008: Three abstract adjectives in a row: “powerful, flexible, and scalable”. Reads as filler because applicable to anything = informative about nothing. Pick the most defensible one; drop the other two; or replace with concrete claims.
Empty Intensifier (anti-pattern) L0008: Adverbs that add no information: incredibly, truly, remarkably, deeply. Cut on sight. If the claim needs the intensifier to feel important, the claim isn’t strong enough.
Specificity L0008: The discipline of replacing abstract nouns with proper nouns, adjectives with numbers, and benefit-claims with concrete examples. The single highest-leverage fix for AI-flavoured prose. “Many companies” becomes “Carousell, Tiki, and Lazada”.
Sentence Length Variation L0008: Deliberately mixing short and long sentences in a paragraph. Short = punch. Long = context. The audible signature of a human writer. AI defaults to mid-length symmetry; humans rock between extremes.