4-Point vs 8-Point Grid

The difference in one component

Take a compact table row. An 8-point system might use 16 pixels of horizontal padding and 8 pixels between the icon and label. A 4-point system keeps those values and adds 12 pixels as an option when 8 feels cramped and 16 wastes space. That middle value is the main benefit.

Use a mixed grid without creating two systems

Set 8 pixels as the default step and allow a 4-pixel half-step for small internal adjustments. Document where the half-step is valid. Icon-to-label gaps, compact control padding, and one-pixel optical corrections need different rules, so do not hide all of them under “use multiples of four.”

A short scale such as 4, 8, 12, 16, 24, 32, 48, and 64 covers many product interfaces. Test those values against a form, a data-heavy view, and a marketing section before expanding it.

Established systems use this kind of controlled mix. Atlassian builds on an 8-pixel base while retaining smaller fractional tokens. Carbon combines multiples of two, four, and eight across detail and layout spacing.

A quick decision rule

• Start with 8 points when consistency problems come from too many choices.
• Add the 4-point half-step when real components repeatedly need it.
• Keep page-level rhythm on the larger steps, even when controls use smaller ones.

Compare both scales in the calculator

Move the decision into code

The next guide shows how to encode the chosen values as CSS custom properties and Tailwind theme variables. Return to the spacing system guide for naming and rollout advice.

If the decision affects tokens, components, and implementation, review the design system service.