Spacing Scale

Consistent spacing creates visual harmony. Pick a system or build your own.

Code Output 

                

            

            
            
            

                
Live Preview

                
See your spacing scale applied to real UI patterns.

                
                

                    
                    
                    
                

                
                

                    
                

            

            
            

                
Common Spacing Systems

                

                    

                        
Linear (4px base)

                        
    
                            
  • 4 · 8 · 12 · 16 · 20 · 24...
    • 
                            
  • Simple, predictable
    • 
                            
  • Used by: iOS, many apps
    • 
                        

                    

                    

                        
Linear (8px base)

                        
    
                            
  • 8 · 16 · 24 · 32 · 40 · 48...
    • 
                            
  • Bolder spacing jumps
    • 
                            
  • Used by: Material Design
    • 
                        

                    

                    

                        
Tailwind CSS

                        
    
                            
  • 0 · 1 · 2 · 4 · 6 · 8 · 12...
    • 
                            
  • 0.25rem base (4px)
    • 
                            
  • Flexible for web
    • 
                        

                    

                    

                        
Golden Ratio

                        
    
                            
  • × 1.618 each step
    • 
                            
  • Organic, natural feel
    • 
                            
  • Common in design
    • 
                        

                    

                

            

            
            

                Pro
                
Design System Export

                
Export to Figma, generate fluid spacing, and integrate with your full design system.

                

                    Figma plugin
                    Fluid clamp()
                    Tokens export
                    Team sharing
                

            

        

    


    
    
    
Copied!