typogenie/src-tauri/TEMPLATES-README.md

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

{
  "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)

"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)

"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

{
  "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!