Generate consistent spacing scales for your design system. Create harmonious layouts by using mathematically related spacing values for margins, padding, and gaps.

Scale Types

• Linear: Multiplies base by step number (4, 8, 12, 16...)
• Modular: Uses ratio progression for natural scaling
• Tailwind-style: Standard 0.25rem increments

Common Base Values

• 4px: Fine-grained control, good for dense UIs
• 8px: Industry standard, aligns with most grids
• 16px: Matches default browser font size

/* CSS Variables */
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-8: 2rem;     /* 32px */
}

/* Usage */
.card {
  padding: var(--space-4);
  margin-bottom: var(--space-8);
  gap: var(--space-2);
}