Breakpoints

Breakpoints are the specific viewport widths at which a responsive design changes its layout, typically set with CSS media queries. Below a breakpoint, content stacks into a single column for mobile; above it, a grid opens up for tablet or desktop.

In a Design System, breakpoints are usually tokenised rather than hardcoded, so every component references the same set of values instead of each developer picking their own numbers. A typical set: 640px (mobile), 768px (tablet), 1024px (small desktop), 1440px (large desktop).

The discipline: base breakpoints on where your content actually breaks, not on specific device widths. Devices change constantly, your content's natural break points don't. Test by resizing the browser and watching for the point where text lines get uncomfortably long or short, or where a grid starts leaving awkward gaps.

Common mistake: too many breakpoints. Most systems need 3 to 5. More than that becomes a maintenance burden and a sign the underlying layout isn't flexible enough. Combine breakpoints with fluid typography where you can, so type scales smoothly and only layout structure needs a hard breakpoint.