Scale — 4px base

--space-1 · p-1

--space-2 · p-2

--space-3 · p-3

--space-4 · p-4

--space-6 · p-6

--space-8 · p-8

--space-12 · p-12

--space-16 · p-16

--space-24 · p-24

The index matches Tailwind’s scale exactly, so p-4 in a Handlebars template and var(--space-4) in a React component are the same 16px. That equality is the whole reason the two products stay aligned.

Semantic aliases — reach for these first

--pad-card20px

--pad-row12px

--gap-inline8px

--gap-card16px

--gap-grid24px

--gap-field6px

--stack-md32px

--stack-lg64px

Containers

--container-prose42rem · reading measure

--container-narrow56rem · forms, auth

--container-page72rem · page shell

--container-wide88rem · catalog, dashboards

Elevation order — six layers, no more

--z-raised10

--z-sticky100 · navbar, sidebar

--z-dropdown200 · menus, tooltips

--z-overlay300 · modal, drawer

--z-toast400