Space
A 4px grid, 32px controls and 36px rows.
Scale
space-0-5, 2pxspace-1, 4pxspace-1-5, 6pxspace-2, 8pxspace-3, 12pxspace-4, 16pxspace-5, 20pxspace-6, 24pxspace-8, 32pxspace-10, 40px
Controls and rows
Refund agent
Triage agent
Release agent
| Token | Size | Used by |
|---|---|---|
--control-sm | 26px | button sm, chip, footer action |
--control | 32px | button, input, select, segmented control |
--control-lg | 36px | button lg, prompt input field |
--row | 36px | table row, item, menu item |
--icon-sm | 12px | button sm, badge |
--icon | 14px | button, input, menu item |
--icon-lg | 16px | button lg |
The card inset
--shell-inset, 3px
Tokens
36 tokens
--space-0-5- 2px
--space-1- 4px
--space-1-5- 6px
--space-2- 8px
--space-3- 12px
--space-4- 16px
--space-5- 20px
--space-6- 24px
--space-8- 32px
--space-10- 40px
--shell-inset- 3px
--shell-foot-inset- 6px
--control-sm- 26px
--control- 32px
--control-lg- 36px
--row- 36px
--icon-sm- 12px
--icon- 14px
--icon-lg- 16px
--overlay-sm- 400px
--overlay- 480px
--overlay-lg- 640px
--popover- 288px
--toast- 360px
--menu-min- 192px
--menu-row- 32px
--menu-row-sm- 28px
--popup-max- 320px
--tooltip-max- 256px
--label-col- 160px
--progress-bar-sm- 4px
--progress-bar- 6px
--progress-bar-lg- 8px
--progress-sweep- 32%
--measure- 68ch
--measure-hint- 60ch