Different products demand different spatial densities. An e-commerce mobile shopping app benefits from generous whitespace, while a financial trading terminal requires dense data tables to fit 40 stocks on one screen.
Mature design systems support Density Modes using semantic spacing variables:
| Token | Compact (Data Heavy) | Default (Standard) | Spacious (Marketing/Consumer) |
|---|---|---|---|
space-table-cell-y | 4px | 8px | 16px |
space-button-padding-y | 6px | 10px | 14px |
space-card-padding | 12px | 16px | 24px |
By adjusting density via tokens rather than hardcoded component rewrites, the same table component can serve both enterprise analysts and casual consumers.
Level 3 · Design Tokens & Foundations