Layout patterns and shell slots
Every screen fills the same five slots. Knowing which slot a thing lives in tells you its rung, its radius and its padding.
Shell slots
Select a slot to see what belongs in it and the tokens it takes.
Content and data canvas (default)
Where the work is: tables, boards, the Gantt. The canvas is the page rung, and everything on it sits in a card one rung up, so a card reads as a thing you can act on.
Cards take --bg-elevated and the 6px surface radius. Table rows inside are 32px with --border-subtle between them; the card’s outer edge takes --border.
- Canvas
- 16px
- Card
- 16px
- Row
- 8px, on a 32px rhythm
Density steps inward
Padding gets smaller at each level of nesting, never larger, so depth reads from spacing alone: a drawer body is 16px, a card in it 16px, a row in the card 8px.
- Label to control: 6px. Field to field: 12px. Section to section: 16px.
- Structural edges take
--border; repeating separators take--border-subtle.
Drawer anatomy
A drawer is a three-part flex column: a header, a body that is the only part that scrolls, and a docked footer on the drawer's own rung. Never absolute positioning, never a fixed body height.
Section actions
A section's action sits in its header, right aligned, where the section starts. It never trails the content, where it moves every time a row is added.