Radius and spacing

The corner radius scale and the spacing conventions of a dense interface.

Radius

Every radius derives from one variable, --radius (0.375rem, 6px), smaller than the shadcn default for the flatter look of an operations console.

Utility	Value	Sample
`rounded-xs`	`1.5px`
`rounded-sm`	`3.6px`
`rounded-md`	`4.8px`
`rounded-lg`	`6px`
`rounded-xl`	`8.4px`
`rounded-2xl`	`10.8px`
`rounded-3xl`	`13.2px`
`rounded-4xl`	`15.6px`

Controls (buttons, inputs, selects) use rounded-lg.
Cards, popovers, menus and table containers use rounded-md or rounded-lg.
Dialogs use rounded-xl.
Pills (rounded-full) are for avatars, dots and badges with pill.
When nesting rounded elements, the inner radius is the outer radius minus the padding between them, or the corners look uneven.

Spacing

Spacing uses the Tailwind 4px scale. The density of the platform comes from a few fixed steps:

Element	Value
Control height (default / sm / xs)	32px / 28px / 24px (`h-8`, `h-7`, `h-6`)
Table row	44px for virtualized tables; cells `px-3 py-1.5`
Card padding	16px, 12px for `size="sm"`
Page gutter	16px (`px-4`)
Gap between related controls	6px to 8px (`gap-1.5`, `gap-2`)
Gap between sections	24px to 32px (`gap-6`, `gap-8`)

Use the scale, never an arbitrary pixel value, for spacing. Arbitrary values are acceptable only for structural math (calc(100vh-3.5rem)) and fixed widths of a specific layout.