Vertical Rhythm
Every size, spacing, and line-height token in ln is derived from two values: an 8px base grid and a 24px line grid.
The two grids
The entire spatial system rests on two Sass variables:
| Variable | Default | Role |
|---|---|---|
$g | 8px | Base grid step — the smallest unit. All horizontal spacing, padding, and component dimensions snap to multiples of this value. |
$r | 24px | Line grid step (3 × $g) — every line-height, vertical margin, and section spacing is a multiple of this value, keeping text baselines aligned across columns. |
Spacing tokens
The space token scale counts 8px steps. The token name is the multiplier, so --s3 equals 3 × 8px = 24px (one full line).
| Token | Value | Grid lines |
|---|---|---|
--s-h | 4px (0.25rem) | — |
--s1 | 8px (0.5rem) | — |
--s2 | 16px (1rem) | — |
--s3 | 24px (1.5rem) | 1 line |
--s4 | 32px (2rem) | — |
Use --s-h only for inline internals such as badge padding or tag gaps — it sits below the base grid.
Line heights
Every type token defines a line-height that is a whole multiple of 24px, so text stays on the line grid regardless of font size.
| Token | Size | Line-height | Lines |
|---|---|---|---|
display-1 | 80px | 96px | 4 |
display-2 | 56px | 72px | 3 |
h1 | 40px | 48px | 2 |
h2 | 32px | 48px | 2 |
h3–h5 | 20–16px | 24px | 1 |
body, lead | 16–18px | 24px | 1 |
body-sm, code | 14px | 24px | 1 |
h6, body-xs, meta | 12px | 16px | — |
The 12px tokens use a 16px line-height that sits off the 24px grid. These are reserved for component internals where the surrounding box padding restores alignment.
Component heights
Interactive controls snap to the base grid so they align with text beside them:
| Size | Height | Grid steps |
|---|---|---|
| Small | 32px | 4 × 8px |
| Default | 40px | 5 × 8px |
| Large | 48px | 6 × 8px (2 lines) |
Customising the grid
Override $g and $r to change the grid density. The entire token scale recalculates automatically.
@use 'ln/scss' with (
$g: 4px, // tighter grid
$r: 16px // shorter line height
);Keep $r as a whole multiple of $g so that line-grid multiples remain on the base grid.
Further reading
- Why is Vertical Rhythm an Important Typography Practice? — Zell Liew on the reasoning behind vertical rhythm
- Compose to a Vertical Rhythm — Richard Rutter’s foundational article on 24 ways
- 8-Point Grid: Vertical Rhythm — Elliot Dahl on combining the 8px grid with vertical rhythm
Grid overlay
Toggle the baseline grid overlay to verify alignment. Click the grid button at the bottom-right corner of any page, or add the show-grid class to <body>.
<body class="show-grid">…</body>The overlay draws horizontal lines at every 24px step and vertical lines at every 8px step, using the primary colour at low opacity.