Foundations
Shape and depth
Radius is concentric: an outer radius equals the inner radius plus its padding. Borders describe structure; shadows describe elevation.
Radius
rounded-chip6px. Chips, kbd, small squaresrounded-control8px. Buttons, inputs, menu itemsrounded-card12px. Cards, popoversrounded-dialog16px. Dialogs and sheetsConcentric
A 12px popover with 4px padding holds 8px items.
Log timeNew invoiceOpen portal
Elevation
shadow-cardResting cards and secondary buttonsshadow-popPopovers, menus, dragged cardsshadow-dialogDialogs and drawersDensity
Controls and rows follow the density toggle in the toolbar.
h-control-smh-control-mdh-control-lgh-row