-
Notifications
You must be signed in to change notification settings - Fork 35
Visual Rhythm Guide
A page where every section looks the same becomes visually monotonous. This guide explains how to create rhythm and variety while staying within StyleSeed's constraints.
Bad rhythm:
┌─────────────┐ ← same
├─────────────┤
┌─────────────┐ ← same
├─────────────┤
┌─────────────┐ ← same
├─────────────┤
Good rhythm:
┌═══════════════════════┐ ← Type D: Hero (tall, p-8, watermark)
└═══════════════════════┘
┌──────┐ ┌──────┐ ← Type B: Grid (short, 2-col)
└──────┘ └──────┘
┌──────┐ ┌──────┐
└──────┘ └──────┘
┌═══════════════════════┐ ← Type A: Chart card (medium, with divider)
│ ~~~ │
│ ──────────────── │
│ stat stat stat │
└═══════════════════════┘
▸ card ▸ card ▸ card → ← Type C: Carousel (horizontal, scrollable)
┌═══════════════════════┐ ← Type A: List (compact rows)
└═══════════════════════┘
Each section type naturally produces a different height:
| Section Type | Approximate Height | Visual Weight |
|---|---|---|
| Type D Hero | ~180px | Heavy -- draws attention |
| Type B Grid (2x2) | ~280px total | Medium -- distributed weight |
| Type A Chart | ~300px | Medium-heavy -- chart dominates |
| Type A List (3 items) | ~200px | Light-medium |
| Type C Carousel | ~160px | Light -- horizontal expansion |
| Type A Donut | ~350px | Heavy -- circular focal point |
Rule: Never stack two sections of the same height back to back.
Single cards (mx-6) "float" with visible page background on both sides. Grid/carousel sections (px-6) feel "full-width". Alternating these creates a breathing rhythm:
mx-6 ← card floats, breathing room
px-6 ← grid fills edge to edge
mx-6 ← back to floating
px-6 ← carousel stretches wide
mx-6 ← floating again
Horizontal dividers (border-t) are only allowed inside a card, to separate chart content from stat grids. This creates internal rhythm within a card:
{/* Chart area */}
<div className="h-40 -mx-2 mb-6">
{/* chart */}
</div>
{/* Divider + stats -- creates a visual "second floor" */}
<div className="grid grid-cols-3 gap-3 pt-5 border-t border-surface-muted">
<StatCell label="Gas" value="1,648" unit="/L" />
<StatCell label="Diesel" value="1,520" unit="/L" />
<StatCell label="Kero" value="1,480" unit="/L" />
</div>The information pyramid naturally creates text size variety:
Hero: 48px bold ← loud
KPI Grid: 36px bold ← strong
Chart: 18px title + chart visual ← medium
List: 14px body ← quiet
A carousel (Type C) is the only section that scrolls horizontally. Insert it between vertical-scroll sections to break the "endless vertical column" feel:
[vertical sections]
→ carousel cards scroll right →
[vertical sections]
Within Type A cards, content can vary:
| Card Content | Visual Character |
|---|---|
| Chart + stat grid | Heavy, data-rich |
| Donut + legend | Circular focal point |
| Ranked list | Compact, dense |
| 3 list items with status dots | Airy, status-focused |
| Anti-Pattern | Why It's Bad | Fix |
|---|---|---|
| 4 Type A cards in a row | Monotonous vertical wall | Insert Type B grid or Type C carousel between them |
| KPI grid with all same-icon cards | Repetitive silhouette | Use distinct icons for each metric |
| All sections the same height | No visual hierarchy | Vary by using different section types |
| Carousel as first section | Hero should anchor the page | Always start with Type D hero |
| Two chart cards back to back | Visually heavy, confusing | Separate with a list or grid section |
Hero -> Grid -> Chart -> Carousel -> List -> Ranked
Hero -> Chart -> Donut -> List
Hero -> Grid -> Carousel -> Chart
- First section: Type D Hero (always)
- Second section: Type B Grid (almost always)
- Never adjacent: two Type A chart cards
- Last content section: usually the lowest-importance list or ranked data
-
Final element:
<div className="h-8" />for scroll padding