AI Spacing Scale Generator

A spacing scale is a predefined set of values used for margins, padding, gaps, and positioning throughout an interface. Instead of choosing arbitrary pixel values, designers and developers pick from the scale, ensuring consistent visual rhythm. Most scales are based on a base unit (commonly 4px or 8px) multiplied by a series of factors to create a graduated set of spacing options.

An 8px base unit works well for most web applications — it aligns cleanly with common screen densities and provides enough granularity for typical layouts. A 4px base unit offers finer control, which is useful for dense interfaces like dashboards, data tables, or mobile apps where you need subtle spacing differences. Many design systems use 4px internally but expose an 8px-based scale to consumers.

Linear spacing uses equal increments (4, 8, 12, 16, 20...) creating uniform steps. Geometric spacing uses a multiplier ratio (4, 8, 16, 32, 64...) creating exponentially growing gaps. Linear works well for compact UIs needing many similar sizes. Geometric creates more dramatic hierarchy and works well for page-level layouts where sections need clear visual separation.

Define your scale as design tokens (CSS custom properties, SCSS variables, or Tailwind config) and ban arbitrary spacing values in your codebase. Use smaller values (4-8px) for element-level spacing like icon gaps and input padding. Use medium values (16-32px) for component-level spacing like card padding. Use larger values (48-96px) for layout-level spacing like section margins.

Both use mathematical relationships to create visual harmony. Your spacing scale should complement your typography — body text line height, paragraph spacing, and heading margins should align with your spacing tokens. Many design systems derive both from the same base unit, ensuring typography and layout feel cohesive. For example, a 16px base font with 1.5 line height creates 24px line spacing, which should map to a spacing token.