Foundations
Spacing
4px base grid. All spacing, radii, shadows, and layout widths are CSS custom properties. Never hardcode pixel values — always use a token.
Space scale
--space-1 4px --space-2 8px --space-3 12px --space-4 16px --space-5 20px --space-6 24px --space-8 32px --space-10 40px --space-12 48px --space-16 64px --space-20 80px --space-24 96px --space-32 128px Border radii
--radius-xs 2px --radius-sm 4px --radius-md 8px --radius-lg 12px --radius-xl 16px --radius-2xl 24px --radius-pill 999px Shadows
XS
--shadow-xs Tooltips, micro-chips SM
--shadow-sm Cards, inputs, dropdowns MD
--shadow-md Popovers, floating panels LG
--shadow-lg Modals, sidebars XL
--shadow-xl Command palette, overlays Focus
--shadow-focus Keyboard focus ring — never for elevation Layout widths
--container-narrow 720px — Narrow reading column --container-default 1120px — Standard page content --container-wide 1440px — Wide marketing / data layouts
Use max-width: var(--container-default); margin-inline: auto; to center content within the viewport.