VDI Design System · Spacing

Spacing, radii & elevation

An 8-point system with a 4-point nudge for fine control. Restrained corner radii and quiet shadows reflect the engineered, confident VDI tone.

Spacing scale
--sp-14px
--sp-28px
--sp-312px
--sp-416px
--sp-524px
--sp-632px
--sp-748px
--sp-864px
--sp-996px
--sp-10128px
Radii
VDI leans engineered — we avoid pill-shaped components except for badges. Most surfaces use radius-sm (4px) or radius-md (8px).
xs
--radius-xs · 2px
sm
--radius-sm · 4px
md
--radius-md · 8px
lg
--radius-lg · 12px
pill
--radius-pill
Elevation
Shadows are tinted with the navy brand color — never pure black — and kept quiet.
xs--shadow-xs
sm--shadow-sm
md--shadow-md
lg--shadow-lg
Layout grid
12-column grid, 24px gutter, max container 1280px (1440px wide layouts for hero sections).