lashman/typogenie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: port all template categories to JSON format

Browse Source 
- 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
This commit is contained in:
TypoGenie
2026-02-01 18:51:43 +02:00
parent a2631ac473
commit 60f39ed961
405 changed files with 69134 additions and 5936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/styles/templates/editorial/art-nouveau-organic.ts Normal file
View File

@@ -0,0 +1,33 @@
import { StyleOption } from '../../../types';
export const artNouveauOrganic: StyleOption = {
id: 'art-nouveau-organic',
name: 'Art Nouveau Organic',
category: 'Classic',
description: 'Inspired by the Art Nouveau movement (1890-1910). Flowing organic lines with nature-inspired elegance and whiplash curves.',
vibe: 'Organic, Flowing, Decorative',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:wght@400&family=Fanwood+Text:wght@400&display=swap',
wordConfig: {
heading1: {
font: "Sorts Mill Goudy", size: 32, color: "4A5D23", bold: false, align: 'center',
spacing: { before: 480, after: 280, line: 240 },
border: { bottom: { color: "8FA876", space: 10, style: "single", size: 8 } }
},
heading2: {
font: "Sorts Mill Goudy", size: 16, color: "6B7F4A", bold: false, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Fanwood Text", size: 11, color: "3D4A2D", align: 'both',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "8FA876"
},
previewCss: `
font-family: 'Fanwood Text', serif;
h1 { font-family: 'Sorts Mill Goudy', serif; font-size: 32pt; color: #4A5D23; text-align: center; border-bottom: 2px solid #8FA876; padding-bottom: 16px; margin-bottom: 32px; }
h2 { font-family: 'Sorts Mill Goudy', serif; font-size: 16pt; color: #6B7F4A; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
p { font-size: 11pt; line-height: 1.8; color: #3D4A2D; margin-bottom: 16px; text-align: justify; }
blockquote { background: #F4F7F0; padding: 20px; border-left: 3px solid #8FA876; margin: 28px 0; font-style: italic; }
`
};

35
src/styles/templates/editorial/arts-crafts-heritage.ts Normal file
View File

@@ -0,0 +1,35 @@
import { StyleOption } from '../../../types';
export const artsCraftsHeritage: StyleOption = {
id: 'arts-crafts-heritage',
name: 'Arts & Crafts Heritage',
category: 'Classic',
description: 'Inspired by William Morris and the Arts & Crafts movement (1880s-1900). Emphasizes craftsmanship, natural forms, and medieval aesthetics with readable typography.',
vibe: 'Artisan, Literary, Handcrafted',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=EB+Garamond:wght@400;500&display=swap',
wordConfig: {
heading1: {
font: "Cormorant Garamond", size: 28, color: "2F4F4F", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
border: {
bottom: { color: "556B2F", space: 8, style: "single", size: 8 }
}
},
heading2: {
font: "Cormorant Garamond", size: 16, color: "556B2F", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "EB Garamond", size: 11, color: "3C3C3C", align: 'both',
spacing: { before: 0, after: 160, line: 320 }
},
accentColor: "556B2F"
},
previewCss: `
font-family: 'EB Garamond', serif;
h1 { font-family: 'Cormorant Garamond', serif; font-size: 28pt; font-weight: 700; color: #2F4F4F; text-align: center; border-bottom: 2px solid #556B2F; padding-bottom: 16px; margin-bottom: 28px; }
h2 { font-family: 'Cormorant Garamond', serif; font-size: 16pt; font-weight: 700; color: #556B2F; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.8; color: #3C3C3C; margin-bottom: 14px; text-align: justify; }
blockquote { background: #F5F5DC; padding: 20px; border-left: 4px solid #556B2F; margin: 24px 0; font-style: italic; }
`
};

32
src/styles/templates/editorial/baroque-splendor.ts Normal file
View File

@@ -0,0 +1,32 @@
import { StyleOption } from '../../../types';
export const baroqueSplendor: StyleOption = {
id: 'baroque-splendor',
name: 'Baroque Splendor',
category: 'Classic',
description: 'Heavy, dramatic 17th-century luxury. Deep golds and crimsons with deeply flourished script.',
vibe: 'Luxurious, Dramatic, Heavy',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Mate:wght@400;500&display=swap',
wordConfig: {
heading1: {
font: "Mrs Saint Delafield", size: 48, color: "800000", bold: false, align: 'center',
spacing: { before: 520, after: 320, line: 240 }
},
heading2: {
font: "Mate", size: 16, color: "B8860B", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
body: {
font: "Mate", size: 12, color: "3D2B1F", align: 'both',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "B8860B"
},
previewCss: `
font-family: 'Mate', serif;
h1 { font-family: 'Mrs Saint Delafield', cursive; font-size: 48pt; color: #800000; text-align: center; margin-bottom: 36px; }
h2 { font-size: 16pt; font-weight: 700; color: #B8860B; text-align: center; margin-top: 40px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
p { font-size: 12pt; line-height: 1.8; color: #3D2B1F; margin-bottom: 16px; text-align: justify; }
blockquote { background: #FFF8E7; border: 2px double #B8860B; padding: 24px; margin: 32px 0; text-align: center; font-style: italic; }
`
};

33
src/styles/templates/editorial/cottagecore-journal.ts Normal file
View File

@@ -0,0 +1,33 @@
import { StyleOption } from '../../../types';
export const cottagecoreJournal: StyleOption = {
id: 'cottagecore-journal',
name: 'Cottagecore Journal',
category: 'Aesthetic',
description: 'Whimsical countryside diary. Handwritten fonts with soft sage greens and earthy browns.',
vibe: 'Whimsical, Nature, Handmade',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Patrick+Hand&display=swap',
wordConfig: {
heading1: {
font: "Amatic SC", size: 40, color: "33691E", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Patrick Hand", size: 18, color: "5D4037", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Patrick Hand", size: 14, color: "424242", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "33691E"
},
previewCss: `
font-family: 'Patrick Hand', cursive;
background: #F1F8E9;
h1 { font-family: 'Amatic SC', cursive; font-size: 40pt; font-weight: 700; color: #33691E; text-align: center; margin-bottom: 24px; }
h2 { font-size: 18pt; font-weight: 700; color: #5D4037; text-align: center; margin-top: 30px; margin-bottom: 14px; border-bottom: 1px dashed #8D6E63; display: inline-block; }
p { font-size: 14pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
blockquote { background: #FFF; border: 1px dotted #33691E; padding: 20px; border-radius: 10px; margin: 24px 0; }
`
};

32
src/styles/templates/editorial/dutch-golden-age.ts Normal file
View File

@@ -0,0 +1,32 @@
import { StyleOption } from '../../../types';
export const dutchGoldenAge: StyleOption = {
id: 'dutch-golden-age',
name: 'Dutch Golden Age',
category: 'Classic',
description: 'Inspired by 17th century Dutch art and typography. Rich, painterly aesthetics with Rembrandt-era elegance.',
vibe: 'Classical, Rich, Painterly',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Pirata+One&family=Gentium+Book+Plus:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Pirata One", size: 32, color: "3E2723", bold: false, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Gentium Book Plus", size: 14, color: "5D4037", bold: true, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Gentium Book Plus", size: 11, color: "4E342E", align: 'both',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "BF8040"
},
previewCss: `
font-family: 'Gentium Book Plus', serif;
h1 { font-family: 'Pirata One', cursive; font-size: 32pt; color: #3E2723; text-align: center; margin-bottom: 32px; }
h2 { font-size: 14pt; font-weight: 700; color: #5D4037; margin-top: 36px; margin-bottom: 18px; }
p { font-size: 11pt; line-height: 1.8; color: #4E342E; margin-bottom: 16px; text-align: justify; }
blockquote { background: #EFEBE9; padding: 20px; border: 1px solid #BF8040; margin: 28px 0; }
`
};

34
src/styles/templates/editorial/fashion-magazine.ts Normal file
View File

@@ -0,0 +1,34 @@
import { StyleOption } from '../../../types';
export const fashionMagazine: StyleOption = {
id: 'fashion-magazine',
name: 'Fashion Magazine',
category: 'Editorial',
description: 'Trendy and bold. High-contrast typography with oversized lettering and pink accents.',
vibe: 'Trendy, Loud, Pink',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@300;700&display=swap',
wordConfig: {
heading1: {
font: "Abril Fatface", size: 48, color: "E91E63", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 200 }
},
heading2: {
font: "Raleway", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true,
tracking: 200
},
body: {
font: "Raleway", size: 10, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "E91E63"
},
previewCss: `
font-family: 'Raleway', sans-serif;
h1 { font-family: 'Abril Fatface', cursive; font-size: 48pt; color: #E91E63; margin-bottom: 24px; line-height: 0.9; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 4px; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; font-weight: 300; }
blockquote { border-left: 10px solid #E91E63; padding-left: 20px; margin: 24px 0; font-family: 'Abril Fatface', cursive; font-size: 18pt; }
`
};

35
src/styles/templates/editorial/film-script.ts Normal file
View File

@@ -0,0 +1,35 @@
import { StyleOption } from '../../../types';
export const filmScript: StyleOption = {
id: 'film-script',
name: 'Film Script',
category: 'Editorial',
description: 'Hollywood screenplay format. Courier font, specific margins, and character name centering.',
vibe: 'Cinematic, Format, Draft',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'left',
spacing: { before: 240, after: 240, line: 240 },
allCaps: true,
underline: true
},
heading2: {
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'center',
spacing: { before: 480, after: 0, line: 240 },
allCaps: true
},
body: {
font: "Courier Prime", size: 12, color: "000000", align: 'left',
spacing: { before: 0, after: 0, line: 240 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Courier Prime', monospace;
h1 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; text-transform: uppercase; margin-bottom: 12px; }
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-transform: uppercase; text-align: center; margin-top: 24px; margin-bottom: 0px; }
p { font-size: 12pt; line-height: 1; color: #000000; margin-bottom: 12px; }
blockquote { margin: 0 40px; text-align: center; }
`
};

38
src/styles/templates/editorial/index.ts Normal file
View File

@@ -0,0 +1,38 @@
import { StyleOption } from '../../../types';
import { artNouveauOrganic } from './art-nouveau-organic';
import { artsCraftsHeritage } from './arts-crafts-heritage';
import { baroqueSplendor } from './baroque-splendor';
import { cottagecoreJournal } from './cottagecore-journal';
import { dutchGoldenAge } from './dutch-golden-age';
import { fashionMagazine } from './fashion-magazine';
import { filmScript } from './film-script';
import { indieZine } from './indie-zine';
import { literaryReview } from './literary-review';
import { luxuryEditorial } from './luxury-editorial';
import { neoGothicRevival } from './neo-gothic-revival';
import { newspaperClassic } from './newspaper-classic';
import { newspaperModern } from './newspaper-modern';
import { newspaperTabloid } from './newspaper-tabloid';
import { nyEditor } from './ny-editor';
import { rococoRomance } from './rococo-romance';
import { victorianOrnate } from './victorian-ornate';
export const editorialStyles: StyleOption[] = [
artNouveauOrganic,
artsCraftsHeritage,
baroqueSplendor,
cottagecoreJournal,
dutchGoldenAge,
fashionMagazine,
filmScript,
indieZine,
literaryReview,
luxuryEditorial,
neoGothicRevival,
newspaperClassic,
newspaperModern,
newspaperTabloid,
nyEditor,
rococoRomance,
victorianOrnate
];

34
src/styles/templates/editorial/indie-zine.ts Normal file
View File

@@ -0,0 +1,34 @@
import { StyleOption } from '../../../types';
export const indieZine: StyleOption = {
id: 'indie-zine',
name: 'Indie Zine',
category: 'Editorial',
description: 'DIY photocopier aesthetic. Typewriter fonts, cut-out look, and rebellious asymmetry.',
vibe: 'DIY, Rebellious, Rough',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Rock+Salt&display=swap',
wordConfig: {
heading1: {
font: "Rock Salt", size: 28, color: "000000", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "D1C4E9", color: "auto", style: "clear" }
},
heading2: {
font: "Special Elite", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "000000", space: 4, style: "single", size: 12 } }
},
body: {
font: "Special Elite", size: 10, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Special Elite', cursive;
h1 { font-family: 'Rock Salt', cursive; font-size: 28pt; color: #000000; background: #D1C4E9; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; display: inline-block; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; width: fit-content; }
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border: 2px dashed #000; padding: 16px; margin: 24px 0; transform: rotate(1deg); }
`
};

33
src/styles/templates/editorial/literary-review.ts Normal file
View File

@@ -0,0 +1,33 @@
import { StyleOption } from '../../../types';
export const literaryReview: StyleOption = {
id: 'literary-review',
name: 'Literary Review',
category: 'Editorial',
description: 'Classic bookish aesthetic. Dense serif text, elegant headers, perfect for long-form essays.',
vibe: 'Intellectual, Dense, Classic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Sorts+Mill+Goudy&display=swap',
wordConfig: {
heading1: {
font: "Crimson Pro", size: 30, color: "4A148C", bold: true, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Crimson Pro", size: 14, color: "000000", bold: false, align: 'center',
spacing: { before: 360, after: 180, line: 240 },
smallCaps: true
},
body: {
font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'both',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "4A148C"
},
previewCss: `
font-family: 'Sorts Mill Goudy', serif;
h1 { font-family: 'Crimson Pro', serif; font-size: 30pt; font-weight: 700; color: #4A148C; text-align: center; margin-bottom: 32px; }
h2 { font-family: 'Crimson Pro', serif; font-size: 14pt; color: #000000; text-align: center; margin-top: 36px; margin-bottom: 18px; font-variant: small-caps; }
p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
blockquote { margin: 24px 40px; font-style: italic; color: #4A148C; }
`
};

32
src/styles/templates/editorial/luxury-editorial.ts Normal file
View File

@@ -0,0 +1,32 @@
import { StyleOption } from '../../../types';
export const luxuryEditorial: StyleOption = {
id: 'luxury-editorial',
name: 'Luxury Editorial',
category: 'Editorial',
description: 'High-fashion magazine inspired design. Elegant serifs with sophisticated spacing and premium feel for upscale content.',
vibe: 'Fashion, Premium, Sophisticated',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;700&family=Montserrat:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Cormorant", size: 36, color: "1C1C1C", bold: false, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Montserrat", size: 11, color: "1C1C1C", bold: true, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Montserrat", size: 10, color: "3A3A3A", align: 'left',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "B8860B"
},
previewCss: `
font-family: 'Montserrat', sans-serif;
h1 { font-family: 'Cormorant', serif; font-size: 36pt; font-weight: 500; color: #1C1C1C; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
h2 { font-size: 11pt; font-weight: 500; color: #1C1C1C; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; }
p { font-size: 10pt; line-height: 1.7; color: #3A3A3A; margin-bottom: 16px; font-weight: 300; }
blockquote { border-top: 1px solid #B8860B; border-bottom: 1px solid #B8860B; padding: 24px 0; margin: 32px 0; text-align: center; font-family: 'Cormorant', serif; font-size: 14pt; font-style: italic; }
`
};

36
src/styles/templates/editorial/neo-gothic-revival.ts Normal file
View File

@@ -0,0 +1,36 @@
import { StyleOption } from '../../../types';
export const neoGothicRevival: StyleOption = {
id: 'neo-gothic-revival',
name: 'Neo-Gothic Revival',
category: 'Classic',
description: 'Inspired by Gothic architecture and medieval manuscripts. Dark, dramatic typography with ecclesiastical gravitas.',
vibe: 'Medieval, Dramatic, Historic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Spectral:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Cinzel Decorative", size: 28, color: "1A1A1A", bold: true, align: 'center',
spacing: { before: 480, after: 280, line: 240 },
border: {
top: { color: "4A0E0E", space: 12, style: "single", size: 16 },
bottom: { color: "4A0E0E", space: 12, style: "single", size: 16 }
}
},
heading2: {
font: "Cinzel Decorative", size: 14, color: "4A0E0E", bold: false, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Spectral", size: 11, color: "2C2C2C", align: 'both',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "4A0E0E"
},
previewCss: `
font-family: 'Spectral', serif;
h1 { font-family: 'Cinzel Decorative', cursive; font-size: 28pt; font-weight: 700; color: #1A1A1A; text-align: center; border-top: 3px solid #4A0E0E; border-bottom: 3px solid #4A0E0E; padding: 20px 0; margin-bottom: 32px; }
h2 { font-family: 'Cinzel Decorative', cursive; font-size: 14pt; color: #4A0E0E; margin-top: 36px; margin-bottom: 18px; }
p { font-size: 11pt; line-height: 1.8; color: #2C2C2C; margin-bottom: 16px; text-align: justify; }
blockquote { background: #F5F5EB; padding: 20px; border-left: 4px solid #4A0E0E; margin: 28px 0; font-style: italic; }
`
};

32
src/styles/templates/editorial/newspaper-classic.ts Normal file
View File

@@ -0,0 +1,32 @@
import { StyleOption } from '../../../types';
export const newspaperClassic: StyleOption = {
id: 'newspaper-classic',
name: 'Newspaper Classic',
category: 'Editorial',
description: 'Traditional newspaper layout with strong typographic hierarchy. Bold headlines, readable body text, and authoritative presence.',
vibe: 'News, Authority, Information',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=PT+Serif:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Playfair Display", size: 36, color: "000000", bold: true, align: 'center',
spacing: { before: 240, after: 160, line: 220 }
},
heading2: {
font: "Playfair Display", size: 16, color: "000000", bold: true, align: 'left',
spacing: { before: 240, after: 120, line: 240 }
},
body: {
font: "PT Serif", size: 10, color: "1A1A1A", align: 'both',
spacing: { before: 0, after: 120, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'PT Serif', serif;
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 900; color: #000000; text-align: center; border-bottom: 2px solid #000000; padding-bottom: 12px; margin-bottom: 20px; }
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 10px; text-align: justify; }
blockquote { font-size: 14pt; font-style: italic; text-align: center; margin: 24px 40px; }
`
};

32
src/styles/templates/editorial/newspaper-modern.ts Normal file
View File

@@ -0,0 +1,32 @@
import { StyleOption } from '../../../types';
export const newspaperModern: StyleOption = {
id: 'newspaper-modern',
name: 'Newspaper Modern',
category: 'Editorial',
description: 'Contemporary newspaper design balancing tradition with modern sensibilities. Clean grid-based layout.',
vibe: 'Modern, Editorial, Informative',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap',
wordConfig: {
heading1: {
font: "DM Serif Display", size: 36, color: "1A1A1A", bold: false, align: 'left',
spacing: { before: 320, after: 200, line: 220 }
},
heading2: {
font: "DM Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 }
},
body: {
font: "DM Sans", size: 10, color: "333333", align: 'both',
spacing: { before: 0, after: 140, line: 280 }
},
accentColor: "DC2626"
},
previewCss: `
font-family: 'DM Sans', sans-serif;
h1 { font-family: 'DM Serif Display', serif; font-size: 36pt; color: #1A1A1A; margin-bottom: 24px; }
h2 { font-size: 12pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 12px; text-align: justify; }
blockquote { font-size: 16pt; font-style: italic; font-family: 'DM Serif Display', serif; text-align: center; margin: 28px 20px; color: #DC2626; }
`
};

33
src/styles/templates/editorial/newspaper-tabloid.ts Normal file
View File

@@ -0,0 +1,33 @@
import { StyleOption } from '../../../types';
export const newspaperTabloid: StyleOption = {
id: 'newspaper-tabloid',
name: 'Newspaper Tabloid',
category: 'Editorial',
description: 'Sensationalist news design. Condensed, heavy headers with urgent red accents.',
vibe: 'Urgent, Bold, Sensational',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Pathway+Extreme:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Antonio", size: 42, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 360, after: 200, line: 200 },
shading: { fill: "D50000", color: "auto", style: "clear" }
},
heading2: {
font: "Antonio", size: 20, color: "000000", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 220 }
},
body: {
font: "Pathway Extreme", size: 10, color: "111111", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D50000"
},
previewCss: `
font-family: 'Pathway Extreme', sans-serif;
h1 { font-family: 'Antonio', sans-serif; font-size: 42pt; font-weight: 700; color: #FFFFFF; background: #D50000; padding: 12px 16px; margin-bottom: 24px; text-transform: uppercase; line-height: 1; }
h2 { font-family: 'Antonio', sans-serif; font-size: 20pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.5; color: #111111; margin-bottom: 14px; }
blockquote { font-size: 14pt; font-weight: 700; font-style: italic; color: #000000; border-left: 6px solid #D50000; padding-left: 16px; margin: 24px 0; }
`
};

33
src/styles/templates/editorial/ny-editor.ts Normal file
View File

@@ -0,0 +1,33 @@
import { StyleOption } from '../../../types';
export const nyEditor: StyleOption = {
id: 'ny-editor',
name: 'The Editorial',
category: 'Editorial',
description: 'High-contrast serifs, centered headers, delicate borders. Feels like a premium magazine feature.',
vibe: 'Luxury, Fashion, Literature',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;1,400&display=swap',
wordConfig: {
heading1: {
font: "Playfair Display", size: 36, color: "111111", bold: true, italic: true, align: 'center',
spacing: { before: 600, after: 400, line: 240 }
},
heading2: {
font: "Playfair Display", size: 14, color: "444444", bold: true, allCaps: true, tracking: 100, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "DDDDDD", space: 8, style: "single", size: 4 } }
},
body: {
font: "Lora", size: 11, color: "333333", align: 'both',
spacing: { before: 0, after: 200, line: 320 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Lora', serif;
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 700; font-style: italic; text-align: center; margin-bottom: 30px; }
h2 { font-family: 'Playfair Display', serif; font-size: 14pt; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 40px; color: #444; }
p { font-size: 11pt; line-height: 1.8; text-align: justify; margin-bottom: 20px; }
blockquote { font-family: 'Playfair Display', serif; font-size: 18pt; font-style: italic; text-align: center; color: #555; margin: 40px 20px; border: none; }
`
};

32
src/styles/templates/editorial/rococo-romance.ts Normal file
View File

@@ -0,0 +1,32 @@
import { StyleOption } from '../../../types';
export const rococoRomance: StyleOption = {
id: 'rococo-romance',
name: 'Rococo Romance',
category: 'Classic',
description: 'Inspired by 18th-century Rococo. Light, playful, and intricate with pastel tones and swirling elegance.',
vibe: 'Romantic, Ornate, Pastel',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Playfair+Display+SC:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Pinyon Script", size: 36, color: "D87093", bold: false, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Playfair Display SC", size: 14, color: "C0A080", bold: true, align: 'center',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Playfair Display SC", size: 10, color: "555555", align: 'center',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "FFB6C1"
},
previewCss: `
font-family: 'Playfair Display SC', serif;
h1 { font-family: 'Pinyon Script', cursive; font-size: 36pt; color: #D87093; text-align: center; margin-bottom: 32px; }
h2 { font-size: 14pt; font-weight: 700; color: #C0A080; text-align: center; margin-top: 36px; margin-bottom: 18px; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 1.8; color: #555555; margin-bottom: 16px; text-align: center; }
blockquote { border: 1px solid #FFB6C1; padding: 20px; border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%; margin: 28px 40px; text-align: center; }
`
};

33
src/styles/templates/editorial/victorian-ornate.ts Normal file
View File

@@ -0,0 +1,33 @@
import { StyleOption } from '../../../types';
export const victorianOrnate: StyleOption = {
id: 'victorian-ornate',
name: 'Victorian Ornate',
category: 'Classic',
description: 'Inspired by the decorative exuberance of the Victorian era (1837-1901). Features rich typography with ornamental borders and jewel-tone accents.',
vibe: 'Traditional, Formal, Heritage',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Playfair Display", size: 26, color: "2C1810", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "8B4513", space: 8, style: "double", size: 12 } }
},
heading2: {
font: "Playfair Display", size: 16, color: "5D3A1A", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Crimson Text", size: 11, color: "3D2914", align: 'both',
spacing: { before: 0, after: 160, line: 320 }
},
accentColor: "8B4513"
},
previewCss: `
font-family: 'Crimson Text', serif;
h1 { font-family: 'Playfair Display', serif; font-size: 26pt; font-weight: 700; color: #2C1810; text-align: center; border-bottom: 4px double #8B4513; padding-bottom: 12px; margin-bottom: 24px; }
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #5D3A1A; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.8; color: #3D2914; margin-bottom: 14px; text-align: justify; }
blockquote { background: #FDF5E6; padding: 20px; border: 1px solid #D4A574; color: #5D3A1A; margin: 24px 0; font-style: italic; }
`
};