A useful spacing system gives designers and developers fewer arbitrary choices. Teams also need shared names, documented exceptions, and component examples before they can use the same rules in design and code.
Start with the problem, then choose the spacing formula
A spacing formula turns one base value into a repeatable set. Linear scales add the same increment at each step. Ratio-based scales multiply the previous value, which creates wider jumps as the scale grows. Neither approach is correct for every interface.
linear: value = base + (step × increment)
ratio: value = round(base × ratio^step)Dense product screens tend to need close values such as 4, 8, 12, 16, and 24 pixels. Marketing pages can use larger jumps because the layout has fewer repeated controls. Start with the screens you already have, mark the values that recur, then choose the smallest scale that covers them.
Use 4-point and 8-point grids as constraints
Choose a 4-point grid
Use it when compact controls, data tables, and small component padding need values between the larger 8-point steps.
Choose an 8-point grid
Use it when the product benefits from fewer decisions and most gaps can move in clear 8-pixel increments.
The systems can coexist. Every 8-point value sits on a 4-point grid, so a team can reserve 4 and 12 pixels for tight internal spacing while keeping page-level gaps on 8, 16, 24, and 32.
Current systems use different scales. Atlassian starts from an 8-pixel base and includes smaller fractional tokens. Carbon uses multiples of two, four, and eight, with smaller steps for detail and larger steps for layout density.
Turn the scale into tokens people can remember
Keep the base scale neutral: space-1, space-2, and so on. Add semantic aliases where a role stays stable, such as control-padding-inline or page-gutter. This avoids pretending that “medium” means the same thing inside a button and between two page sections.
- Generate a small base scale and test it on three real screens.
- Map existing margins, gaps, and padding to the nearest token.
- Record exceptions instead of adding a token for every old value.
- Publish code and design-library names together.
Continue with the implementation guides
For work across tokens, components, and implementation, review the design system service.
