# TypoGenie Templates

This folder contains all the document style templates for TypoGenie. Templates are organized by category.

## Creating Custom Templates

You can create your own templates! Just create a JSON file with the following structure:

```json
{
  "id": "my-custom-style",
  "name": "My Custom Style",
  "category": "Custom",
  "description": "A brief description of this style",
  "vibe": "Keywords describing the mood",
  "googleFontsImport": "https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap",
  "wordConfig": {
    "heading1": {
      "font": "Your Font",
      "size": 28,
      "color": "000000",
      "bold": true,
      "align": "left",
      "spacing": { "before": 400, "after": 200, "line": 240 }
    },
    "heading2": {
      "font": "Your Font",
      "size": 14,
      "color": "333333",
      "bold": true,
      "align": "left",
      "spacing": { "before": 280, "after": 140, "line": 240 }
    },
    "body": {
      "font": "Your Font",
      "size": 11,
      "color": "333333",
      "align": "left",
      "spacing": { "before": 0, "after": 180, "line": 300 }
    },
    "accentColor": "FF5733"
  },
  "previewCss": "font-family: 'Your Font', sans-serif; h1 { font-size: 28pt; font-weight: 700; color: #000; margin-bottom: 20px; }"
}
```

## Template Structure

### Required Fields

- **id**: Unique identifier (lowercase, no spaces)
- **name**: Display name for the UI
- **category**: Category for grouping (e.g., "Minimalist", "Editorial", "Tech")
- **description**: Short description shown in the UI
- **vibe**: Keywords describing the style
- **googleFontsImport**: URL to import fonts from Google Fonts
- **wordConfig**: Configuration for Word document generation
- **previewCss**: CSS for the preview pane

### Word Config Options

For each style (heading1, heading2, body):

- **font**: Font family name (must match Google Fonts import)
- **size**: Font size in points
- **color**: Hex color without # (e.g., "000000")
- **bold**: true/false
- **italic**: true/false
- **underline**: true/false
- **allCaps**: true/false
- **smallCaps**: true/false
- **tracking**: Letter spacing in twips (1/20 of a point)
- **align**: "left", "center", "right", "both" (justify)
- **spacing**: Object with `before`, `after`, and `line` (all in twips)
- **border**: Optional border configuration
- **shading**: Optional background shading

### Where to Place Templates

#### For Personal Use (Recommended)
Place templates in the user data folder:
- Windows: `%APPDATA%/TypoGenie/TypoGenie-Data/templates/`
- macOS: `~/Library/Application Support/TypoGenie/TypoGenie-Data/templates/`
- Linux: `~/.config/TypoGenie/TypoGenie-Data/templates/`

Or use the "Open Templates Folder" button in the app.

#### For Distribution
Place templates in this folder (src-tauri/templates/) organized by category subfolders, then rebuild the app.

## Categories

- **Core**: Essential versatile styles
- **Minimalist**: Clean, simple designs
- **Editorial**: Magazine and newspaper styles
- **Corporate**: Business and professional
- **Tech**: Technology and startup
- **Creative**: Bold and artistic
- **Vintage**: Retro and nostalgic
- **Lifestyle**: Elegant and refined
- **Academic**: Scholarly and formal
- **Industrial**: Raw and utilitarian

## Tips

1. Test your template with various content types (headings, lists, code blocks, etc.)
2. Ensure the Word config and preview CSS match for consistency
3. Use web-safe fonts or Google Fonts for best compatibility
4. Colors should be hex without the # prefix in wordConfig
5. Colors should be hex WITH the # prefix in previewCss