# 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 | At the default radius |
| --- | --- | --- |
| `rounded-xs` | `calc(var(--radius) * 0.25)` | 1.5px |
| `rounded-sm` | `calc(var(--radius) * 0.6)` | 3.6px |
| `rounded-md` | `calc(var(--radius) * 0.8)` | 4.8px |
| `rounded-lg` | `var(--radius)` | 6px |
| `rounded-xl` | `calc(var(--radius) * 1.4)` | 8.4px |
| `rounded-2xl` | `calc(var(--radius) * 1.8)` | 10.8px |
| `rounded-3xl` | `calc(var(--radius) * 2.2)` | 13.2px |
| `rounded-4xl` | `calc(var(--radius) * 2.6)` | 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.