Breakpoint Architecture

Breakpoints are not device widths — they are the widths where your layout breaks. Setting breakpoints at 768px and 1024px because those are "tablet" and "desktop" is cargo cult design. The breakpoint should be at the width where your content no longer fits its current layout. If a three-column grid becomes cramped at 920px, the breakpoint is 920px — not 1024px because that is what some framework decided.

Our design system uses content-driven breakpoints: 480px (single-column stack — all content linearizes), 768px (two-column threshold — sidebar becomes viable), 1024px (three-column threshold — dashboard layouts activate), 1280px (wide content — charts and data tables reach optimal width), 1920px (maximum content width — beyond this, margins expand, content does not). These numbers were derived from testing our actual content — the CRM dashboard, the course layout, the signal posts — at progressively narrower widths until the layout broke.

For AI-generated assets, breakpoints define the asset variant strategy: which visual adaptations are needed at each breakpoint. A hero image at 1920px has a horizontal composition. At 480px, it needs a vertical or square crop. The breakpoint architecture determines how many asset variants each visual needs.