Spacing
The spacing scale and control sizes, drawn to size.
4px steps from --gw-space-1 to --gw-space-20, plus a 2px half step, multiplied by the theme’s density (0.85 compact, 1 normal, 1.2 roomy). --gw-space-N is N × 4px at normal density. Terminal UIs use cells instead.
Each bar below is the token itself, drawn in the theme, so it changes with density.
--gw-space-0-52pxHairline gaps, such as inside a toggle's track--gw-space-14pxIcon to text in a chip--gw-space-28pxIcon to text in a button or badge, gaps between chips--gw-space-312pxField and badge padding, rows--gw-space-416pxButton padding, gaps between controls--gw-space-520pxCard padding--gw-space-624pxGaps between sections of a page--gw-space-832pxEmpty states--gw-space-1248pxPage margins on wide screensSizes
Controls share a set of heights, so they line up in a row. --gw-button-scale sets any other button size.
| Control | Height |
|---|---|
Button xs, small, medium, large, xl |
24, 32, 40, 48 and 56px |
| Input and select | 40px |
| Badge | 36px, 18px icon |
| Chip | 28px |
| Toggle (segmented control) | 40px track, 32px options |
Each component page measures its own parts the same way, in its anatomy.
Focus
Focus rings sit outside a control, so neighbors keep at least --gw-space-2 between them; inside a track, such as a toggle’s, the ring is inset instead. The ring is a 2px outline in --gw-color-focus, offset by 2px: --gw-focus-width and --gw-focus-offset. Terminals use reverse video or a marker.