Build a consistent spacing system
Generate spacing tokens for CSS, Sass, Less, JavaScript, JSON, Tailwind, responsive layouts, and fluid interfaces.
Generated spacing scale
| Token | Value | Pixels | REM | Typical use | Copy |
|---|
Visual scale
Live layout preview
Generated code
Why a spacing scale matters
A spacing scale gives a design system a predictable rhythm. Instead of choosing random margins and padding values, teams reuse a small set of approved measurements. This makes interfaces easier to scan, faster to build, and simpler to maintain. A four-point or eight-point foundation is common because many screen sizes and interface dimensions divide cleanly by those numbers. Smaller values work well for icons, labels, and compact controls. Larger values help separate cards, sections, and page regions. Consistency also improves collaboration because designers and developers can discuss the same named tokens.
Choosing the right progression
Linear scales grow by a fixed amount and remain easy to understand. Modular or geometric scales expand more dramatically and can produce a stronger visual hierarchy. Fibonacci-style scales create another natural progression for teams that want larger jumps at higher levels. There is no single perfect scale for every product. Dense dashboards may need compact increments, while editorial layouts often benefit from larger whitespace. Start with a practical base value, test common components, and remove steps that rarely get used. A useful scale should reduce decisions rather than create more of them.
Use tokens across platforms
Spacing tokens become especially useful when exported into code. CSS custom properties can power websites, Sass maps can support component libraries, and JSON tokens can feed design-system pipelines. Responsive variants allow spacing to grow across breakpoints, while fluid values can scale smoothly with the viewport. Keep semantic names stable even if the underlying values change. This helps teams update a design system without rewriting every component. Always test generated spacing with buttons, forms, cards, navigation, grids, and touch targets. A carefully selected scale creates visual order and keeps future interface work much more predictable.
Example spacing guidance
| Range | Common use | Design note |
|---|---|---|
| 2–8px | Icons, inline labels, micro gaps | Use carefully in touch interfaces. |
| 12–20px | Buttons, fields, cards | Good for common component padding. |
| 24–40px | Card groups, content blocks | Creates clear component separation. |
| 48–96px | Sections, page regions | Supports strong layout hierarchy. |
Frequently asked questions
What is a spacing scale?
A spacing scale is a reusable set of measurements for margins, padding, gaps, and layout separation.
Should I use a 4-point or 8-point system?
Four-point systems offer finer control. Eight-point systems reduce choices and create stronger consistency.
Why use rem for spacing?
REM values relate to the root font size and can support scalable, accessible interface systems.
What is fluid spacing?
Fluid spacing uses CSS functions such as clamp() to grow smoothly between minimum and maximum values.
Can spacing change by breakpoint?
Yes. Responsive spacing often becomes tighter on small screens and more generous on larger displays.
What are semantic spacing tokens?
Semantic tokens use names such as small, medium, and large instead of exposing raw measurements.
Can I export the generated spacing scale?
Yes. This tool supports code copying, CSV download, PDF download, and print-friendly output.