# Spacing Scale Generator

Generate consistent spacing scales for design systems

## Base Unit (px)

## Scale Type

- Linear
- Exponential
- Fibonacci
- Golden Ratio

## Number of Steps

Visual Preview

| Steps | Spacing Values     |
|-------|--------------------|
| 0     | --spacing-04px     |
| 1     | --spacing-18px     |
| 2     | --spacing-216px    |
| 3     | --spacing-332px    |
| 4     | --spacing-464px    |
| 5     | --spacing-5128px   |
| 6     | --spacing-6256px   |
| 7     | --spacing-7512px   |
| 8     | --spacing-81024px  |
| 9     | --spacing-92048px  |
| 10    | --spacing-104096px |
| 11    | --spacing-118192px |

## CSS Variables

```css
:root {
  --spacing-0: 4px;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 32px;
  --spacing-4: 64px;
  --spacing-5: 128px;
  --spacing-6: 256px;
  --spacing-7: 512px;
  --spacing-8: 1024px;
  --spacing-9: 2048px;
  --spacing-10: 4096px;
  --spacing-11: 8192px;
}
```

## Tailwind Config

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "0": "4px",
        "1": "8px",
        "2": "16px",
        "3": "32px",
        "4": "64px",
        "5": "128px",
        "6": "256px",
        "7": "512px",
        "8": "1024px",
        "9": "2048px",
        "10": "4096px",
        "11": "8192px"
      }
    }
  }
}
```