# Aavya Design Tokens — Spacing

Our spacing system is built on a 4px base unit. Use generous negative space — elements should float, not crowd. When in doubt, go bigger.

---

## Spacing Scale

Based on a 4px grid. Prefer larger values for padding and gaps to maintain the premium, airy feel.

| Token | rem | px |
|---|---|---|
| `spacing-0.5` | `0.125rem` | 2px |
| `spacing-1` | `0.25rem` | 4px |
| `spacing-1.5` | `0.375rem` | 6px |
| `spacing-2` | `0.5rem` | 8px |
| `spacing-3` | `0.75rem` | 12px |
| `spacing-4` | `1rem` | 16px |
| `spacing-5` | `1.25rem` | 20px |
| `spacing-6` | `1.5rem` | 24px |
| `spacing-8` | `2rem` | 32px |
| `spacing-10` | `2.5rem` | 40px |
| `spacing-12` | `3rem` | 48px |
| `spacing-16` | `4rem` | 64px |
| `spacing-20` | `5rem` | 80px |
| `spacing-24` | `6rem` | 96px |

---

## Usage Guidelines

Recommended spacing values for common use cases.

| Use Case | Recommended Range |
|---|---|
| Component internal padding (cards, buttons, inputs) | `spacing-3` to `spacing-4` |
| Between sibling components | `spacing-4` to `spacing-6` |
| Between major sections | `spacing-8` to `spacing-12` |
| Page margins and content containers | `spacing-6` to `spacing-16` |

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Spacing Tokens */
--spacing-0-5: 0.125rem;  /* 2px */
--spacing-1: 0.25rem;     /* 4px */
--spacing-1-5: 0.375rem;  /* 6px */
--spacing-2: 0.5rem;      /* 8px */
--spacing-3: 0.75rem;     /* 12px */
--spacing-4: 1rem;        /* 16px */
--spacing-5: 1.25rem;     /* 20px */
--spacing-6: 1.5rem;      /* 24px */
--spacing-8: 2rem;        /* 32px */
--spacing-10: 2.5rem;     /* 40px */
--spacing-12: 3rem;       /* 48px */
--spacing-16: 4rem;       /* 64px */
--spacing-20: 5rem;       /* 80px */
--spacing-24: 6rem;       /* 96px */
```

---

## Usage Rules

1. **Stay on the scale.** Only use values from the token set. No one-off `13px` margins.
2. **When in doubt, go bigger.** Aavya breathes. Tight layouts feel cheap — generous space feels premium.
3. **Match the use case to the range.** Internal padding stays small. Section spacing stays large. Don't blur the layers.
4. **Be consistent within a component.** If a card uses `spacing-4` for padding, every card uses `spacing-4`.
5. **Use tokens, not raw values.** Reference `var(--spacing-6)` instead of `1.5rem` so the system stays unified.