Design System

Design System

Borders and corners

Borders and corners: radius
TokenValueSampleUse it for
radius8pxThe only corner: every Tailwind radius step collapses to it, rounded-full included. Buttons, slabs, chips, dialogs, inputs.
radius-code4pxInline code and kbd-sized marks, the one place the corner is tighter.
Borders and corners: width
TokenValueSampleUse it for
bw2pxDefault line: inputs, code, tables, the table-of-contents rule.
bw-thick3pxEdge of a slab, a button and the header rule: the signature heavy line.
focus-ring-width4pxWidth of the outer focus ring where it is drawn as an outline.