Spacing System Calculator
Configuration
Spacing Ladder
Export Tokens
About Spacing Systems
A spacing system is a predefined set of spacing values that creates visual consistency across your interface. Instead of arbitrary margins and padding, you use standardized tokens that establish rhythm and hierarchy.
Why Use a Spacing System?
- Visual consistency: Creates predictable, harmonious layouts
- Faster decisions: Choose from limited options instead of inventing values
- Easier maintenance: Update one value to change spacing globally
- Better collaboration: Designers and developers speak the same language
Scale Type Comparison
Linear: Adds a constant increment (4, 8, 12, 16, 20...). Best for tight, controlled layouts where every step matters.
Geometric: Multiplies by a ratio (4, 8, 16, 32, 64...). Creates clear hierarchy with dramatic jumps.
Fibonacci: Natural sequence (4, 8, 12, 20, 32, 52...). Balances predictability with organic growth.
Common Base Units
- 4px: Most granular, used by Material Design and many web systems
- 8px: Simpler increments, used by Apple Human Interface Guidelines
- 0.25rem: Same as 4px at default font size, scales with user preferences
- 0.5rem: Same as 8px, scales with font size for accessibility
Implementation Tips
- Start with 8-12 spacing values, fewer than 15 to avoid decision paralysis
- Use rem for accessibility (respects user font size preferences)
- Name tokens by size (xs, sm, md) not usage (button-padding) for flexibility
- Define tokens in :root or as SCSS variables for easy global updates
- Document which tokens to use for common scenarios (card padding, section gaps)
Frequently Asked Questions
What is a spacing system?
A spacing system is a predefined set of spacing values used consistently across a design or interface. Instead of using arbitrary margins and padding, you use standardized tokens (e.g., xs, sm, md, lg, xl) that create visual harmony and make layouts easier to maintain. Major design systems from Google, Apple, and Tailwind all use spacing systems.
What is the best base unit for spacing?
4px or 8px are the most common base units. A 4px base provides more granularity (4, 8, 12, 16, 20...), while an 8px base gives simpler, bolder increments (8, 16, 24, 32...). Most modern design systems use 4px or 8px because they divide evenly into common screen sizes and work well across devices.
What is the difference between linear and geometric spacing scales?
Linear scales add a constant value each step (e.g., 4, 8, 12, 16, 20). Geometric scales multiply by a ratio (e.g., 4, 8, 16, 32, 64). Linear scales provide consistent increments good for tight layouts. Geometric scales create more dramatic jumps, better for establishing clear visual hierarchy.
How do I use spacing tokens in CSS?
Define spacing tokens as CSS custom properties in your :root selector, then reference them throughout your styles. Example: :root { --space-md: 16px; } then use margin: var(--space-md);. This makes spacing consistent and easy to update globally. You can also use them in Tailwind config or as SCSS variables.
Should I use px, rem, or em for spacing?
Use rem for spacing that should scale with root font size (better for accessibility and responsive design). Use px for fixed spacing that should remain constant regardless of font size. Most modern design systems prefer rem because it respects user font size preferences and scales naturally across breakpoints.
How many spacing values should a design system have?
Most design systems have 8-12 spacing values. Too few (3-4) limits flexibility. Too many (15+) creates decision paralysis. A typical set includes: xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px), 3xl (64px), 4xl (96px). This range covers 95% of common spacing needs.
What is a Fibonacci-like spacing scale?
A Fibonacci-like scale approximates the Fibonacci sequence (each number is the sum of the two preceding ones) but adjusted for design. Example: 4, 8, 12, 20, 32, 52, 84. This creates natural-looking growth that feels organic. It's less predictable than linear but more moderate than pure geometric scales.
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are estimates and may vary based on actual conditions.
Related Tools
- HTTP Header Viewer -- Paste and parse HTTP headers for inspection
- Open Graph Preview -- Preview how links appear on social media
- Meta Title Description Length Checker -- Check meta title and description length with live Google SERP preview
- URL Parser -- Parse a URL into protocol, host, path, and query
Related Tools
View all toolsUTM Link Builder
Build URLs with UTM tracking parameters
User-Agent Parser
Parse a user-agent string for quick details
URL Parser
Parse a URL into protocol, host, path, and query
Sitemap XML Generator
Generate a simple sitemap.xml from a list of URLs
Robots.txt Generator
Generate a robots.txt file with common rules
Meta Tag Generator
Generate common SEO meta tags for a page
Spacing System Calculator FAQ
What is a spacing system?
A spacing system is a predefined set of spacing values used consistently across a design or interface. Instead of using arbitrary margins and padding, you use standardized tokens (e.g., xs, sm, md, lg, xl) that create visual harmony and make layouts easier to maintain. Design systems from Google, Apple, and Tailwind all use spacing systems.
What is the best base unit for spacing?
4px or 8px are the most common base units. A 4px base provides more granularity (4, 8, 12, 16, 20...), while an 8px base gives simpler, bolder increments (8, 16, 24, 32...). Most modern design systems use 4px or 8px because they divide evenly into common screen sizes and work well across devices.
What is the difference between linear and geometric spacing scales?
Linear scales add a constant value each step (e.g., 4, 8, 12, 16, 20). Geometric scales multiply by a ratio (e.g., 4, 8, 16, 32, 64). Linear scales provide consistent increments good for tight layouts. Geometric scales create more dramatic jumps, better for establishing clear visual hierarchy.
How do I use spacing tokens in CSS?
Define spacing tokens as CSS custom properties in your :root selector, then reference them throughout your styles. Example: :root { --space-md: 16px; } then use margin: var(--space-md). This makes spacing consistent and easy to update globally. You can also use them in Tailwind config or as SCSS variables.
Should I use px, rem, or em for spacing?
Use rem for spacing that should scale with root font size (better for accessibility and responsive design). Use px for fixed spacing that should remain constant regardless of font size. Most modern design systems prefer rem because it respects user font size preferences and scales naturally across breakpoints.
How many spacing values should a design system have?
Most design systems have 8-12 spacing values. Too few (3-4) limits flexibility. Too many (15+) creates decision paralysis. A typical set includes: xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px), 3xl (64px), 4xl (96px). This range covers 95% of common spacing needs.
What is a Fibonacci-like spacing scale?
A Fibonacci-like scale approximates the Fibonacci sequence (each number is the sum of the two preceding ones) but adjusted for design. Example: 4, 8, 12, 20, 32, 52, 84. This creates natural-looking growth that feels organic. It's less predictable than linear but more moderate than pure geometric scales.