Visual Rhythm

What It Is

Repetition and variation creating a visual beat across a page, similar to rhythm in music.

Creating Rhythm

1. Regular rhythm: Same element at equal intervals (card grid, list items)
2. Alternating rhythm: Two patterns alternating (left-image/right-image sections)
3. Progressive rhythm: Elements that change gradually (growing, shrinking, fading)
4. Random rhythm: Intentional irregularity (masonry, organic layouts)

Techniques

• Consistent spacing between sections creates steady rhythm
• Varied section heights create visual interest
• Full-bleed images break rhythm intentionally (creates emphasis)
• Typography scale creates rhythm through heading size variation
• Color accents at regular intervals create visual anchors

Pacing

• Dense sections followed by spacious ones (like music dynamics)
• Important content gets more space (slower pace, more attention)
• Lists and grids are fast-paced (scanning mode)
• Hero sections are slow-paced (absorption mode)

Rules

1. Establish a rhythm, then break it intentionally for emphasis
2. Accidental rhythm breaks feel like errors
3. Section transitions should feel intentional
4. The scroll experience should have variation, not monotony