Space
A 4px grid, one 12px inset for every region, 38px headers, 32px controls and 40px rows.
Scale
space-0-5, 2pxspace-1, 4pxspace-1-5, 6pxspace-2, 8pxspace-3, 12pxspace-4, 16pxspace-5, 20pxspace-6, 24pxspace-8, 32pxspace-10, 40pxinset, 12px
Controls and rows
26px32px36px
compact-daily
export-billing
vacuum-events
| Token | Size | Used by |
|---|---|---|
--head | 38px | panel-head: frame header, table title, log viewer, code window, framed chart, dialog, sheet |
--control-sm | 26px | button sm, tag button, toolbar action |
--control | 32px | button, input, select, tab |
--control-lg | 36px | button lg, input lg, select lg |
--row | 40px | table row, list row, tool-call row |
--row-sm | 32px | menu item, table head, dense table, small tool-call row |
--icon | 16px | button, input, menu item |
Where each space goes
| Where | Space |
|---|---|
| Region header (panel-head): height, sides, name to meta | h --head (38px), px-inset (12px), gap-3 (12px) |
| Header icon buttons | --control-sm (26px) ghost, gap-2 (8px), pulled 5px out so the last glyph sits on the 12px inset |
| Region body (FrameBody) | p-inset (12px) all round, gap-3 (12px) between items |
| Region footer (Frame, Table, Chart) | p-inset (12px) all round, gap-2 (8px) between buttons |
| Table cells | first ps-inset, last pe-inset (12px); between columns ps-3 (12px) |
| Table rows | head --row-sm (32px), body --row (40px), size sm --row-sm (32px) |
| Toolbar row under a header (Table, LogViewer) | min-h --row (40px), px-inset (12px), py-1.5, gap-2 (8px) |
| Log line | px-inset (12px), gap-3 (12px) between cells; the list py-inset (12px) |
| Code line (CodeWindow, CodeBlock) | gutter: the digits plus px-inset (12px) each side; line pe-inset; body py-inset (12px) |
| Tool-call row header | min-h --row (40px) or --row-sm, px-inset (12px), gap-3 (12px) |
| Tool-call row body | p-inset (12px) all round, gap-3 (12px) |
| Between steps in a tool-call stack | gap-5 (20px), room for the tab above each box |
| Status-strip cell | p-inset (12px), gap-0.5 label to value |
| Data-list row | min-h --row (40px), py-2.5; framed px-inset (12px); label to value gap-x-6 (24px) |
| Field inset: Input, Select, Combobox, Textarea | text --field-inset: 10px at 32, 7 at 26, 11 at 36; a glyph, key cap or caret (size - its height) / 2; Textarea 10px, py-1.5 |
| Button padding | sm px-2.5 (10px) at 26px, default px-3 (12px) at 32px, lg px-4 (16px) at 36px; icon to label gap-1.5 |
| Menu, Select or Combobox list | no popup padding; rows --row-sm (32px), text on --field-inset (10px), a glyph (32 - 16) / 2 = 8px in, icon gap-2 (8px) |
| Command list | rows --row (40px) on --inset (12px), the search row's, so icons sit under its glyph |
| Prompt input | controls 26px, p-1.5 (6px) inside the edge; text on Attach's glyph ink, pt-2 |
| Popover | p-4 (16px), gap-3 (12px); a toggletip p-3 (12px) |
| Dialog and Sheet header | panel-head: h --head (38px), px-inset (12px); the X a 26px ghost in panel-head-actions |
| Dialog and Sheet body and footer | p-inset (12px) all round; body gap-3 (12px), rows py-2.5 with the first and last flush; footer gap-2 (8px) |
| Between controls in a row | gap-2 (8px) |
| Between groups in a body | gap-4 (16px) |
| Between sections | gap-6 (24px); between page regions --space-8 (32px) |
Columns on a shared rule
Sourcerule-col
Transformrule-col
Sinkrule-col
Source
Sink
Tokens
22 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
--inset- 12px
--control-sm- 26px
--control- 32px
--control-lg- 36px
--row- 40px
--row-sm- 32px
--head- 38px
--icon- 16px
--icon-sm- 14px
--marker- 8px
--cap- 0.7em
--rail- 12px