Spacing
The steps between things, and the heights controls take. Six spacing steps and three heights cover the whole system.
Space
Every gap and padding in the system is one of these.
| Size | Token | Value | Used for |
|---|---|---|---|
| --wr-space-050 | 4px | Icon to label. | |
| --wr-space-075 | 6px | Field padding. | |
| --wr-space-100 | 8px | Between controls. | |
| --wr-space-150 | 12px | Button padding, banner padding. | |
| --wr-space-200 | 16px | Section message and flag padding. | |
| --wr-space-300 | 24px | Modal padding, page gutters. |
Control heights
A control is one of three heights. Padding does not set height; the height token does.
| Height | Token | Value | Used for |
|---|---|---|---|
| --wr-height-compact | 24px | Compact buttons. | |
| --wr-height | 32px | Buttons, menu triggers, icon buttons. | |
| --wr-height-field | 40px | Text fields, selects, date pickers. |