Actual CSS
Density
`.compact` and `.spacious` establish inherited density tokens. A single class on a wrapper tightens or loosens the rhythm and control sizes of everything inside it that opts in — typography and icons never change.
Live density context
Switch the density of the panel below. One class on the wrapper changes the layout gap, the spacing helpers, and every participating component at once — no class on the children.
Same markup, different density
The exact same fragment rendered in three contexts. The only difference
is the class on the wrapper: `.compact`, nothing,
`.spacious`. The badge stays identical — its size is
intrinsic, so density leaves it alone.
.compact
default
.spacious
<div class="compact">
<button class="btn">Save</button>
<input class="input">
<span class="badge">Active</span>
<div class="alert">Alert stays fixed.</div>
</div>Local size
`.sm` and `.lg` scale one component: geometry, typography, and icons move together. They do not establish a context for unrelated children.
.btn
.badge
.input
What participates
Density is opt-in, not a global scale multiplier. Components consume the dimensions that make sense for them — controls tighten their geometry, rhythms tighten their gaps, and chrome or intrinsic components like alerts, cards, tables, accordions, and badges stay put. Compare the same set of components at default and inside a `.compact` context.
default
| Row | Value |
|---|---|
| One | 1 |
.compact
| Row | Value |
|---|---|
| One | 1 |
Geometry + rhythm — controls (.btn, .input, .select, .pagination, .tabs, .flyout menus, …) consume --control-size; spacing helpers (.py / .px / .mbs / .mbe) and .choice-card consume --density-space; layout primitives consume --gap.
Rhythm only — content rows such as .list. Dimensional size stays stable; the inner gap follows --gap.
No effect — badge, alert, card, dialog, table, accordion, and navbar keep their size. The alert and card above are identical in both columns even though the inner button shrank and the badge held its size.
Inline choices (.check, .radio, .switch) are a no-op too, and deliberately so: they sit on a line of text, so they follow --choice-control-size off the control typography, which density does not touch. Shrinking the checkbox but not its label would break the alignment density is not asking to change. Size them with --control-font-size or --choice-control-size instead.
Local overrides
When only one dimension needs tuning, configure that dimension on the layout instance instead of adding a new utility family.
default
Block padding follows --density-space (default --space-40).
tuned per dimension
Gap tightened to --space-20, padding to --space-30. The buttons keep their default size.