On density.

One scale that re-paces the whole interface without touching any component's size prop. The same row, set at three rhythms — from packed to unhurried.

Compact

data-density="compact" · 36px row

MRMaris ReyesFacial · 60 minBooked

JTJonah TateConsult · 30 minPending

E+Elin VosPeel · 45 minDone

Dense tables, power users

Default

data-density="comfortable" · 44px row

MRMaris ReyesFacial · 60 minBooked

JTJonah TateConsult · 30 minPending

E+Elin VosPeel · 45 minDone

The standard · implicit default

Comfortable

data-density="spacious" · 52px row

MRMaris ReyesFacial · 60 minBooked

JTJonah TateConsult · 30 minPending

E+Elin VosPeel · 45 minDone

Touch + reading

Density is orthogonal to size. A control keeps its own dimensions; the mode only changes the breathing room around and between rows — so the page can run dense for power users or open for touch, with no fork in the components.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait