Spacing scale.
Generate a 4-point, 8-point, or arbitrary-base linear spacing scale. Outputs in pixels, rem (against your base font size), CSS custom properties, SCSS map, and Tailwind theme. The basis of every consistent design system — get it right once, reuse forever.
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
} $space: ( 1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 20px, 6: 24px, 7: 28px, 8: 32px, 9: 36px, 10: 40px, 11: 44px, 12: 48px, );
module.exports = {
theme: {
extend: {
spacing: {
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'5': '20px',
'6': '24px',
'7': '28px',
'8': '32px',
'9': '36px',
'10': '40px',
'11': '44px',
'12': '48px',
}
}
}
}Eight points, zero argument.
A spacing grid is a small set of allowed values for margins, padding, and gaps. Once a team adopts one, every space measurement comes from the set; arbitrary values like "12px because it looks right" get rejected at code review. The discipline costs almost nothing and pays back continuously: alignment is automatic, components compose without trial-and-error tweaking, and the rare custom value stands out as obviously requiring justification.
The 4-point and 8-point conventions both originate in iOS and Material Design respectively. 4-point grids work well for compact UIs with many small components (data tables, dashboards, IDEs). 8-point grids feel more relaxed and readable (consumer apps, marketing pages). Pick one, multiply by integers (or by halves at the small end if you need more granularity), and stop there. The most common mistake is to mix 4pt and 8pt arbitrarily — half the team uses 12px gaps, the other half uses 16px, and the inconsistency reads as sloppiness.
Beyond linear scales, some systems use exponential scales (each step is 1.5× or 2× the previous) for typography but rarely for spacing — exponential spacing produces gaps too small at the bottom and too big at the top to be useful as a single set. The right structure for spacing is linear; for typography, exponential. The tool on this page handles linear spacing; Typography Scale handles the exponential type ramp.
Naming matters. --space-1 through --space-12 is concise but opaque to newcomers; --space-xs --space-sm --space-md --space-lg --space-xl is more memorable but caps you at named tiers. Tailwind splits the difference with numeric tokens (p-4, m-8) where the number maps to a multiple of the base unit. The right choice depends on team size and the level of typography-system literacy; smaller teams can get away with semantic names, larger ones need numeric scales because there are too many edge cases to name.
A useful sanity check: print the entire spacing scale on one page in actual sizes, with labels, and ask the team to spot the gap that looks wrong. Most spacing-scale problems are visible at a glance once isolated from the rest of the UI; once integrated, the eye adapts and the issue becomes invisible until you're trying to fix something else and realise nothing aligns.