# Space & shape

## Spacing

| Token | Value | Usage |
| --- | --- | --- |
| space-0 | `2px` | Hairline nudges: icon-to-label in tight chips. |
| space-1 | `4px` | Gap inside compact controls; ring-to-ring rhythm. |
| space-2 | `8px` | Default gap between related items; icon-to-label. |
| space-3 | `12px` | Control padding (inline), Vault row padding. |
| space-4 | `16px` | Card and panel padding on mobile; Composer inner padding. |
| space-5 | `24px` | Panel padding on desktop; gap between groups. |
| space-6 | `32px` | Floating chrome inset from the window edge on desktop. |
| space-7 | `48px` | Section spacing in dialogs and emails. |
| space-8 | `64px` | Website section rhythm (mobile). |
| space-9 | `96px` | Website section rhythm (desktop). |

## Radius

| Token | Value | Usage |
| --- | --- | --- |
| radius-xs | `6px` | Checkboxes, tiny chips, keyboard keys. |
| radius-sm | `10px` | Buttons, inputs, menu items, Vault rows. |
| radius-md | `16px` | Cards, menus, toasts, fact cards. |
| radius-lg | `24px` | The Composer, dialogs, the Vault panel. |
| radius-xl | `32px` | Marketing cards and image frames. |
| radius-pill | `999px` | Pills, switches, avatars, the send button. |

## Shadow

| Token | Value | Usage |
| --- | --- | --- |
| shadow-float | `0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)` | Chrome that floats on the canvas: Composer, Vault, canvas controls. |
| shadow-pop | `0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)` | Menus, dialogs, toasts. |
| shadow-node | `0 6px 18px rgba(24, 33, 64, 0.10)` | Node lift on the canvas: a soft drop in light, a glow in dark. |

## Layering

| Token | Value | Usage |
| --- | --- | --- |
| z-canvas | `0` | The canvas. |
| z-chrome | `10` | Vault, Composer, canvas controls. |
| z-card | `20` | Fact cards above chrome. |
| z-menu | `40` | Menus and popovers. |
| z-dialog | `60` | Dialogs and their scrim. |
| z-toast | `80` | Toasts. |