VISUALLIdesign system

Space & shape

Click a token to copy var(--name). The Tailwind column is the class the preset generates (its scale replaces Tailwind's, so p-5 is 24px here).

Spacing

TokenValueTailwindUsage
space-02pxp-0.5 · gap-0.5Hairline nudges: icon-to-label in tight chips.
space-14pxp-1 · gap-1Gap inside compact controls; ring-to-ring rhythm.
space-28pxp-2 · gap-2Default gap between related items; icon-to-label.
space-312pxp-3 · gap-3Control padding (inline), Vault row padding.
space-416pxp-4 · gap-4Card and panel padding on mobile; Composer inner padding.
space-524pxp-5 · gap-5Panel padding on desktop; gap between groups.
space-632pxp-6 · gap-6Floating chrome inset from the window edge on desktop.
space-748pxp-7 · gap-7Section spacing in dialogs and emails.
space-864pxp-8 · gap-8Website section rhythm (mobile).
space-996pxp-9 · gap-9Website section rhythm (desktop).

Radius

TokenValueTailwindUsage
radius-xs6pxrounded-xsCheckboxes, tiny chips, keyboard keys.
radius-sm10pxrounded-smButtons, inputs, menu items, Vault rows.
radius-md16pxrounded-mdCards, menus, toasts, fact cards.
radius-lg24pxrounded-lgThe Composer, dialogs, the Vault panel.
radius-xl32pxrounded-xlMarketing cards and image frames.
radius-pill999pxrounded-pillPills, switches, avatars, the send button.

Shadow

TokenValueTailwindUsage
shadow-float0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)shadow-floatChrome that floats on the canvas: Composer, Vault, canvas controls.
shadow-pop0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)shadow-popMenus, dialogs, toasts.
shadow-node0 6px 18px rgba(24, 33, 64, 0.10)shadow-nodeNode lift on the canvas: a soft drop in light, a glow in dark.

Layering

TokenValueTailwindUsage
z-canvas0z-canvasThe canvas.
z-chrome10z-chromeVault, Composer, canvas controls.
z-card20z-cardFact cards above chrome.
z-menu40z-menuMenus and popovers.
z-dialog60z-dialogDialogs and their scrim.
z-toast80z-toastToasts.