# TypoGenie Templates

Templates in TypoGenie are stored as JSON files in the `TypoGenie-Data/templates/` folder.

## Folder Structure

```
TypoGenie-Data/
└── templates/
    ├── minimalist/
    │   ├── swiss-grid.json
    │   └── minimalist-white.json
    ├── tech/
    │   ├── tech-startup.json
    │   └── code-editor.json
    └── my-category/       ← Create new folders for custom categories!
        └── my-template.json
```

- Each **subfolder** in `templates/` is a category
- Each **.json file** in a category folder is a template
- Categories and templates are automatically discovered when the app loads

## Template JSON Format

```json
{
  "id": "my-template",
  "name": "My Template Name",
  "category": "My Category",
  "description": "A short description of this template",
  "vibe": "Keywords describing the style",
  "googleFontsImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
  "wordConfig": {
    "heading1": {
      "font": "Inter",
      "size": 28,
      "color": "000000",
      "bold": true,
      "align": "left",
      "spacing": { "before": 400, "after": 200, "line": 240 }
    },
    "heading2": {
      "font": "Inter",
      "size": 16,
      "color": "333333",
      "bold": true,
      "align": "left",
      "spacing": { "before": 320, "after": 160, "line": 240 }
    },
    "body": {
      "font": "Inter",
      "size": 10,
      "color": "444444",
      "align": "left",
      "spacing": { "before": 0, "after": 160, "line": 280 }
    },
    "accentColor": "6366F1"
  },
  "previewCss": "font-family: 'Inter', sans-serif; h1 { font-size: 28pt; font-weight: 700; } h2 { font-size: 16pt; font-weight: 700; } p { font-size: 10pt; line-height: 1.6; }"
}
```

## Field Reference

### Required Fields

- **id**: Unique identifier for the template (used in filenames, no spaces)
- **name**: Display name shown in the app
- **category**: Category name (should match the folder name)
- **description**: Brief description of the template
- **wordConfig**: Microsoft Word styling configuration
  - **heading1**: Style for H1 headings
  - **heading2**: Style for H2 headings  
  - **body**: Style for body text
  - **accentColor**: Accent color for borders and highlights (hex, no #)
- **previewCss**: CSS for the live preview (single line, no line breaks)

### Optional Fields

- **vibe**: Descriptive keywords for the template
- **googleFontsImport**: Google Fonts URL for web preview

## Text Configuration Options

### Font Settings
- **font**: Font family name (must be installed on user's system for Word)
- **size**: Font size in points (pt)
- **color**: Hex color code (without #)
- **bold**: true/false
- **italic**: true/false
- **allCaps**: true/false (transform text to uppercase)
- **tracking**: Character spacing (in twips, optional)
- **align**: "left", "center", "right", or "both" (justify)

### Spacing
- **spacing.before**: Space before paragraph (in twips)
- **spacing.after**: Space after paragraph (in twips)
- **spacing.line**: Line spacing (in twips, 240 = single, 360 = 1.5, 480 = double)

### Borders (Optional)
```json
"border": {
  "top": { "color": "000000", "space": 10, "style": "single", "size": 12 },
  "bottom": { "color": "000000", "space": 10, "style": "single", "size": 12 },
  "left": { "color": "000000", "space": 10, "style": "single", "size": 24 },
  "right": { "color": "000000", "space": 10, "style": "single", "size": 12 }
}
```

Border styles: `"single"`, `"double"`, `"dotted"`, `"dashed"`, `"thick"`

### Shading/Background (Optional)
```json
"shading": {
  "fill": "F0F0F0",
  "color": "auto",
  "style": "clear"
}
```

## Adding Custom Templates

1. Create a new folder in `TypoGenie-Data/templates/` (or use existing)
2. Create a `.json` file with your template configuration
3. Click the **Refresh** button in the app, or restart the app
4. Your template will appear in the style selector!

## Tips

- Use Google Fonts that have good Microsoft Word equivalents
- Test your template with both A4 and Letter paper sizes
- The previewCss should match the wordConfig styling as closely as possible
- Use hex colors without the # prefix
- Keep template IDs lowercase with hyphens (e.g., `my-awesome-template`)

## Example: Dark Theme Template

```json
{
  "id": "dark-mode",
  "name": "Dark Mode",
  "category": "Modern",
  "description": "Dark theme with high contrast for reduced eye strain",
  "vibe": "Dark, Modern, Accessible",
  "googleFontsImport": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap",
  "wordConfig": {
    "heading1": {
      "font": "Inter",
      "size": 32,
      "color": "FFFFFF",
      "bold": true,
      "align": "left",
      "spacing": { "before": 400, "after": 200, "line": 240 },
      "shading": { "fill": "1A1A1A", "color": "auto", "style": "clear" }
    },
    "heading2": {
      "font": "Inter",
      "size": 18,
      "color": "E0E0E0",
      "bold": true,
      "align": "left",
      "spacing": { "before": 320, "after": 160, "line": 240 }
    },
    "body": {
      "font": "Inter",
      "size": 11,
      "color": "CCCCCC",
      "align": "left",
      "spacing": { "before": 0, "after": 160, "line": 280 },
      "shading": { "fill": "121212", "color": "auto", "style": "clear" }
    },
    "accentColor": "6366F1"
  },
  "previewCss": "font-family: 'Inter', sans-serif; background: #121212; color: #CCCCCC; h1 { font-size: 32pt; font-weight: 700; color: #FFFFFF; background: #1A1A1A; padding: 16px; margin-bottom: 24px; } h2 { font-size: 18pt; font-weight: 700; color: #E0E0E0; margin-top: 32px; margin-bottom: 16px; } p { font-size: 11pt; line-height: 1.6; color: #CCCCCC; margin-bottom: 14px; }"
}
```

## Troubleshooting

- **Template not showing**: Check that the JSON is valid (use a JSON validator)
- **Fonts not working**: Ensure the font is installed on your system
- **Preview looks different from Word**: Adjust previewCss to match wordConfig
- **Category not showing**: Make sure the folder contains at least one valid .json file

Click **Refresh** in the app to reload templates without restarting!