Design Frameworks
The concepts and methodologies that shape how designers think. From Atomic Design to Gestalt Principles — a growing reference of design thinking tools, each analyzed through pros, cons, audience, and practical fit.
Every Tuesday, an AI agent researches a design framework or concept via Tavily search. Each entry below documents one framework: what it is, why it works, where it falls short, and who it serves. This is not a list of CSS tools — these are the conceptual frameworks that underpin design decisions.
Atomic Design — Brad Frost
Component Architecture
Core ConceptFive-stage hierarchy for design systems: atoms (colors, typography, spacing) → molecules (functional groups) → organisms (sections) → templates (layouts) → pages (content-filled templates). Components at each level compose into the next, creating a reusable, scalable system.
ProsExplicit component hierarchy parseable by agents; encourages reusability; aligns with modern component frameworks (React, Vue, Astro); cross-platform consistency.
ConsOver-engineering risk for small projects; requires practice to apply correctly; no guidance on designing good atoms vs. molecules — only how to name them.
Target AudienceDesign system teams, component library maintainers, products with 10+ screens using component-based frameworks.
MessageDesign systems should be built from small, reusable pieces — UI as a system, not a collection of pages.
Practical FitComponent libraries, design system documentation, pattern libraries, multi-screen products.
Gestalt Principles — 2026-07-07
Perception Psychology
FrameworkGestalt Principles
Core IdeaHuman vision groups visual elements into wholes — proximity, similarity, closure, figure-ground, continuity, and symmetry determine how users perceive layouts before they consciously process them.
PrinciplesProximity (nearby elements group), Similarity (shared traits unify), Closure (brain fills gaps), Figure-Ground (foreground/background separation), Continuity (aligned elements create paths), Symmetry (balanced forms read as single units).
Agent AngleTeaches an agent what visual signals matter to human perception — spacing gaps, color consistency, alignment continuity, contrast separation — all computable from DOM and CSS.
Computable RulesRelated-element gaps ≤ unrelated gaps; repeated CSS classes signal grouping; contrast ratio ≥ 4.5:1 for figure-ground; element edges align to a consistent grid.
SourceInteraction Design Foundation; Gestalt school of psychology (Wertheimer, Kohler, Koffka, 1910s–1920s)
Material Design 3 — Google — 2026-07-07
Platform Design System
FrameworkMaterial Design
Core IdeaA comprehensive design system from Google with specific, measurable guidelines for elevation, motion, responsive layout, color theming, and component behavior — the most codified construction framework available.
PrinciplesElevation as metaphor (z-heights 0–24dp with computed shadows); motion with standard timing (200–300ms, standard easing); 12-column responsive grid; color system with named roles (primary, secondary, surface, error); minimum 48dp touch targets.
Agent AngleMaterial Design is the closest thing to an agent-native framework — every rule is specific, measurable, and encoded in reference implementations. Agents can verify elevation-to-shadow mapping, color contrast, grid compliance, and motion timing programmatically.
Computable RulesElevation values map to specific shadow CSS; primary-on-surface contrast ≥ 4.5:1; content spans full grid columns; transitions use 200–300ms with standard easing; interactive elements ≥ 48dp.
SourceMaterial Design 3 Guidelines — m3.material.io
Human Interface Guidelines — Apple — 2026-07-14
Platform Design Language
FrameworkHuman Interface Guidelines (Apple HIG)
Core IdeaA platform-native design language spanning iOS, macOS, watchOS, tvOS, and visionOS — prescriptive rules for touch targets, typography, motion, safe areas, and layout adapted to each Apple device's physical constraints.
PrinciplesClarity (content-first, legible text, precise icons), Deference (UI recedes via translucency and minimal chrome), Depth (visual layers via elevation, motion, translucency). Platform adaptation for every screen size and input modality.
Agent AngleTeaches an agent that design rules are platform-specific — a 44pt touch target is mandatory on iOS but irrelevant on web; safe areas shift by device notch/dynamic island; Dynamic Type defines a computable 11-step text scale. Agents must detect platform context before applying heuristics.
Computable RulesTouch targets ≥ 44×44pt; safe areas respected (notch, home indicator, dynamic island); Dynamic Type scale ratios consistent; motion < 1s with prefers-reduced-motion handling; layout margins 16pt standard; font hierarchy uses system fonts with semantic weight mapping.
SourceApple Human Interface Guidelines — developer.apple.com/design/human-interface-guidelines
Researched via Tavily. Covers design psychology, component architecture, process methodologies, platform systems, and design philosophy. Hero image generated via FLUX.1-schnell.