Space
How much room goes between things, in steps of 4px.
Scale
- space-0-52px
- space-14px
- space-28px
- space-312px
- space-416px
- space-520px
- space-624px
- space-832px
- space-1040px
- space-1560px
- space-2080px
- space-30120px
In a card
Create agent
Gives the agent a prompt and the tools it may call.
Namesupport-agent
Spacing and rhythm
- Card text
- 16px inset (px-4). Rows in a PanelBody sit 4px in, so they take px-3 and their text still lands on the same 16px.
- Edge controls
- (row minus control) / 2 from every edge: a 24px chip in a 40px header is 8px, a 28px button in a 44px footer is 8px, an xs (24px) action in a 40px header is 8px. The header and footer end inset is 8px.
- Rows
- 40px for one line, 56px for a title with a description. Never a row that grows by its padding.
- Card header
- 40px: title in type-label, meta in type-label and text-3, the action at the end.
- Between cards
- 12px. Between sections of a page, 32px.
- Row text
- Title in type-label and text-1, description in type-body-sm and text-3. Mono (type-tag) only for ids, keys and paths.
Tokens
12 tokens
--space-0-5- 2px
--space-1- 4px
--space-2- 8px
--space-3- 12px
--space-4- 16px
--space-5- 20px
--space-6- 24px
--space-8- 32px
--space-10- 40px
--space-15- 60px
--space-20- 80px
--space-30- 120px