Design Fundamentals: Typography, Spacing, Color, Layout, and Visual Hierarchy

Design systems collapse when their foundations are fuzzy. These five areas—typography, spacing, color, layout, and visual hierarchy—act like low-level primitives. Nail them and every component that sits on top stays coherent; ignore them and you end up compensating with ad-hoc tweaks.

Typography: rhythm before ornament

1. Scale — Pick a base size (16px is still the web default) and scale typestyles with a modular ratio (e.g., 1.2 for UI, 1.333 for editorial reading). Ratios create predictable jumps so headings, body text, and captions can be swapped without rewriting CSS.
2. Leading — Comfortable reading sits near 145% of the font size for paragraphs, dropping closer to 120% for headlines. Tighten leading as the copy gets shorter. That keeps multi-line headings from feeling like separate blocks.
3. Line length — 55–75 characters per line is the range where eye-tracking studies show the least regression. Go narrower on phones by clamping to 40–55 characters so sentences do not feel like chat bubbles.
4. Contrast and weight — WCAG AA contrast (4.5:1 for body text, 3:1 for large type) remains the baseline. Weight hierarchy should avoid jumps greater than 300 weight units (400 → 900 looks cartoonish). When you need emphasis, bump weight slightly and change color or case instead of using underline, which clashes with interactive states.

Spacing: ratios keep components honest

Spacing tokens work like a drum machine—they keep every beat on time. Start with a base unit (4px or 8px) and multiply so padding, gaps, and margins stay in sync. Two practical guardrails:

• Vertical rhythm — Use larger multiples (24–48px) between sections and smaller ones (8–16px) within components. This lets you collapse or expand sections responsively without recomputing per-breakpoint spacers.
• Proximity logic — Closer elements are perceived as related. Keep controls that act together within 12–16px, but separate destructive actions by 24px or more to prevent accidental taps. When spacing tokens are consistent, you implicitly encode those relationships.

Color theory: palette first, states second

1. Roles over swatches — Define tokens like text-primary, surface, accent, negative. Map HSL values to those roles so the palette can evolve without rewriting every component.
2. Temperature balance — Saturated accents burn out the eye if the base surface is also high-energy. Pair warm accents with neutral or cool backgrounds, then use subtle gradients or softer tints for large fills so attention lands on actions instead of chrome.
3. State ladders — Each interactive color needs five stops: default, hover, pressed, disabled, focus ring. Build these by adjusting luminance by ±10–15% per state instead of choosing random shades. Add at least one data visualization ramp (5–7 steps) with perceptual uniformity to avoid misleading deltas.
4. Accessibility — Beyond contrast, check for color reliance. Every status (success, warning, error) should add an icon, pattern, or copy so color-blind users are not blocked.

Layout: grids plus flow

• Grid type — Apps benefit from a 4 or 8-column fluid grid where gutters collapse down to 16px on mobile and expand to 32px on desktop. Marketing pages can stretch to 12 columns for editorial flexibility.
• Container width — Cap reading containers around 1200px. Wider layouts should split content into modules instead of letting text span the full viewport.
• Alignment discipline — Pick a primary alignment axis for each section (left, center, split). Reusing the same axis across dense clusters reduces the number of micro-decisions a reader makes.
• Responsive fallbacks — Design mobile first, but define breakpoints using content needs. When a component breaks, either stack vertically, introduce carousels, or collapse into accordions. Document those fallback rules with the component so engineers don’t improvise.

Visual hierarchy: choreograph attention

1. Signal vs. noise — Every surface should have one “hero” element (headline, metric, CTA). Make it at least 2× larger or higher-contrast than secondary items so attention locks immediately.
2. Progressive disclosure — Lead with key metrics or statements, then offer detail. Accordion patterns, hover reveals, or “more” links prevent overwhelming novice users while keeping depth available.
3. Motion and depth — Subtle motion (150–250ms) helps the brain see relationships: sliding panels imply spatial change, fading implies state change. Shadows or elevation tokens should only appear on interactive elements, reinforcing clickability.
4. Consistency loops — Establish rules (e.g., metadata always sits above the title, supporting links always follow CTA). Repetition trains users faster than documentation can.

AI-Specific Guidance: make fundamentals machine-readable

1. Translate tokens into constraints — Express your typography, spacing, and color rules as JSON objects so an agent (or generation API) can enforce them. A simple structure like { "typeScale": [14, 16, 20, 28, 40], "spacing": [4, 8, 16, 24, 32], "palette": { "surface": "#F7F3EE", "ink": "#1F130D" } } removes ambiguity.
2. Seed prompts with proof requirements — When drafting copy or layouts through an AI assistant, include directives such as “every hero must cite a metric and CTA” or “include before/after bullet pairs.” It keeps generated hierarchy aligned with the human-authored standards above.
3. Automate QA — Pair each section’s checklist with quick scripts: contrast checks can run via Axe, spacing integrity via screenshot diffing, hierarchy checks via DOM queries that confirm heading order. The tighter the loop, the less time you spend manually policing agent output.
4. Store feedback in memory — When you override an AI-generated layout (e.g., spacing felt too loose), capture that correction and feed it back into the prompt context. Over time the agent internalizes your preferred ratios and interaction patterns.

Takeaways you can plug into any system

• Lock typographic scales, spacing tokens, and color roles before drawing components.
• Document state ladders and responsive fallbacks where developers will reference them.
• Treat hierarchy as choreography: one hero, consistent supporting cast, and intentional spacing beats that guide every screen.

These fundamentals keep the “invisible” scaffolding of your product steady so teams can ship quickly without creating visual debt.