Foundations
Spacing
A 10-step scale from --space-2xs (4px) to --space-5xl (80px), plus semantic aliases for component-specific spacing. Use the token in your styles, never a raw px value, so the rhythm of the wireframe stays consistent.
Scale
--space-2xs
4px
--space-xs
8px
--space-sm
12px
--space-md
16px
--space-lg
20px
--space-xl
24px
--space-2xl
28px
--space-3xl
40px
--space-4xl
56px
--space-5xl
80px
Used in padding, margins, gaps, and grid gutters. The scale is intentionally compact so wireframes feel tight; the design phase can re-skin spacing freely by changing these tokens.
Semantic aliases
--space-form-row
= --space-xl · 24px
Vertical gap between stacked form fields. Used as
margin-bottom on every input, select, and textarea.Aliases let a single edit retune one type of spacing across the whole kit. Add new aliases when a spacing pattern recurs in three or more places. Pair the new alias with its base step.
The gap above is exactly --space-form-row. Change the alias in wireframe.css and every form in the project updates.
Common uses
Card padding
--space-xl – --space-2xl
Most card containers (
.stat-tile, .test-card) sit between 24–28px internal padding.Section padding
--space-3xl – --space-5xl
Wireframe Deck patterns (
kit-wireframe-deck.html) use the 40–80px range for section frames.Pricing card
--space-3xl · 40px
.pricing-card uses the larger step so the price + features feel airy.Inline gaps
--space-xs – --space-sm
Icon + label, check-row, badge clusters. 8–12px keeps these tight.