dense-ui-metrics

Dense UI Metrics

A single source of truth for the numbers that make productive SaaS UIs feel engineered rather than hand-placed. Every value traces to an industry spec: Inter Dynamic Metrics (Rasmus Andersson) for tracking, IBM Carbon 2x grid + Material Design 3 8dp grid for spacing/density, Bringhurst / Carbon Productive sets for type. The point of encoding it is that "premium" isn't taste — it's a small set of locked relationships. Follow them and the rhythm holds; break one and the eye notices even when the user can't say why.

The model in one breath: a small set of universal laws (this file) applied at a chosen set of anchors (a regime). Laws never change; anchors slide with density. Regimes are named points on a continuous axis, not boxes every app falls into — if a design matches no preset, read its base font size and base padding off the reference and apply the laws at those numbers.

Where things live

• This file — the universal laws (grid, tracking, derived height, degrees of freedom) + the apply-loop + self-check. Read top to bottom; it's the whole method.
• references/regimes.md — the regime concept and the full property matrices (Dense + Comfortable): per-role font size, weight, line-height, tracking, padding, height. Read this when you need concrete numbers for a component.
• references/component-patterns.md — recipes for specific components that don't reduce to a single-line control: multi-line list rows, icon-only nav rails, corner- radius scale, row-separation strategy (zebra vs borders vs whitespace), inline code chips. Read this when building lists, rails, cards, or choosing radii/separators.

How to apply (the loop)

1. Pick the regime, then the component role. Regime = density anchor set (Dense / Comfortable / read-your-own). Then find the role's row in references/regimes.md — it gives size, weight, line-height, tracking, and padding at once. Don't mix values across roles or across regimes on one screen.
2. Snap every spacing value to the grid (§Spatial scale). Padding, margin, gap, offsets. No arbitrary numbers — 13px, 18px, 60px are smells. Nearest step wins.
3. Derive height, don't set it. H = L + 2·Py (Degree 4). A 36px control is 20px line-height + 2×8px, not a magic height: 36px with mystery padding. (Multi- line rows are the exception — see references/component-patterns.md.)
4. Apply tracking by font size (§Tracking). Small text loosens (positive), large text tightens (negative). Headings left at 0 look soft; body over-tightened looks cramped. This is where cheap UIs give themselves away.
5. Vary only along the degrees of freedom (§Degrees of freedom) when a design needs to breathe or compress. Those axes are the only sanctioned ways to move off the defaults without breaking rhythm.