Meridian — density.md

Density, spacing & shell rhythm. Ranking: influences.md.
Primary absorb: Polaris task density + Fluent 4px / density multipliers + Cursor compact chrome + Linear content-over-chrome.
Typed source of truth: lib/design/shell.ts → shellRhythm (mirrored in app/globals.css).

1. Laws

1. Density follows the task — not a global aesthetic (Polaris).
2. One component, many densities — data-surface remaps CSS vars; no forked Button.
3. 4px grid — heights and pads on Fluent ramp (Layout).
4. Indexes dense; detail breathes — space groups related fields.
5. Touch floor 44px on mobile.
6. Desktop chrome may go 28px — keyboard-first.
7. No off-scale pixels — use h-control / h-row / shell-pad / shell-gap / type-*.

2. Control height scale

3. Surface remaps (shellRhythm)

Utilities: .h-control · .h-row · .shell-pad · .shell-gap · .shell-stack · .type-ui · .type-row · .type-meta · .type-label.

4. When to go denser / looser

5. Optical density tips (Linear)

• Align icons and labels — perceived density drops when misaligned
• Soften borders before removing information
• Prefer selected wash over heavy separators

6. Agent checklist

• Correct data-surface on the shell root
• Heights via h-control / h-row / --control-h*
• Type via type-ui / type-row / type-meta / type-label
• Touch targets on mobile (44px floor)
• No h-[NNpx] / off-scale text-[NNpx] / p-[NNpx]
• npm run check:shell + check:design

7. Proof

Live matrix: /meridian/theme#shell-rhythm → ShellRhythmProof.

Sources

• Polaris Pro — Increase density
• Fluent 2 Layout
• Linear UI redesign