/dense-ui-metrics

name: dense-ui-metrics
description: >-
  Mathematical spacing, sizing, weight, line-height, letter-spacing, radius, and
  padding rules for "productive" SaaS interfaces, across density regimes: Dense
  (Linear / Doppler / Raycast / Vercel), Comfortable/roomier (Cal.com style), and
  anything in between. Use this whenever you are building OR refining any such UI —
  dashboards, data tables, sidebars, toolbars, filter bars, forms, inputs, buttons,
  badges/pills, KPI tiles, nav items, list rows, icon rails — or whenever you're
  picking font-size, weight, line-height, letter-spacing (tracking), padding, gaps,
  corner radius, or control heights, even if the user doesn't name a grid. Trigger it
  when spacing "looks off," when values are arbitrary (p-[13px], gap-18px, radius-7px,
  height: 60px), when snapping a design to an 8px grid, or when the user mentions
  tracking, density, Inter/SF Pro metrics, or wants a component to feel "tight" and
  premium. Prefer this over eyeballing numbers.

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.

Fonts

• **UI / data:** neutral neo-grotesque sans with a high x-height — Inter, SF Pro Text,

IBM Plex Sans. High x-height is what keeps 12–14px text legible at density.

• **Code / tokens / IDs:** tabular monospace where every glyph is 1:1 — JetBrains Mono,

SF Mono, Fira Code. Use for anything that aligns in columns (secrets, hashes, numbers in tables) and for inline code chips (see `references/component-patterns.md`).

Tracking (dynamic letter-spacing)

Tracking is a function of size, from the Inter metrics spec:

Tracking(z) = -0.0223 + 0.185 · e^(-0.1745·z)     # z = font size in px, result in em

You rarely need to compute it — this lookup covers the common sizes (the formula evaluated):

| Size | Tracking | | Size | Tracking | |---|---|---|---|---| | 10px | `+0.010em` | | 18px | `-0.014em` | | 11px | `+0.005em` | | 20px | `-0.017em` | | 12px | `0.000em` | | 24px | `-0.020em` | | 13px | `-0.003em` | | 28px | `-0.021em` | | 14px | `-0.006em` | | 32px | `-0.022em` | | 16px | `-0.011em` | | 40px+ | `-0.022em` (asymptote) |

Rule of thumb: **≤12px loosens, ≥14px tightens, and it never goes past ≈-0.022em.** At 12–14px the delta is sub-pixel — real but subtle; at 20px+ it's clearly visible and is the single highest-leverage fix for a heading that looks unrefined.

Spatial scale (8px grid + 4px micro-unit)

All padding, margin, gap, and layout offsets come from here:

`4 · 8 · 12 · 16 · 24 · 32 · 48 · 64px` (4px is the micro-unit for icon-to-text and pill internals).

Four roles, each ~1.5–2× the previous (Degree 3):

• **S1 — micro offset:** 4px (icon↔label, pill inner padding)
• **S2 — element gap:** 8–12px (between related controls, form fields)
• **S3 — container padding:** 16–24px (card/panel interior)
• **S4 — layout gap:** 32–48px (between sections/regions)

Dark-surface detail: on deep backgrounds (`#0d0d10`–`#16171a`) use translucent hairline borders (`rgba(255,255,255,0.08)`–`0.1`) rather than solid greys — they read as one crisp pixel instead of a muddy line.

Degrees of freedom

The defaults aren't a straitjacket. There