Density
Comfortable and compact density without changing component code.
Density changes how much fits on screen without changing a single component. Comfortable suits forms and consumer flows; compact suits tables and tools people use all day.
Set the density
Each tenant has a default in its brand.json — Vela, a banking dashboard, defaults to compact. Override it with an attribute, or per region with ThemeScope:
<html data-syntara-theme="vela" data-syntara-density="comfortable"><ThemeScope theme="harbor" density="compact">
<ClaimsTable />
</ThemeScope>What changes
Density is a handful of variables. Components size themselves from these, so there is no size="compact" prop to thread through your code.
| CSS variable | Used for | Comfortable | Compact |
|---|---|---|---|
--syntara-control-height | Buttons, fields, selects, toggles | 40px | 32px |
--syntara-control-padding-inline | Horizontal padding inside controls | 16px | 12px |
--syntara-table-row-height | DataTable rows | 48px | 40px |
--syntara-card-inset | Card and dialog padding | 28px | 20px |
--syntara-section-gap | Space between page sections | 28px | 20px |
--syntara-field-gap | Space between form fields | 16px | 12px |
Type size stays the same in both densities, and so does the space scale — only the spacing components choose from it changes.
Hit targets
Compact controls are still at least 24 × 24 px, the WCAG 2.2 minimum target size (2.5.8).