Skip to content
Primitiv home
Framework
Consumption mode
Search the docs

CONCEPTS

Density

Density is how tightly the interface is packed. Primitiv has four settings, and changing one attribute reflows everything beneath it.

Most component libraries are tuned for one kind of product. Use them for something denser and everything feels bloated. Use them for something roomier and it feels cramped. Four settings is a statement that proportional control is a feature rather than an afterthought.

The four modes

Dense
For data-heavy screens where fitting more on screen is the point: admin tables, trading screens, dashboards.
Compact
For productive application UI.
Comfortable
The default, and suits most product interfaces.
Spacious
For marketing pages and editorial content, where room to breathe is the point.

Dense

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.

Compact

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.

Comfortable

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.

Spacious

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.

Same components. Same markup. One attribute.

How to set it

Density is one attribute, and it is inherited. Set it high up for the whole application:

<body data-density="comfortable">

Or set it on any part of a page that needs to be different:

<div data-density="dense">  <!-- a packed table inside an otherwise roomy page --></div>

Anything inside picks it up. That is the whole API.

data-density="spacious"

Workspace

data-density="dense"

The nearest setting wins.

Why radius follows

Corner radius is not a value assigned per size. It is a fraction of the control's height, so when density changes the height, the radius follows on its own:

radius = height × 0.1875

That fraction is fixed across the whole system, and the result snaps to the nearest step on the radius scale — which is why Comfortable and Spacious, 8px apart in height, share a radius of 8. Controls stay in proportion at every density without a fourth table of values for someone to keep in step.

What density does not change

Density changes proportion, not identity. Colours do not move. Font families do not change. Component behaviour is untouched, so a keyboard shortcut works the same at every setting.

It is also separate from a component's own size prop. Size picks which slot on the scale a component uses. Density scales the whole scale. A medium button in Dense is smaller than a medium button in Spacious, and both are still medium.