Spacing
How much room goes between things, and how tall controls are.
Scale
p-14pxp-28pxp-312pxp-416pxp-520pxp-624pxp-832pxp-1040pxp-1248pxp-1664px
Rhythm
| Where | Space |
|---|---|
| Icon and label | 8px (gap-2) |
| Card | p-5, gap-4 |
| Between fields | 16px |
| Dialog or sheet | p-6, gap-4 |
| Between page sections | 32 to 48px |
Control height
Tokens
12 tokens
--control-sm- 32px
--control-md- 40px
--control-lg- 48px
--overlay-sm- 384px
--overlay- 480px
--overlay-lg- 640px
--popover- 320px
--sheet- 400px
--popup-max- 320px
--focus-offset- 2px
--line-focus- 2px
--scrollbar-thumb- var(--line-strong)