Border & Radius — Design System

Radius scale

Controls use the smaller corners, cards and previews use the middle of the scale, and larger corners are reserved for a contained feature surface.

--radius-sm6px

--radius-md8px

--radius-lg10px

--radius-xl14px

--radius-2xl18px

Token	Value	Use for
`--border-width-thin`	1px	Default boundaries, dividers, and fields.
`--border-width-strong`	2px	Keyboard focus markers or deliberate emphasis.
`solid`	Default	Stable ownership between a surface and its content.
`dashed`	Exception	Drop zones, previews, or an unfinished boundary that needs explanation.

Use one radius for the outer surface and a smaller radius for controls inside it.

Do not

Mix several unrelated corner values in one component or use a pill shape for a rectangular action.

Radius is deliberately separate from Spacing. A larger gap does not imply a larger corner.