A density-aware spacing/radius scale; row-icon and a few chip sizes are documented off-grid exceptions.
Tokens
--nx-space-*--nx-radius-*--nx-border--nx-border-control--nx-border-emphasis--nx-row-icon
Radius scale
| Name | Value |
|---|
| Row icon | 8px |
| Button / input | 10px |
| KPI tile | 12px |
| Card | 18px |
| Pill | 999px |
Padding scale
| Name | Value |
|---|
| Card body | 18px |
| Header | 16px 18px |
| KPI tile | 14px 16px |
| Input | 9px 12px |
| Button | 9px 15px |
Accessibility
- Density mode (data-nx-density=compact|comfortable) only remaps control/cell/menu/tab/panel/gap role tokens — radii, border widths, focus rings, checkbox/radio/switch sizing, row-icon, and badge/pill padding stay fixed by design (kit.css's density-invariant block).
Do / Don’t
- ✓Do: Use the density role tokens (--nx-control-pad-*, --nx-cell-pad-*, …) inside new components.✕Don’t: Don't remap --nx-row-icon or --nx-radius-* by density — they're documented off-grid exceptions.
View in spec →
View source: registry.js ↗
