Density

The design system has two densities: default and compact. Set data-density="compact" on a container and every control inside it uses the compact height. The density switch in the top bar sets it for these docs.

The three control heights in each density, side by side. These are shapes, not real buttons.

Use compact for tables, filter bars and screens people scan all day. Use default for forms, settings and first-time flows. Don't mix densities in one view.