Sizing

The height of a control, the widths of a page and its columns, and the radius of a corner.

Controls

Controls share one height, min-h-control, and a shorter one in dense layouts, min-h-control-dense, so that controls in a row line up.

Token	Height
--spacing-control	36px
--spacing-control-dense	32px

Widths

The widths a page and its columns are kept to.

Token	Width
--width-page	1280px
--width-page-narrow	768px
--width-column-narrow	192px
--width-column	256px
--width-column-wide	384px

Radius

rounded-control for a control, rounded-region for a region such as a card, rounded-pill for a fully rounded end.

Token	Radius	Specimen
--radius-control	6px
--radius-region	8px
--radius-pill	9999px