/design-tokens
```bash

## What It Does

Guides you through selecting:
1. **Color Palette** - Primary, secondary, and neutral colors from Tailwind
2. **Typography** - Heading, body, and mono fonts from Google Fonts

## Prerequisites

- Requires `/product/product-overview.md` (created by `/product-vision`)

<Note>
Design tokens are optional but highly recommended for consistent branding across all screen designs.
</Note>

## Outputs

Creates two files:
- `/product/design-system/colors.json`
- `/product/design-system/typography.json`

## Workflow

<Steps>
  <Step title="Color Selection">
    Choose three colors from Tailwind's palette:
    - **Primary** - Main accent (buttons, links, key actions)
    - **Secondary** - Complementary accent (tags, highlights)
    - **Neutral** - Backgrounds, text, borders
  </Step>
  
  <Step title="Typography Selection">
    Choose fonts from Google Fonts:
    - **Heading** - Titles, section headers
    - **Body** - Paragraphs, UI text
    - **Mono** - Code, technical content (optional)
  </Step>
  
  <Step title="Review & Confirm">
    Review your selections before saving.
  </Step>
  
  <Step title="Save Tokens">
    Design tokens are saved and applied to all future screen designs.
  </Step>
</Steps>

## Color Options

Choose from Tailwind's built-in color palette:

### Warm Colors
- `red`, `orange`, `amber`, `yellow`, `lime`

### Cool Colors
- `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`

### Purple Spectrum
- `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`

### Neutrals
- `slate` (cool gray)
- `gray` (pure gray)
- `zinc` (slightly warm)
- `neutral`
- `stone` (warm gray)

<Accordion title="Choosing Neutrals">
- **slate:** Cool, modern, tech products
- **gray:** Neutral, versatile
- **zinc:** Subtle warmth
- **neutral:** Clean, minimal
- **stone:** Warm, friendly, organic
</Accordion>

## Typography Options

### Popular Heading Fonts
- DM Sans
- Inter
- Poppins
- Manrope
- Space Grotesk
- Outfit

### Popular Body Fonts
- Inter (versatile, works for both)
- Source Sans 3
- Nunito Sans
- Open Sans

### Popular Mono Fonts
- IBM Plex Mono
- JetBrains Mono
- Fira Code
- Source Code Pro

<Accordion title="Font Pairing Examples">
- **Modern & Clean:** DM Sans + DM Sans + IBM Plex Mono
- **Professional:** Inter + Inter + JetBrains Mono
- **Friendly:** Nunito Sans + Nunito Sans + Fira Code
- **Bold & Modern:** Space Grotesk + Inter + Source Code Pro
</Accordion>

## Output Format

### colors.json

```json
{
  "primary": "lime",
  "secondary": "emerald",
  "neutral": "stone"
}
```bash

### typography.json

```json
{
  "heading": "DM Sans",
  "body": "DM Sans",
  "mono": "IBM Plex Mono"
}
```bash

## How Tokens Are Applied

Design tokens affect:

1. **Screen designs** created with `/design-screen`
2. **Shell components** created with `/design-shell`
3. **Exported components** in the final package

<Note>
Design tokens apply only to your product designs, not to the Design OS application itself.
</Note>

## Example Session

```bash
User: /design-tokens

Assistant: Let's define the visual identity for **InvoiceHub**.

I'll help you choose:
1. Colors - A primary accent, secondary accent, and neutral palette
2. Typography - Fonts for headings, body text, and code

Do you have any existing brand colors or fonts in mind, or would 
you like suggestions?

User: I'd like suggestions

Assistant: Based on InvoiceHub, I'd suggest:

**Colors:**
- **Primary:** indigo - Professional, trustworthy
- **Secondary:** emerald - Success, growth
- **Neutral:** slate - Clean, modern

**Typography:**
- **Heading:** Inter - Clean, professional
- **Body:** Inter - Excellent readability
- **Mono:** JetBrains Mono - Great for invoices/numbers

What feels right for your product?

User: Those look great!

Assistant: I've saved your design tokens:
- `/product/design-system/colors.json`
- `/product/design-system/typography.json`

These will be used when creating screen designs for your sections.
```bash

## Important Notes

<Warning>
- Colors must be Tailwind palette names (not hex codes)
- Fonts must be exact Google Fonts names
- The mono font is optional but recommended for products with code/data
</Warning>

## Changing Tokens Later

To update design tokens:

1. Manually edit the JSON files
2. Or run `/design-tokens` again to go through the selection process
3. Existing screen designs won't auto-update - you'll need to manually apply new tokens

## Next Steps

After defining design tokens:

1. Run `/design-shell` to design the application structure
2. Run `/shape-section` to start defining sections
3. All screen designs will use your chosen tokens automatically