Foundations
Density
Three row + gap pairs. Components opt in via the data-density attribute.
Tiers
density · compact
Row 1
Row 2
Row 3
28px · 6px
Data tables, file managers, dense lists.
density · cozy
Row 1
Row 2
Row 3
36px · 8px
Default app chrome — menus, toolbars, lists.
density · roomy
Row 1
Row 2
Row 3
48px · 12px
Marketing, settings, onboarding.
Opt in
Set data-density on any element. Children read --supa-row and --supa-row-gap from the cascade — components like Table, Menu, and List wire these in by default.
<Table data-density="compact">…</Table>
<Menu data-density="roomy">…</Menu>