Principles
Continuity
Continuity is the tendency to see elements arranged along a single line or curve as one uninterrupted flow rather than separate pieces.
Definition
Continuity is the tendency to see elements arranged along a single line or curve as one uninterrupted flow rather than a set of separate pieces. Your eye prefers to follow a path that continues smoothly over one that suddenly changes direction, so items sitting on the same alignment line get read naturally as a single thread. A list whose text lines up neatly along one left edge, letting your gaze slide from top to bottom, is a classic example of continuity at work. The moment several elements share a common line, they read as belonging to one flow instead of standing alone. And because this pull works even when the elements are not packed tightly together, it is clearly distinct from proximity, which groups things by closeness.
Why does it matter?
Continuity lays down a smooth path for the way users scan your content. When elements share a common alignment line or flow, the eye moves without stumbling and can naturally predict what comes next. This is exactly why a carousel runs along one horizontal axis, and why timelines and step indicators are laid out along a single line. When alignment is inconsistent, the opposite happens: the eye has to hunt for a fresh anchor point at every item, and those tiny breaks pile up until the screen feels scattered and unsteady. Well-kept continuity means users never have to wonder where to start or where to head next, and that makes an especially big difference on long lists or multi-step flows, giving your layout the pull that keeps people reading all the way through.
Common mistakes
- Using a different alignment for each element and breaking the flow of the eye. When some rows sit flush left and others sit centered, the gaze has to find a new starting point every single time, which is tiring to read, and the longer the list gets, the more noticeable that strain becomes.
- Adding a layout that suddenly changes direction in the middle in the name of emphasizing flow. Once continuity is broken, users stop at that point and lose the context and rhythm they had been following, which makes it hard to pick the flow back up.
- Building a step indicator but letting each step sit slightly off from the others. Even a tiny wobble in the axis collapses the impression of one connected flow, so the order gets confusing and progress is easy to misread.
Practical tips
- Place related elements along a shared line, meaning a grid or an alignment axis. Simply sharing a single axis lets the eye continue smoothly, and the structure looks tidy even without any extra decoration.
- When you show steps or a sequence, pick one directional axis and hold it from start to finish. When the direction of the flow stays consistent, users can intuitively track where they are along the way.
- If there is a point where you want to pause the flow, place deliberate whitespace or a divider there and nowhere else. Deciding for yourself where continuity carries on and where it stops creates a rhythm that never feels monotonous, and the break itself reads like the start of a new section, giving even long screens a natural sense of pacing.
Ask your AI
In the [screen type — e.g. account settings list / input form] code below, find every mismatched text-align and every different left starting position across the elements. Then realign the related items to a single alignment axis — one shared left edge — so the eye slides straight down without stumbling. Don't mix alignments (some rows flush left, others centered); make labels, values, and descriptions all share the same vertical axis. Group them by sharing a common line rather than by cramming them close together (continuity, not proximity), and give me a before→after table of what you changed.
Audit the step-indicator / timeline code below and find any dot, number, or label that sits slightly off the axis. Snap every step marker onto exactly one shared axis — the same horizontal center line if it's horizontal, the same vertical line if it's vertical — with 0px of drift, because even a tiny wobble collapses the sense of one connected flow. Lock the flow to a single direction (e.g. left→right) and hold it from the first step to the last, with no direction change in the middle. Draw the connecting line through the same center of each marker so the order and progress read at a glance, and list the coordinates and alignment values you fixed.
For this [long screen — e.g. landing page / long article], set the default flow so the content runs down one continuous alignment axis. But place your break points only at the section boundaries you actually intend, and put visible whitespace or a divider only there, so each break reads like the start of a new section. Keep the shared alignment line steady everywhere else — don't let the axis wobble — so the eye never stumbles except where you meant it to. Then give me the section plan, with your reasoning for where continuity carries on and where you cut it.