Spacing scale
A 4px-base numeric spacing scale as CSS custom properties. Consistent rhythm across every margin, padding, and gap — change the base unit, update everything.
Quick implementation
:root {
/* Base unit: 4px — multiply factor is the number */
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
}
/* Usage */
.card { padding: var(--space-6); }
.stack > * + * { margin-top: var(--space-4); }
.grid { gap: var(--space-8); }Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer creating a CSS spacing scale
for a design system.
Goal: Generate a spacing scale as CSS custom properties using a
4px base unit, with steps named --space-1 through --space-24.
Add semantic aliases for common use cases.
Constraints:
- Use rem values (not px) for accessibility — users who change
their browser font size should get proportionally larger spacing.
- Include a brief comment showing the px equivalent for each step.
- Add semantic aliases: --space-inset (card padding), --space-stack
(vertical gap between sections), --space-inline (horizontal gap).
- Show usage examples for: card padding, flexbox gap, and a CSS
"stack" layout using the lobotomized owl selector (* + *).
Framework variant: Show how to export this as a Tailwind theme
extension (tailwind.config.js spacing object) alongside the raw CSS.
Return only the CSS and config, with inline comments.4px base vs modular scale
A 4px linear grid (where --space-4 = 16px, --space-8 = 32px) mirrors how most design tools work — Figma's default grid is 8px, which fits neatly into this system at steps 2, 4, 8, 16. This makes design-to-code handoffs exact. An exponential modular scale (like a 1.5 ratio) grows faster and works better for editorial typography, but is harder to reason about for layout spacing where small increments matter.
Why rem, not px
Using rem values means spacing respects the user's browser font size preference. A user who has set their browser to 20px (common for accessibility) will get proportionally larger spacing without any extra code. Hardcoding padding: 16px ignores this preference; padding: var(--space-4) (which is 1rem) adapts automatically. The pixel comments in the snippet are for developer reference only — the actual values are always relative.