Section 04 · Foundations

Spacing & layout.

A 4-pixel base scale. Pick from the scale, never from your gut. The website breathes; the application should breathe too — just on a tighter beat.

The scale

--vp-space-14px tight inline gap (icon ↔ text)

--vp-space-28px small gap, badge padding

--vp-space-312px button padding-y · row gap

--vp-space-416px default container padding

--vp-space-520px section padding-y in dense UI

--vp-space-624px card padding · table cell padding-x

--vp-space-732px between-section gap (compact)

--vp-space-840px between-section gap (default)

--vp-space-948px large section gap

--vp-space-1056px app shell padding · between-section (loose)

--vp-space-1164px website section padding-y

--vp-space-1280px website section padding-y (large)

--vp-space-1396px hero padding-y

--vp-space-14128px rare · landing hero only

Density per surface

Three densities, never more.

Marketingsection padding-y · 80–96px website only

App · defaultpage padding · 32px outer · 24px between cards dashboard, project pages

App · denserow padding · 12px y · 18px x · 1px line between tables, history, sidebar lists

Containers & widths

--vp-container-max1200px marketing

app content maxno max fills viewport · use --vp-app-rail-w + --vp-sidebar-w

--vp-sidebar-w260px project / probe sidebar

--vp-app-rail-w56px icon-only nav rail

--vp-topbar-h64px app + website

paragraph max~64ch readable line length

Radii

--vp-radius-xs · 3pxinline pills, badge insets

--vp-radius-sm · 4pxbuttons, badges, code chips

--vp-radius-md · 6pxdefault · inputs, panels, dropdowns

--vp-radius-lg · 10pxcards · modals

--vp-radius-xl · 14pxhero containers · pricing tier row

--vp-radius-pillmeta-row pills · status chips with no border

The 3-pane app shell

Application uses an icon rail (left) + project/probe list (left-mid) + work surface (right). Borders are 1px, single-direction, never doubled. The proxy and chain editors swap the middle pane out but keep the same gridlines — no layout shift on navigation.

app-shell.css/* 3-pane app shell · don't deviate */
.app-shell {
  display: grid;
  grid-template-columns: var(--vp-app-rail-w) var(--vp-sidebar-w) 1fr;
  height: 100vh;
}
.app-shell > * + * {
  border-left: 1px solid var(--vp-color-line);
}

Gap, not margin

Use flex-direction: column + gap for any vertical stack of UI elements. Margins between siblings are how spacing accidentally gets doubled. Margins also lose to direct-edit operations (drag-reorder, delete). Reserve margins for in-flow text (paragraph spacing).