Layouts
Density
Two settings for how much fits on a screen. Compact multiplies the space inside and between blocks by 0.86 — cards, rows, tables and lists all tighten together. Text sizes, tap targets and corner radii never change.
Your setting
Applies to the whole site and the dashboard, and is remembered. It is also in the gear menu.
Side by side
The same blocks in each setting, measured live.
Comfortable
Budget €0
| Job | Status | Budget |
|---|---|---|
| Casa do Monte | Active | €98,000 |
| Clinic fit-out | Active | €61,000 |
| Clinic roof terrace | Planning | €38,000 |
| Quinta restoration | Active | €84,000 |
Card —px · figure —px · table —px
Compact
Budget €0
| Job | Status | Budget |
|---|---|---|
| Casa do Monte | Active | €98,000 |
| Clinic fit-out | Active | €61,000 |
| Clinic roof terrace | Planning | €38,000 |
| Quinta restoration | Active | €84,000 |
Card —px · figure —px · table —px
What changes
| Space | Comfortable | Compact |
|---|---|---|
| Card padding | 24 × 26px | 21 × 22px |
| Between blocks and rows | 16px | 14px |
| Table and list row padding | 14px | 12px |
| Figure card height | 140px | 120px |
| Text, buttons, tap targets, radii | — | unchanged |
Spacing that should follow density is written calc(16px * var(--d)). --d is 1, or 0.86 under [data-density='compact'] — on the page or on any one block.