# Design Fundamentals > A working reference for visual and graphic design fundamentals — typography, color, layout and grids, visual hierarchy, spacing, and the perception principles behind them. Consult this whenever making or critiquing visual design decisions: choosing or pairing typefaces, setting type for readability, building a color palette, laying out a page/screen/slide/poster, establishing hierarchy, fixing a cluttered or unbalanced composition, or explaining *why* a design does or doesn't work. Use it when the user asks for design feedback, wants their layout/typography/color improved, or is designing any visual artifact and wants it to look considered rather than accidental. Reach for this even when "design fundamentals" isn't named — any real visual-design choice benefits from it. - Skill: `joaomonteiro100/design-fundamentals` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add joaomonteiro100/design-fundamentals` - Raw SKILL.md: https://api.skillmd.com/api/skills/joaomonteiro100/design-fundamentals/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: JoaoMonteiro100 (https://skillmd.com/u/joaomonteiro100) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/joaomonteiro100/design-fundamentals --- # Design Fundamentals A reference for the durable fundamentals of visual design — the principles that hold across brands, tools, and trends. Use it to make deliberate choices and to explain them. Good design usually isn't the product of one bold move; it's many small, consistent decisions about type, space, color, and alignment that add up to something that feels effortless. The guiding instinct throughout: **reduce noise so the message comes through.** Most visual problems are too much (clutter, too many fonts/colors/sizes, competing focal points) rather than too little. When something looks wrong but you can't name why, suspect inconsistency, weak hierarchy, or cramped spacing first. This file covers the essentials inline. For a decision, jump to the relevant section; for a critique, walk all of them. ## Typography Type is most of the design in most interfaces and documents. Get it right and the rest gets easier. **Readability first.** - **Measure (line length):** aim for roughly 45–75 characters per line for body text. Too long and the eye loses its place returning to the next line; too short and rhythm breaks. - **Line height (leading):** body text usually wants ~1.4–1.6× the font size. Denser for short labels, looser for long-form reading. Larger headings need *tighter* relative leading than body. - **Size:** body text should be comfortable at its viewing distance — on screen, ~16px and up for primary reading text. Don't make people work. - **Contrast:** dark-enough text on its background (see color/accessibility). Grey-on-grey looks elegant in a mockup and fails in sunlight. **Choosing and pairing typefaces.** - **Fewer is better.** One well-chosen family with a range of weights carries most work. If pairing, two is plenty — commonly one for headings, one for body. - **Pair by contrast, not by near-sameness.** Two similar sans-serifs clash subtly; a clear contrast (e.g. a distinctive display face for headings + a neutral, highly legible face for body) reads as intentional. Superfamilies (a serif and sans designed together) pair safely. - **Pick faces built for the job:** text faces for reading, display faces for large sizes only. A display face set at 14px is illegible; a text face set huge looks bland. **Setting type well.** - Establish a **type scale** — a small set of sizes with clear steps (e.g. a consistent ratio) rather than arbitrary values. Constraint creates harmony. - Use **weight, size, and color** to signal importance, not decoration. Avoid ALL-CAPS for long strings, underlines for non-links, and italics for whole paragraphs. - Mind the details that separate amateur from professional: real punctuation (curly quotes, en/em dashes), consistent spacing, no rivers of whitespace, no widows/orphans in important text, and left-aligned body text for most Latin reading (justified only with good hyphenation). ## Color Color carries meaning, mood, and hierarchy — and is where beginners most often overreach. **Build a restrained palette.** - Start with a small system: one or two **primary** colors, a **neutral** range (the greys/off-whites that do most of the actual work), and a few **accent** colors used sparingly for emphasis and calls to action. - Reserve your most saturated / attention-grabbing color for the thing you most want people to notice. If everything is loud, nothing is. - Use **semantic** colors consistently (e.g. the same red for errors/destructive actions, the same green for success) so color becomes a reliable signal. **Make it work technically.** - Think in terms of hue, saturation, and lightness — adjusting lightness and saturation gives you a coherent family from a single hue. Flat, evenly-spaced tints/shades look more deliberate than hand-picked colors. - **Contrast is not optional.** Text and meaningful UI must meet accessibility contrast (commonly WCAG AA: ~4.5:1 for normal text, ~3:1 for large text and UI components). Check it; don't eyeball it. - **Never rely on color alone** to convey information — pair it with text, icon, or shape, so colorblind users and grayscale contexts still work. - Test the palette in both light and dark contexts if the product supports them. ## Layout & grids Layout is about relationships in space: what's grouped, what's separate, what leads the eye. **Grids create order.** - A **grid** (columns, gutters, margins) gives you consistent places to put things, so alignment happens by default and the design feels stable. Even a simple grid beats free placement. - **Align intentionally.** Every element should line up with something. Strong, shared edges (a consistent left margin, aligned baselines) read as calm and professional; stray misalignments read as sloppy even when the viewer can't say why. - Choose a column structure to fit the content (e.g. a flexible multi-column grid for rich layouts, a single strong column for reading). **Space is a material, not leftover.** - **Whitespace** (negative space) is an active tool. Generous space around an element gives it importance and makes a layout breathe; crowding signals "less important" and creates stress. Don't fill every gap. - Use **consistent spacing steps** (a spacing scale) rather than arbitrary margins — 4/8-based systems are common — so rhythm stays even. - **Proximity groups meaning:** things close together are read as related; space between them signals separation. Control grouping with distance before reaching for boxes and lines. **Composition.** - Give the layout a clear **focal point** and a path for the eye to follow. - Balance the composition — symmetry reads as stable/formal; deliberate asymmetry reads as dynamic — but avoid accidental lopsidedness. - Respect margins; content that crowds the edges feels tense and can get clipped. ## Visual hierarchy & perception Hierarchy is how you tell the viewer what to look at, in what order. It's arguably the single most important skill, because a design with perfect type and color but no hierarchy still fails. **Establish hierarchy with contrast.** The eye goes to whatever differs most from its surroundings. Create order by varying: - **Size** (bigger = more important), **weight/boldness**, **color/contrast**, **position** (top and left-leading spots get seen first in Latin reading), and **space** (isolation draws attention). - Aim for an obvious first thing, second thing, third thing. If two elements compete for "most important," pick one and demote the other. **Perception principles (Gestalt).** People automatically organize what they see; design with these tendencies, not against them: - **Proximity:** near things are seen as a group. - **Similarity:** things that look alike are seen as related. - **Common region / enclosure:** a shared background or border groups items. - **Continuity & alignment:** the eye follows lines and aligned edges. - **Closure:** people mentally complete familiar shapes, so you can imply rather than draw everything. - **Figure/ground:** ensure it's clear what's foreground and what's background. **A few broadly useful principles.** These recur across good design: - **Consistency** — repeating patterns, styles, and components reduces the effort of understanding and builds trust. - **Signifiers & affordances** — make interactive things look interactive and obvious what they do; don't make people guess. - **Feedback** — every action should produce a visible response. - **Progressive disclosure** — show what's needed now; reveal complexity on demand rather than all at once. - **Fitts's law** — important/ frequent targets should be bigger and easier to reach; **Hick's law** — more choices means slower decisions, so curate. - **Aesthetic-usability effect** — people perceive attractive designs as easier to use, which is why polish is functional, not vanity. ## How to use this in a critique When giving design feedback, go in order of impact rather than nitpicking: 1. **Hierarchy** — is it instantly clear what matters most? What to do first? 2. **Layout & alignment** — is everything aligned to something; is spacing consistent; does it breathe? 3. **Typography** — is it readable; is the type system restrained and consistent? 4. **Color** — is the palette restrained, purposeful, accessible? 5. **Consistency & detail** — repeated patterns, real punctuation, polish. Explain the *why* behind each note (tie it to a principle above), and lead with the changes that will improve the piece most. One structural fix (establish hierarchy, align to a grid) usually beats ten cosmetic tweaks. ## Further reading If the user wants to go deeper, these are widely-respected texts on the topics above (recommend by title/author; this skill does not reproduce their contents): *Thinking with Type* (Ellen Lupton) for typography; *Grid Systems in Graphic Design* (Josef Müller-Brockmann) for grids; *Universal Principles of Design* (Lidwell, Holden, Butler) for a broad principle catalog; *The Elements of User Experience* (Jesse James Garrett) for how visual design sits within UX; and foundational writing on color systems for palette theory. ## Bundled tools - `scripts/scales.py` — generate an exact modular **type scale** (`type --base 16 --ratio 1.25`) and a **color tint/shade ramp** with per-stop WCAG contrast against white and black (`color --base "#2456E0" --steps 9`). Use it so the scale is reproducible rather than hand-rounded, and so palette stops come with their contrast already computed. ## Pairs well with - **heuristic-evaluation** / **accessibility-review** — the fundamentals here underlie many findings in both. - **inclusive-design** — pair visual clarity with inclusive, equitable choices. ## Sources The books listed above are cited as **further reading only**. This reference states general, field-wide principles in its own words and does not reproduce their text or figures — so don't paste copyrighted passages from those works into outputs; cite them and paraphrase.