Table of Contents
CSS Rhythm
the repeated pattern of spacing that creates pace,
predictability, and calm
Rhythm is the pattern that emerges
when spacing repeats with intention.
It is the quiet pulse of a layout
— the way paragraphs, headings, lists,
and components create a predictable pace
as the reader moves down the page.
Rhythm is a feeling of consistency,
rather than a rule.
Rhythm tells us:
- how often spacing repeats
- how sections separate or connect
- how quickly or slowly the eye travels
- how predictable the layout feels
- how the page breathes as a whole
Rhythm is the tempo of the interface.
When we understand it,
we can describe intentions clearly.
Examples of what to say:
“Keep the vertical rhythm consistent.”
“Increase the spacing between sections to slow the pace.”
“Tighten the rhythm for a more compact feel.”
“Let headings break the rhythm slightly to signal importance.”
Rhythm is how we create a layout that
feels intentional
rather than improvised.
Why Rhythm matters when working with AI
AI can apply spacing mechanically
but miss the pattern.
Rhythm is how we guide that pattern.
When we name the rhythm, we tell AI:
- how spacing should repeat
- how sections should breathe
- how the pace should feel
- where the reader should naturally pause
- how to maintain consistency across the page
Rhythm turns spacing
from isolated decisions
into a coherent system.