You just finished a mockup. The elements are roughly aligned, the margins "look about right" based on feel. Then you move to the next component and everything falls apart: an 18px padding here, a 13px gap there, a 22px margin somewhere else. The result? An interface that feels slightly off without anyone being able to pinpoint exactly why. The problem is not your design — it is the absence of a spacing system. Our Spacing System Generator solves exactly this problem.
Why spacing is the invisible foundation of design
Spacing is the most underestimated design parameter. Color catches the eye, typography carries the message, but it is spacing that structures perception. Consistent spacing creates visual rhythm — that harmonious feeling users experience without being able to name it.
The concrete impact of good spacing
- Visual hierarchy — The space between elements communicates their relationship. Elements close together are perceived as related (Gestalt's law of proximity).
- Readability — Good vertical spacing between paragraphs and sections reduces cognitive load.
- Consistency — When every component uses the same spacing values, the interface breathes unity.
- Maintainability — A system reduces arbitrary decisions and accelerates development.
The 8-point grid: the industry standard
If there is only one concept to remember, it is this: the 8-point grid. The principle is simple — all dimensions and spacings in your interface are multiples of 8px.
Why 8?
The number 8 is not arbitrary. It is divisible by 2 and by 4, offering maximum flexibility for subdivisions. On modern screens, 8px aligns naturally with the pixel grids of 1x, 1.5x, 2x, and 3x densities. The result: crisp edges on every device.
The 4-point grid as an alternative
Some teams prefer a 4px base unit for more granularity, especially in dense interfaces like dashboards. This is the approach used by Google's Material Design. The advantage: you can achieve finer spacings (4px, 8px, 12px, 16px) while keeping a structured system.
Our Spacing System Generator lets you switch between these two bases — and many others — in a single click.
Types of spacing scales
A spacing system is more than multiplying a number. The type of progression between values has a direct impact on the visual rhythm of your interface.
Linear scale
This is the most intuitive: each step adds the same value. With a 4px base:
4, 8, 12, 16, 20, 24, 28, 32...
Advantages: predictable, easy to memorize. Drawback: large spacings remain close to each other (the difference between 24 and 28 is visually negligible), while small ones are very distinct. Works perfectly for compact interfaces where most spacings are small.
Geometric scale
Each step is multiplied by a constant ratio (our tool uses 1.5x). With a 4px base:
4, 6, 9, 14, 20, 30, 46, 68...
Advantages: small spacings are granular while large ones diverge naturally, creating a more pronounced visual hierarchy. This is the ideal choice for designs with many depth levels. Drawback: values do not land on round numbers, which can be disorienting.
Fibonacci scale
Each value is the sum of the two preceding ones, multiplied by the base:
4, 4, 8, 12, 20, 32, 52, 84...
Advantages: proportions follow the golden ratio, creating a rhythm that the human eye perceives as naturally pleasing. Used in interfaces aiming for an organic aesthetic. Drawback: the progression is fast — large spacings become very large.
Tailwind scale
This is the native Tailwind CSS scale, with its familiar token names (0.5, 1, 1.5, 2, etc.) and values that mix linear progression (in 4px steps up to 48px) with larger jumps beyond. Our tool reproduces it faithfully, letting you visualize and adapt the Tailwind system to your needs.
Using the Spacing System Generator
Our tool was designed to turn an abstract concept into something tangible and exportable.
Choosing a preset
Five presets are available: Tailwind Default for the standard Tailwind scale, 4px Linear and 8px Linear for classic linear scales, 4px Geometric for a geometric progression, and Fibonacci for the golden-ratio-based scale. Each preset automatically configures the scale type, base unit, and number of steps.
Customizing the scale
Beyond presets, you control three parameters:
- Scale Type — Linear, geometric, Fibonacci, or Tailwind.
- Base — The base unit in pixels (from 2 to 12px).
- Steps — The number of steps in your scale.
Every change instantly updates the visualization, the token table, and the generated code.
Visualizing with bars or boxes
Two preview modes are available. The Bars mode displays each value as a proportional horizontal bar — ideal for comparing ratios between steps. The Boxes mode shows squares sized to each value — perfect for feeling the actual size of each spacing.
Dual export: CSS and Tailwind
The tool automatically generates:
- CSS custom properties — Ready to paste into your variables file:
:root {
--space-0: 0rem;
--space-1: 0.250rem; /* 4px */
--space-2: 0.500rem; /* 8px */
--space-3: 0.750rem; /* 12px */
--space-4: 1.000rem; /* 16px */
}
- A Tailwind configuration — Directly injectable into your
tailwind.config:
spacing: {
'1': '0.250rem', /* 4px */
'2': '0.500rem', /* 8px */
'3': '0.750rem', /* 12px */
'4': '1.000rem', /* 16px */
}
Click "Copy" and the code is in your clipboard.
Design tokens and spacing systems
A spacing system reaches its full power when formalized as design tokens — named, versioned values shared between design and code.
What is a spacing design token?
It is a variable that names an intention rather than a raw value. Instead of writing padding: 16px, you write padding: var(--space-4). The day you decide to change your base from 4px to 5px, a single file changes and the entire interface adapts.
Semantic vs primitive tokens
Primitive tokens are the raw values from your scale (--space-1, --space-2, etc.). Semantic tokens add a layer of intention:
--spacing-inline-sm— Small horizontal spacing between inline elements.--spacing-stack-md— Medium vertical spacing between stacked sections.--spacing-inset-lg— Large inner padding of a container.
This distinction is essential for design systems at scale. It allows changing the value of a semantic token without touching the components that consume it.
Spacing across a product ecosystem
When you maintain multiple products, a shared spacing system becomes a critical unity factor. At Eguth, the same spacing tokens feed every application in the ecosystem:
- Guthly uses the shared scale to space habit cards, progress charts, and gamification elements consistently.
- WePlanify applies the same values to its collaborative planning views, ensuring that lists, timelines, and side panels breathe at the same rhythm.
- GuthSearch structures its search results and contextual panels with identical spacings.
- Dropee spaces its learning modules and gamified paths with the same scale.
- GutHub organizes its collaboration spaces with margins and paddings drawn from the shared system.
The result: a user switching between products feels an immediate familiarity, even when the interfaces are functionally different. It is the shared visual rhythm that creates this consistency.
Integration with Tailwind CSS
Tailwind has become the dominant CSS framework for good reason: it systematizes design values. Its native spacing system is an excellent starting point, but it is not always suited to your project.
Customizing the Tailwind scale
Our generator lets you create a custom scale and export it directly as a Tailwind configuration. This is especially useful when:
- Your design team uses a 6px base instead of 4px.
- You need a geometric progression for an editorial design.
- You want to limit the number of tokens to enforce consistency.
The extend vs override approach
In Tailwind, you can extend the default scale (theme.extend.spacing) or replace it entirely (theme.spacing). For a strict spacing system, replacing is preferable — it prevents the use of off-system values.
Common mistakes to avoid
Magic values
Writing margin-top: 13px in your CSS is the equivalent of a magic number in programming. If that value does not belong to your scale, it breaks the system. Every spacing should be a token.
Too many steps
A scale with 30 distinct values is not a system — it is an absence of constraint in disguise. Aim for 8 to 16 steps for most projects. The more constrained your scale, the more consistent your interfaces will be.
Confusing inner and outer spacing
padding (inner spacing) and margin (outer spacing) serve different purposes. Using the same tokens for both is fine, but make sure your semantic tokens distinguish the two cases (--spacing-inset vs --spacing-stack).
Ignoring vertical spacing
Many developers polish horizontal spacing but neglect vertical rhythm. Vertical rhythm — the regular spacing between lines of text and sections — is equally important for readability and visual harmony.
Best practices for a robust spacing system
- Pick a base and stick with it — 4px or 8px are the most common choices. Do not mix them.
- Limit your scale — Fewer choices = more consistency. 10 to 12 tokens cover most needs.
- Use CSS custom properties — Never hard-code values in your components.
- Document your tokens — Every value should have a clear name and a documented use case.
- Test visually — Use our generator to see your scale before implementing it.
- Share across teams — Design and development must use the same tokens.
Put it into practice
Spacing is a topic you truly understand by doing. Open our Spacing System Generator and experiment. Start with the Tailwind Default preset to see the standard scale, then switch to a geometric or Fibonacci scale to feel the difference.
Adjust the base unit, increase or decrease the number of steps, compare the visualization modes — then copy the generated code directly into your project. Within minutes, you will have a consistent, documented spacing system ready for production.
Whether you are working on a single product or a full ecosystem like Eguth, a well-designed spacing system is the highest-ROI investment you can make for the visual quality of your interfaces.