Defining a base unit for spacing

A spacing system starts with a single base unit that all other values build on. Many design teams use an 8px base because it keeps spacing options simple and visually consistent. This scale appears in several systems. Atlassian uses 8px as the foundation for values that range from tight 2px increments to wider 80px distances. Other systems follow a similar approach since an 8px unit is easy to divide into quarters and halves, which helps when refining compact UI elements or larger sections.

At the same time, 8px is not a rule. Many modern systems use a 4px base to allow finer control, especially in dense interfaces or smaller components. Both approaches follow the same principle: one consistent unit that keeps spacing decisions aligned.

A clear base unit helps create predictable spacing patterns. Smaller ranges work well for tight gaps inside compact components, while medium values give elements like inputs or cards more breathing room. Larger sizes help structure full layouts and create strong separation between sections. With a single unit at the core, these ranges stay aligned and form a visual rhythm that reduces guesswork in day-to-day design.^[1]