13-Rhythm — Vertical Rhythm
Establish consistent vertical spacing and baseline rhythm.
Baseline Grid
All vertical spacing aligns to a baseline grid for visual harmony.
Heading with Rhythm
This paragraph follows the baseline grid. Notice how spacing maintains consistent rhythm throughout the content.
Another paragraph demonstrating vertical rhythm alignment.
Line Height Scale
Consistent line heights that maintain vertical rhythm.
| Token | Value | Use Case |
|---|---|---|
--ss-leading-none |
1 | Single-line text |
--ss-leading-tight |
1.25 | Headings |
--ss-leading-normal |
1.5 | Body text |
--ss-leading-relaxed |
1.625 | Long-form content |
--ss-leading-loose |
2 | Large display text |
Vertical Spacing
Flow spacing between block elements.
Space-2 gap below
Space-4 gap below
Space-6 gap below
Final element