Foundations

Spacing

A 4px base rhythm, used without exception. Dense product UI is designed to be dense — spacing is generous where it aids scanning and tight where it does not.

Scale

The default Tailwind numeric utilities map 1:1 to this scale. There is no other spacing value.

14pxp-1 / gap-1

1.56pxgap-1.5

28pxp-2 / gap-2

312pxp-3 / gap-3

416pxp-4 / gap-4

520pxp-5

624pxp-6 / gap-6

832pxp-8 / gap-8

1040pxpy-10

1248pxpy-12

Density

The same components serve comfortable product UI and dense research terminals through one attribute.

Preview density:

Controls

Table rhythm (--density-row)

BTC-USD109,241.00+2.10%

ETH-USD4,182.40+0.84%

SOL-USD212.07-1.32%

Semantic spacing

Three layout tokens cover page-level rhythm.

Layout spacing tokens
Token	Value	Use for
`container content`	`1216px`	Maximum width of a page's content column.
`container prose`	`704px`	Long-form reading width inside documentation.
`density-row`	`36px / 30px`	Table and list row height (comfortable / compact).
`control heights`	`28 / 34 / 40px`	Small, medium and large control sizing.

Rules

Use the gap scale on Stack and Inline.
Prefer one spacing decision per container.
Reach for data-density="compact" instead of local padding overrides.

Don't

Invent values like p-[13px].
Compensate for a wrong layout by shrinking type.
Mix comfortable and compact rhythm in one table.