Rhythm · Aura

Density is how the whole surface breathes — rows, pads and gaps retune in step.

Density is how the surface breathes

Density is not a font-size slider. Rows, paddings, and gaps retune together, in step, from one set of named variables — flip it here and watch the ledger tighten. (The font-size dial exists too, separately: the owner’s text size preference moves the whole minor-third scale through one multiplier, inside a 13–17px band.)

--density-row: 36px

While you slept4 receipts

23:41renamatched 12 receipts to March12 ✓

03:12marisdrafted the #204 chase — waiting on youdraft

02:40nooranswered a shipping question — resolved✓

06:02sofiqueued 2 follow-ups for your morning2

The named variables the demo above rides are the shipped ones: --density-row 36 → 30, --density-pad 20 → 14, --density-gap 12 → 8, --density-gap-lg 16 → 12, --density-pad-sm 12 → 8. Compact also tightens the table rows on its own (--table-row-h 36 → 30, --table-head-h 32 → 28), because a table is where density is actually felt.

The space scale — 4·8·12·16·20·24·32·40·48·64

--s-1

--s-2

--s-3

--s-4

--s-5

--s-6

--s-8

--s-10

--s-12

--s-16

Everything sits on the 4-grid. Density retunes the named gaps; it never invents new ones. Hit targets are named too — --hit-pointer: 36px, --hit-touch: 44px.

Radii & elevation

--r-xs

--r-sm

--r-md

--r-lg

999

--r-full

Four radii and a pill — that is the whole set. 8 · 12 · 16 do nearly all the work (controls, cards, panels); 4 is for the smallest chips and swatches, and 999 for anything that reads as a switch or a token. --r-xl exists but is deliberately also 16: the ladder stops there rather than growing a sixth step nobody can place from memory.

Shadows are light leaving the surface — --elev-rest (a hairline ring), --elev-hover, --elev-peel, --elev-peel-lift. Never darker than the peel-lift, and in dark mode the depth comes from a light inset edge rather than more black.