Question 1

What is a spacing scale?

Accepted Answer

A spacing scale is a set of predetermined spacing values used consistently throughout a design system. Common examples include 4pt grids (4, 8, 12, 16...) or 8pt grids (8, 16, 24, 32...).

Question 2

What is a 4pt or 8pt grid system?

Accepted Answer

A 4pt grid means all spacing values are multiples of 4px. An 8pt grid uses multiples of 8px. These systems create visual consistency because most screen sizes are divisible by 8, and 4 divides evenly into many common sizes.

Question 3

How do I use CSS custom properties for spacing?

Accepted Answer

Define spacing variables in :root { --spacing-1: 4px; --spacing-2: 8px; } then use them as margin: var(--spacing-2); padding: var(--spacing-4);. This makes it easy to update your entire design system from one place.

Question 4

What is the difference between linear and multiplier scale?

Accepted Answer

A linear scale increments by a fixed amount (e.g., 4, 8, 12, 16). A multiplier scale grows by a ratio (e.g., 4, 6, 9, 13.5 with 1.5x). Linear scales work well for UI spacing; multiplier scales are better for typographic hierarchies.

Question 5

What base unit should I use?

Accepted Answer

4px is the most common base unit, as it aligns well with most screen densities. 8px is also very common and creates larger jumps. For Tailwind CSS compatibility, use 4px as Tailwind's default spacing is 4px based.

Spacing Scale Generator

Frequently Asked Questions

Comments & Feedback