# Design Token Mapping

> Maps Figma design tokens to code implementation.
> **Run /design-setup to auto-populate from your Figma file.**

---

## Colors

| Figma Token | CSS Variable | Tailwind Class | Hex Value |
|-------------|--------------|----------------|-----------|
| _Run /design-setup to populate_ | | | |

### Example Format

```markdown
| Primary/500 | --color-primary-500 | bg-primary-500 | #3B82F6 |
| Primary/600 | --color-primary-600 | bg-primary-600 | #2563EB |
| Neutral/50 | --color-neutral-50 | bg-neutral-50 | #FAFAFA |
| Neutral/900 | --color-neutral-900 | text-neutral-900 | #171717 |
```

---

## Spacing

| Figma Token | CSS Variable | Tailwind Class | Value |
|-------------|--------------|----------------|-------|
| _Run /design-setup to populate_ | | | |

### Example Format

```markdown
| Space/1 | --space-1 | p-1 | 4px |
| Space/2 | --space-2 | p-2 | 8px |
| Space/4 | --space-4 | p-4 | 16px |
| Space/8 | --space-8 | p-8 | 32px |
```

---

## Typography

| Figma Style | CSS Class | Tailwind Classes | Properties |
|-------------|-----------|------------------|------------|
| _Run /design-setup to populate_ | | | |

### Example Format

```markdown
| Heading/H1 | .text-h1 | text-4xl font-bold | 36px/40px, 700 |
| Heading/H2 | .text-h2 | text-3xl font-semibold | 30px/36px, 600 |
| Body/Default | .text-body | text-base | 16px/24px, 400 |
| Body/Small | .text-sm | text-sm | 14px/20px, 400 |
```

---

## Border Radius

| Figma Token | CSS Variable | Tailwind Class | Value |
|-------------|--------------|----------------|-------|
| _Run /design-setup to populate_ | | | |

### Example Format

```markdown
| Radius/SM | --radius-sm | rounded-sm | 4px |
| Radius/MD | --radius-md | rounded-md | 8px |
| Radius/LG | --radius-lg | rounded-lg | 12px |
| Radius/Full | --radius-full | rounded-full | 9999px |
```

---

## Shadows

| Figma Style | CSS Variable | Tailwind Class | Value |
|-------------|--------------|----------------|-------|
| _Run /design-setup to populate_ | | | |

### Example Format

```markdown
| Shadow/SM | --shadow-sm | shadow-sm | 0 1px 2px rgba(0,0,0,0.05) |
| Shadow/MD | --shadow-md | shadow-md | 0 4px 6px rgba(0,0,0,0.1) |
| Shadow/LG | --shadow-lg | shadow-lg | 0 10px 15px rgba(0,0,0,0.1) |
```

---

## Usage Notes

### Figma Token Format
- Tokens are typically in `Category/Name` format
- Use exact Figma names for reliable extraction

### CSS Variables
- Define in your global CSS or theme file
- Use `var(--token-name)` in components

### Tailwind Integration
- Map to existing Tailwind classes where possible
- Extend Tailwind config for custom tokens

---

## Validation

Before using these tokens, verify:
- [ ] All Figma tokens have code mappings
- [ ] CSS variables are defined in stylesheets
- [ ] Tailwind config includes custom values
- [ ] Component library uses these tokens consistently