60f39ed961
- Ported Minimalist templates to JSON (Swiss Grid, Brutalist, etc.) - Ported Tech templates to JSON (SaaS, Terminal, Cyberpunk, etc.) - Ported Creative templates to JSON (Art Gallery, Zine, Pop Art, etc.) - Ported Industrial templates to JSON (Blueprint, Factory, Schematic, etc.) - Ported Nature templates to JSON (Botanical, Ocean, Mountain, etc.) - Ported Lifestyle templates to JSON (Cookbook, Travel, Coffee House, etc.) - Ported Vintage templates to JSON (Art Deco, Medieval, Retro 80s, etc.) - Updated README.md to reflect the new JSON-based style system (example configuration and contribution workflow) - Completed migration of over 150 styles to the new architecture
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:
{
"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, andline(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
- Test your template with various content types (headings, lists, code blocks, etc.)
- Ensure the Word config and preview CSS match for consistency
- Use web-safe fonts or Google Fonts for best compatibility
- Colors should be hex without the # prefix in wordConfig
- Colors should be hex WITH the # prefix in previewCss