Build a consistent linear or geometric spacing scale from a base unit, preview every step's relative size, and copy it as CSS variables.
Design systems use a fixed spacing scale instead of arbitrary pixel values so every margin, padding and gap in an interface stays visually consistent and easy to reason about.
Each step adds the base value again, producing an evenly spaced sequence like 4, 8, 12, 16.
Each step multiplies by a ratio, growing faster at larger sizes, similar to a type scale.
Each row's bar width is proportional to its size, so you can see the scale's progression at a glance.
The generated variables can be dropped straight into a :root block and reused throughout your styles.
A spacing scale is a fixed set of size values, like 4px, 8px, 16px and 24px, used consistently for margins, padding and gaps throughout a design system.
A linear scale adds a fixed amount at every step, like 4, 8, 12, 16. A geometric scale multiplies by a fixed ratio at every step, like 4, 8, 16, 32, growing faster at larger sizes.
Common choices are 1.5 for a gentle scale or 2 for a scale that doubles at every step; smaller ratios keep more steps useful at typical UI sizes.
Yes, the CSS variables output can be pasted straight into a :root block and referenced anywhere with var(--space-1) and so on.
It is designed for spacing values like margin and padding, though the same linear or geometric approach also works well for building a type scale.
More handy tools from My Panda Toolbox.