Density

Bias generous over tight. Customer.io product UI is calm-dense, not roomy and not cramped.

When two sanctioned values would both work — padding, gap, row height, field spacing, surface margin — choose the more generous one. Close enough that grouped elements relate, far enough that surfaces breathe. If a surface looks correct but cramped, it's wrong. A few pixels of extra room across a screen is the difference between "the agent shipped it" and "a designer touched it".

The bias is one step, not two. Don't jump to space-400 because more is more — this is calm density, not roomy density.

Where the bias lands

• Content surfaces (cards holding body copy, settings panels, feature moments) — default to space-300 (24px) padding, not space-200. The latter is the compact floor; reach for it only when the surface lives in a dense grid.
• Form field gaps — 24px is the baseline; lean to 28–32px when fields carry helper text or when the form is part of an onboarding flow.
• Field-group gaps — 32px baseline; reach for 40px when groups represent distinct stages of a flow.
• Table rows — 36px default; consider 40px when row content includes multi-line cells or paired text-and-meta.
• Stack gaps inside surfaces — space-200 baseline; space-300 when children are reading-weight (headings, body paragraphs) rather than scanning-weight (rows, chips, metric tiles).

Concrete defaults

• Body text: text-product-p (sans, 14px, regular weight, 20px line-height).
• Small text: text-product-ps for metadata and helper text; text-product-pxs for timestamps and captions.
• Headings: text-product-h1 through text-product-h4.
• Table row height: 36px default, 32px compact (toggle when >50 rows), never below 32px.
• Tabular numerals on all numbers.
• Right-align numbers, left-align text, center-align icon-only columns.
• Truncate with tooltip over wrap in tables — except where reading the full value matters (subject lines, names).
• Form density: 36px inputs, 8px label-to-input gap, 24px between fields, 32px between field groups.

Set density at the surface, not the row

Density should be a property of the surface, applied once at the root, and inherited downward. Mixing densities inside a single surface — compact rows with relaxed padding, for example — reads as inconsistency, not refinement. If two density zones genuinely belong together, split them into two surfaces.

See Refinement levers for the bounded vocabulary of density adjustments and the ship-solo vs. design-review thresholds.