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

Initial commit: TypoGenie - Markdown to Word document converter

Browse Source
This commit is contained in:
TypoGenie
2026-01-29 18:10:07 +02:00
commit f179e79f35
29 changed files with 6708 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

407
styles/academic.ts Normal file
View File

@@ -0,0 +1,407 @@
import { StyleOption } from '../types';
export const academicStyles: StyleOption[] = [
{
id: 'academic-journal',
name: 'Academic Journal',
category: 'Academic',
description: 'Scholarly and rigorous design for academic papers and research publications. Traditional serif typography optimized for extended reading.',
vibe: 'Scholarly, Serious, Traditional',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Libre Baskerville", size: 18, color: "000000", bold: true, align: 'center',
spacing: { before: 360, after: 240, line: 240 }
},
heading2: {
font: "Libre Baskerville", size: 13, color: "000000", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 }
},
body: {
font: "Libre Baskerville", size: 10, color: "1A1A1A", align: 'both',
spacing: { before: 0, after: 140, line: 300 }
},
accentColor: "800000"
},
previewCss: `
font-family: 'Libre Baskerville', serif;
h1 { font-size: 18pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 28px; }
h2 { font-size: 13pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; }
p { font-size: 10pt; line-height: 1.7; color: #1A1A1A; margin-bottom: 12px; text-align: justify; }
blockquote { padding-left: 40px; margin: 20px 0; font-size: 9pt; color: #333333; }
`
},
{
id: 'medical-professional',
name: 'Medical Professional',
category: 'Healthcare',
description: 'Clean, clinical design for healthcare and medical documentation. Emphasizes clarity and professionalism with calming blue accents.',
vibe: 'Clinical, Professional, Trustworthy',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Open Sans", size: 20, color: "1565C0", bold: true, align: 'left',
spacing: { before: 360, after: 200, line: 240 }
},
heading2: {
font: "Open Sans", size: 13, color: "0D47A1", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 }
},
body: {
font: "Open Sans", size: 10, color: "37474F", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "1565C0"
},
previewCss: `
font-family: 'Open Sans', sans-serif;
h1 { font-size: 20pt; font-weight: 700; color: #1565C0; margin-bottom: 20px; }
h2 { font-size: 13pt; font-weight: 700; color: #0D47A1; margin-top: 28px; margin-bottom: 14px; }
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
blockquote { background: #E3F2FD; padding: 16px; border-left: 4px solid #1565C0; margin: 20px 0; }
`
},
{
id: 'education-friendly',
name: 'Education Friendly',
category: 'Education',
description: 'Approachable and clear design for educational materials. High readability with friendly colors suitable for learning environments.',
vibe: 'Friendly, Educational, Accessible',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Nunito", size: 24, color: "5E35B1", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "EDE7F6", color: "auto", style: "clear" }
},
heading2: {
font: "Nunito", size: 14, color: "7E57C2", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Nunito", size: 11, color: "424242", align: 'left',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "5E35B1"
},
previewCss: `
font-family: 'Nunito', sans-serif;
h1 { font-size: 24pt; font-weight: 700; color: #5E35B1; background: #EDE7F6; padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #7E57C2; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 11pt; line-height: 1.7; color: #424242; margin-bottom: 14px; }
blockquote { background: #F3E5F5; padding: 16px; border-radius: 8px; border-left: 4px solid #7E57C2; margin: 20px 0; }
`
},
{
id: 'scientific-journal',
name: 'Scientific Journal',
category: 'Academic',
description: 'Precise design for scientific publications. Clear hierarchy optimized for data-heavy content and citations.',
vibe: 'Scientific, Precise, Academic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Literata:wght@400;500;700&family=Fira+Sans:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Literata", size: 18, color: "1A1A1A", bold: true, align: 'left',
spacing: { before: 360, after: 200, line: 260 }
},
heading2: {
font: "Fira Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
spacing: { before: 280, after: 120, line: 240 }
},
body: {
font: "Literata", size: 10, color: "262626", align: 'both',
spacing: { before: 0, after: 140, line: 280 }
},
accentColor: "0066CC"
},
previewCss: `
font-family: 'Literata', serif;
h1 { font-size: 18pt; font-weight: 700; color: #1A1A1A; margin-bottom: 24px; }
h2 { font-family: 'Fira Sans', sans-serif; font-size: 12pt; font-weight: 600; color: #1A1A1A; margin-top: 28px; margin-bottom: 12px; }
p { font-size: 10pt; line-height: 1.6; color: #262626; margin-bottom: 12px; text-align: justify; }
blockquote { padding-left: 24px; border-left: 2px solid #0066CC; margin: 16px 0; font-size: 9pt; }
`
},
{
id: 'kids-education',
name: 'Kids Education',
category: 'Education',
description: 'Fun and engaging design for children\'s educational content. Rounded typography with bright, cheerful colors.',
vibe: 'Educational, Fun, Engaging',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Fredoka", size: 32, color: "FF6B6B", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "FFF9DB", color: "auto", style: "clear" }
},
heading2: {
font: "Fredoka", size: 18, color: "4ECDC4", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Fredoka", size: 12, color: "495057", align: 'left',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "FF6B6B"
},
previewCss: `
font-family: 'Fredoka', sans-serif;
h1 { font-size: 32pt; font-weight: 600; color: #FF6B6B; text-align: center; background: #FFF9DB; padding: 16px 20px; border-radius: 12px; margin-bottom: 28px; }
h2 { font-size: 18pt; font-weight: 500; color: #4ECDC4; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 12pt; line-height: 1.8; color: #495057; margin-bottom: 16px; }
blockquote { background: #E3F9F8; padding: 16px; border-radius: 12px; border-left: 6px solid #4ECDC4; margin: 20px 0; }
`
},
{
id: 'dark-academia',
name: 'Dark Academia',
category: 'Academic',
description: 'Moody, literary aesthetic. Tweed textures, old libraries, and classic serif typography.',
vibe: 'Moody, Scholarly, Literary',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Alegreya+SC:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Alegreya SC", size: 28, color: "3E2723", bold: true, align: 'center',
spacing: { before: 480, after: 280, line: 240 },
border: { bottom: { color: "5D4037", space: 6, style: "double", size: 12 } }
},
heading2: {
font: "Alegreya", size: 16, color: "4E342E", bold: true, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Alegreya", size: 11, color: "212121", align: 'both',
spacing: { before: 0, after: 180, line: 320 }
},
accentColor: "5D4037"
},
previewCss: `
font-family: 'Alegreya', serif;
background: #F5F1E8;
h1 { font-family: 'Alegreya SC', serif; font-size: 28pt; font-weight: 700; color: #3E2723; text-align: center; border-bottom: 4px double #5D4037; padding-bottom: 16px; margin-bottom: 32px; }
h2 { font-size: 16pt; font-weight: 700; color: #4E342E; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
blockquote { border-left: 2px solid #3E2723; padding-left: 20px; margin: 28px 0; font-style: italic; color: #4E342E; }
`
},
{
id: 'botanical-textbook',
name: 'Botanical Textbook',
category: 'Scientific',
description: 'Vintage science textbook aesthetic. Academic yet organic, like a 19th-century flora guide.',
vibe: 'Vintage, Scientific, Organic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alice&family=Gentium+Book+Basic:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Alice", size: 28, color: "33691E", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "827717", space: 6, style: "single", size: 8 } }
},
heading2: {
font: "Gentium Book Basic", size: 14, color: "558B2F", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Gentium Book Basic", size: 11, color: "1B1B1B", align: 'both',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "827717"
},
previewCss: `
font-family: 'Gentium Book Basic', serif;
h1 { font-family: 'Alice', serif; font-size: 28pt; color: #33691E; border-bottom: 2px solid #827717; padding-bottom: 10px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #558B2F; margin-top: 30px; margin-bottom: 14px; font-style: italic; }
p { font-size: 11pt; line-height: 1.7; color: #1B1B1B; margin-bottom: 14px; text-align: justify; }
blockquote { background: #F9FBE7; padding: 16px; border-left: 4px solid #827717; margin: 20px 0; font-size: 10pt; }
`
},
{
id: 'chemistry-lab',
name: 'Chemistry Lab',
category: 'Scientific',
description: 'Clean, molecular design. Modern thin typography suitable for diagrams and formulas.',
vibe: 'Scientific, Modern, Molecular',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;600;700&family=Heebo:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Advent Pro", size: 32, color: "00BCD4", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Heebo", size: 16, color: "0097A7", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Heebo", size: 10, color: "37474F", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "00BCD4"
},
previewCss: `
font-family: 'Heebo', sans-serif;
h1 { font-family: 'Advent Pro', sans-serif; font-size: 32pt; font-weight: 700; color: #00BCD4; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 700; color: #0097A7; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; font-weight: 300; }
blockquote { border: 1px solid #00BCD4; padding: 16px; margin: 20px 0; border-radius: 8px; background: #E0F7FA; }
`
},
{
id: 'mathematics-paper',
name: 'Mathematics Paper',
category: 'Academic',
description: 'Inspired by LaTeX and Computer Modern. Serif-heavy, precise, and highly legible for academic rigor.',
vibe: 'Academic, Rigorous, Formal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Noticia+Text:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Domine", size: 24, color: "000000", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 }
},
heading2: {
font: "Domine", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Noticia Text", size: 11, color: "212121", align: 'both',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Noticia Text', serif;
h1 { font-family: 'Domine', serif; font-size: 24pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 24px; }
h2 { font-family: 'Domine', serif; font-size: 14pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
blockquote { border-left: 3px solid #000; padding-left: 20px; margin: 24px 0; font-style: italic; background: #F5F5F5; padding: 10px 20px; }
`
},
{
id: 'phd-thesis',
name: 'PhD Thesis',
category: 'Academic',
description: 'The pinnacle of academic formatting. Extremely legible serif body, double spacing, and rigorous margin structure.',
vibe: 'Formal, Scholarly, Prestigious',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Tinos", size: 24, color: "000000", bold: true, align: 'center',
spacing: { before: 480, after: 240, line: 240 },
allCaps: true
},
heading2: {
font: "Tinos", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 240, after: 120, line: 240 }
},
body: {
font: "Crimson Text", size: 12, color: "000000", align: 'both',
spacing: { before: 0, after: 0, line: 480 } // Double spaced
},
accentColor: "000000"
},
previewCss: `
font-family: 'Crimson Text', serif;
line-height: 2.0;
h1 { font-family: 'Tinos', serif; font-size: 24pt; font-weight: 700; text-align: center; text-transform: uppercase; margin-bottom: 24px; }
h2 { font-family: 'Tinos', serif; font-size: 14pt; font-weight: 700; margin-top: 24px; margin-bottom: 12px; }
p { font-size: 12pt; text-align: justify; margin-bottom: 0; }
blockquote { margin-left: 40px; font-style: italic; }
`
},
{
id: 'history-textbook',
name: 'History Textbook',
category: 'Academic',
description: 'Classic textbook design. Sepia tones, distinct serif headers, and wide margins for notes.',
vibe: 'Classic, Educational, Historical',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Sorts+Mill+Goudy&display=swap',
wordConfig: {
heading1: {
font: "Goudy Bookletter 1911", size: 28, color: "5D4037", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "8D6E63", space: 4, style: "single", size: 8 } }
},
heading2: {
font: "Sorts Mill Goudy", size: 16, color: "3E2723", bold: false, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "8D6E63"
},
previewCss: `
font-family: 'Sorts Mill Goudy', serif;
background: #FFF8E1;
h1 { font-family: 'Goudy Bookletter 1911', serif; font-size: 28pt; color: #5D4037; border-bottom: 2px solid #8D6E63; padding-bottom: 10px; margin-bottom: 24px; }
h2 { font-size: 16pt; color: #3E2723; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 11pt; line-height: 1.7; color: #212121; margin-bottom: 14px; }
blockquote { background: #FFF; padding: 16px; border: 1px solid #8D6E63; margin: 20px 0; }
`
},
{
id: 'scantron-test',
name: 'Scantron Test',
category: 'Academic',
description: 'Standardized testing sheet. Salmon pinks and greens with bubble-filling aesthetics.',
vibe: 'Academic, Retro, Bureaucratic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Roboto Mono", size: 28, color: "B71C1C", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "EF5350", space: 4, style: "single", size: 12 } }
},
heading2: {
font: "Roboto Mono", size: 14, color: "1B5E20", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "E8F5E9", color: "auto", style: "clear" }
},
body: {
font: "Roboto Mono", size: 10, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "EF5350"
},
previewCss: `
font-family: 'Roboto Mono', monospace;
background: #FFF3E0; /* Light salmonish tint */
h1 { font-size: 28pt; font-weight: 700; color: #B71C1C; border-bottom: 2px solid #EF5350; padding-bottom: 8px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #1B5E20; background: #C8E6C9; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; border-radius: 12px; }
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border: 1px solid #B71C1C; padding: 16px; margin: 24px 0; border-radius: 8px; background: #FFEBEE; }
`
},
{
id: 'emergency-room',
name: 'Emergency Room',
category: 'Medical',
description: 'Hospital signage. Sterile white, urgent red, and clean blue.',
vibe: 'Sterile, Urgent, Clean',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Heebo:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Assistant", size: 36, color: "D50000", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "D50000", space: 4, style: "single", size: 12 } }
},
heading2: {
font: "Heebo", size: 18, color: "2962FF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Heebo", size: 11, color: "424242", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D50000"
},
previewCss: `
font-family: 'Heebo', sans-serif;
h1 { font-family: 'Assistant', sans-serif; font-size: 36pt; font-weight: 700; color: #D50000; border-bottom: 4px solid #D50000; padding-bottom: 8px; margin-bottom: 24px; }
h2 { font-size: 18pt; font-weight: 700; color: #2962FF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
blockquote { background: #FFEBEE; border-left: 6px solid #D50000; padding: 16px; margin: 24px 0; }
`
}
];

1
styles/core.ts Normal file
View File

@@ -0,0 +1 @@
// Styles have been moved to categorized files.

430
styles/corporate.ts Normal file
View File

@@ -0,0 +1,430 @@
import { StyleOption } from '../types';
export const corporateStyles: StyleOption[] = [
{
id: 'tech-memo',
name: 'Tech Memorandum',
category: 'Corporate',
description: 'Modern, functional, and authoritative. Uses shading for headers to create distinct sections.',
vibe: 'Corporate, Tech, Strategy',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
wordConfig: {
heading1: {
font: "Roboto", size: 24, color: "0F172A", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "F1F5F9", color: "auto", style: "clear" },
border: { left: { color: "2563EB", space: 10, style: "single", size: 48 } }
},
heading2: {
font: "Roboto", size: 14, color: "2563EB", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Roboto", size: 10, color: "334155", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "2563EB"
},
previewCss: `
font-family: 'Roboto', sans-serif;
h1 { font-size: 24pt; font-weight: 700; background: #F1F5F9; color: #0F172A; padding: 12px 16px; border-left: 8px solid #2563EB; margin-bottom: 20px; }
h2 { font-size: 14pt; font-weight: 700; color: #2563EB; margin-top: 30px; margin-bottom: 12px; }
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; }
blockquote { background: #EFF6FF; padding: 16px; border-radius: 4px; color: #1E40AF; border-left: 4px solid #2563EB; margin: 20px 0; }
`
},
{
id: 'annual-report',
name: 'Annual Report',
category: 'Corporate',
description: 'Trustworthy and substantial. Deep navy blues, clean sans-serifs, and grid-like precision.',
vibe: 'Financial, Serious, Trust',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700;900&family=Merriweather:wght@300;400&display=swap',
wordConfig: {
heading1: {
font: "Libre Franklin", size: 32, color: "0D2B46", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Libre Franklin", size: 16, color: "A0A0A0", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Merriweather", size: 10, color: "333333", align: 'both',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "0D2B46"
},
previewCss: `
font-family: 'Merriweather', serif;
h1 { font-family: 'Libre Franklin', sans-serif; font-size: 32pt; font-weight: 900; color: #0D2B46; margin-bottom: 24px; }
h2 { font-family: 'Libre Franklin', sans-serif; font-size: 16pt; font-weight: 700; color: #A0A0A0; text-transform: uppercase; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CCC; padding-bottom: 4px; }
p { font-size: 10pt; line-height: 1.8; color: #333333; margin-bottom: 14px; text-align: justify; }
blockquote { border-left: 4px solid #0D2B46; padding-left: 16px; margin: 24px 0; color: #0D2B46; font-style: italic; }
`
},
{
id: 'legal-contract',
name: 'Legal Contract',
category: 'Corporate',
description: 'Binding agreement style. Serif fonts, justified text, and numbered section aesthetics.',
vibe: 'Legal, Binding, Formal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Tinos", size: 14, color: "000000", bold: true, align: 'center',
spacing: { before: 240, after: 240, line: 240 },
allCaps: true
},
heading2: {
font: "Tinos", size: 12, color: "000000", bold: true, align: 'left',
spacing: { before: 240, after: 120, line: 240 },
underline: true
},
body: {
font: "Tinos", size: 11, color: "000000", align: 'both',
spacing: { before: 0, after: 120, line: 240 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Tinos', serif;
h1 { font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-transform: uppercase; margin-bottom: 16px; }
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; margin-top: 24px; margin-bottom: 12px; }
p { font-size: 11pt; line-height: 1.4; color: #000000; margin-bottom: 12px; text-align: justify; }
blockquote { margin: 20px 40px; border: 1px solid #000; padding: 10px; }
`
},
{
id: 'corporate-executive',
name: 'Corporate Executive',
category: 'Corporate',
description: 'Authoritative and professional. Designed for board reports, executive summaries, and high-stakes business communications.',
vibe: 'Executive, Formal, Trustworthy',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Source Serif 4", size: 24, color: "1A237E", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Source Sans 3", size: 14, color: "303F9F", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Source Sans 3", size: 10, color: "333333", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "1A237E"
},
previewCss: `
font-family: 'Source Sans 3', sans-serif;
h1 { font-family: 'Source Serif 4', serif; font-size: 24pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; border-bottom: 2px solid #1A237E; padding-bottom: 8px; }
h2 { font-size: 14pt; font-weight: 600; color: #303F9F; margin-top: 30px; margin-bottom: 12px; }
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
blockquote { border-left: 4px solid #1A237E; padding-left: 16px; color: #1A237E; margin: 20px 0; font-style: italic; }
`
},
{
id: 'political-campaign',
name: 'Political Campaign',
category: 'Professional',
description: 'Bold, patriotic design for campaigns. Strong headers with red, white, and blue motifs.',
vibe: 'Patriotic, Bold, Official',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Francois+One&family=Cabin:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Francois One", size: 36, color: "0D47A1", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "D32F2F", space: 8, style: "single", size: 12 } }
},
heading2: {
font: "Cabin", size: 16, color: "D32F2F", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Cabin", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D32F2F"
},
previewCss: `
font-family: 'Cabin', sans-serif;
h1 { font-family: 'Francois One', sans-serif; font-size: 36pt; color: #0D47A1; border-bottom: 4px solid #D32F2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-size: 16pt; font-weight: 700; color: #D32F2F; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { background: #E3F2FD; padding: 20px; border-left: 8px solid #0D47A1; margin: 24px 0; }
`
},
{
id: 'passport-official',
name: 'Passport Official',
category: 'Government',
description: 'International travel document aesthetic. Machine-readable fonts with secure, bureaucratic vibes.',
vibe: 'Official, Secure, Monospace',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;700&family=Courier+Prime&display=swap',
wordConfig: {
heading1: {
font: "Martian Mono", size: 22, color: "1A237E", bold: true, align: 'left',
spacing: { before: 360, after: 200, line: 240 }
},
heading2: {
font: "Martian Mono", size: 12, color: "B71C1C", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 },
allCaps: true
},
body: {
font: "Courier Prime", size: 10, color: "212121", align: 'left',
spacing: { before: 0, after: 140, line: 260 }
},
accentColor: "B71C1C"
},
previewCss: `
font-family: 'Courier Prime', monospace;
h1 { font-family: 'Martian Mono', monospace; font-size: 22pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; letter-spacing: -1px; }
h2 { font-family: 'Martian Mono', monospace; font-size: 12pt; font-weight: 700; color: #B71C1C; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
blockquote { border: 1px dashed #1A237E; padding: 16px; margin: 20px 0; background: #E8EAF6; }
`
},
{
id: 'top-secret-redacted',
name: 'Top Secret Redacted',
category: 'Government',
description: 'Declassified document style. Typewriter fonts with "blacked out" highlight effects.',
vibe: 'Secret, Classified, Rough',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Special Elite", size: 28, color: "000000", bold: false, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
border: {
top: { color: "000000", space: 6, style: "single", size: 24 },
bottom: { color: "000000", space: 6, style: "single", size: 24 }
}
},
heading2: {
font: "Courier Prime", size: 14, color: "B71C1C", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "000000", color: "auto", style: "clear" } // Red text on black bar
},
body: {
font: "Courier Prime", size: 11, color: "000000", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Courier Prime', monospace;
background: #F5F5F5;
h1 { font-family: 'Special Elite', cursive; font-size: 28pt; color: #000000; border-top: 4px solid #000; border-bottom: 4px solid #000; padding: 16px 0; text-align: center; margin-bottom: 28px; text-transform: uppercase; }
h2 { font-size: 14pt; font-weight: 700; color: #B71C1C; background: #000000; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
blockquote { background: #000; color: #000; padding: 10px; margin: 20px 0; user-select: none; }
blockquote:hover { color: #FFF; } /* Easter egg for preview */
`
},
{
id: 'legal-pleading',
name: 'Legal Pleading',
category: 'Professional',
description: 'Courtroom document style. Rigid framing, double spacing, and traditional serif fonts.',
vibe: 'Legal, Strict, Formal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Courier+Prime&display=swap',
wordConfig: {
heading1: {
font: "EB Garamond", size: 14, color: "000000", bold: true, align: 'center',
spacing: { before: 240, after: 240, line: 240 },
allCaps: true,
// underline: true - using border bottom to simulate
border: { bottom: { color: "000000", space: 4, style: "single", size: 4 } }
},
heading2: {
font: "EB Garamond", size: 12, color: "000000", bold: true, align: 'left',
spacing: { before: 240, after: 120, line: 240 }
},
body: {
font: "Courier Prime", size: 12, color: "000000", align: 'both',
spacing: { before: 0, after: 0, line: 480 }, // Double Spacing
border: { left: { color: "BDBDBD", space: 12, style: "single", size: 4 } } // Simulates line number bar area
},
accentColor: "000000"
},
previewCss: `
font-family: 'Courier Prime', monospace;
line-height: 2.0;
h1 { font-family: 'EB Garamond', serif; font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-decoration: underline; text-transform: uppercase; margin-bottom: 24px; }
h2 { font-family: 'EB Garamond', serif; font-size: 12pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
p { font-size: 12pt; color: #000000; margin-bottom: 0px; text-align: justify; border-left: 1px solid #BDBDBD; padding-left: 15px; }
blockquote { margin-left: 40px; border-left: 1px solid #BDBDBD; padding-left: 15px; }
`
},
{
id: 'currency-bill',
name: 'Currency Bill',
category: 'Official',
description: 'Banknote aesthetic. Intricate guilloche-style borders and emerald green serif fonts.',
vibe: 'Financial, Secure, Green',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&family=Noto+Serif:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Playfair Display SC", size: 36, color: "1B5E20", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
border: {
top: { color: "2E7D32", space: 6, style: "double", size: 12 },
bottom: { color: "2E7D32", space: 6, style: "double", size: 12 }
}
},
heading2: {
font: "Noto Serif", size: 16, color: "388E3C", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Noto Serif", size: 11, color: "1B5E20", align: 'both',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "2E7D32"
},
previewCss: `
font-family: 'Noto Serif', serif;
background: #E8F5E9;
h1 { font-family: 'Playfair Display SC', serif; font-size: 36pt; font-weight: 700; color: #1B5E20; text-align: center; border-top: 4px double #2E7D32; border-bottom: 4px double #2E7D32; padding: 12px 0; margin-bottom: 24px; letter-spacing: 2px; }
h2 { font-size: 16pt; font-weight: 700; color: #388E3C; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.6; color: #1B5E20; margin-bottom: 14px; text-align: justify; }
blockquote { border: 1px solid #2E7D32; padding: 20px; margin: 24px 0; background: #C8E6C9; text-align: center; border-radius: 50%; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
`
},
{
id: 'credit-card-platinum',
name: 'Credit Card Platinum',
category: 'Financial',
description: 'Premium card aesthetic. Silver/gradient shading with OCR-style raised numbering fonts.',
vibe: 'Premium, Silver, Metallic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Krub:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Krub", size: 32, color: "E0E0E0", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "424242", color: "auto", style: "clear" } // Dark grey metallic
},
heading2: {
font: "Share Tech Mono", size: 18, color: "C0C0C0", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true,
tracking: 100 // Wide tracking
},
body: {
font: "Krub", size: 11, color: "616161", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "C0C0C0"
},
previewCss: `
font-family: 'Krub', sans-serif;
h1 { font-size: 32pt; font-weight: 700; color: #E0E0E0; background: linear-gradient(135deg, #616161, #212121); padding: 16px; margin-bottom: 24px; border-radius: 12px; }
h2 { font-family: 'Share Tech Mono', monospace; font-size: 18pt; color: #757575; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 0 #FFF; }
p { font-size: 11pt; line-height: 1.6; color: #616161; margin-bottom: 14px; }
blockquote { border-left: 4px solid #C0C0C0; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
`
},
{
id: 'whiteboard-strategy',
name: 'Whiteboard Strategy',
category: 'Business',
description: 'Brainstorming session. Dry-erase marker fonts in standard office colors (Black, Blue, Red).',
vibe: 'Corporate, Brainstorm, Sketch',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap',
wordConfig: {
heading1: {
font: "Architects Daughter", size: 36, color: "D32F2F", bold: true, align: 'center', // Red marker
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "1976D2", space: 4, style: "single", size: 12 } } // Blue underline
},
heading2: {
font: "Patrick Hand", size: 20, color: "1976D2", bold: true, align: 'left', // Blue marker
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Patrick Hand", size: 14, color: "212121", align: 'left', // Black marker
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D32F2F"
},
previewCss: `
font-family: 'Patrick Hand', cursive;
background: #FFFFFF;
h1 { font-family: 'Architects Daughter', cursive; font-size: 36pt; font-weight: 700; color: #D32F2F; border-bottom: 3px solid #1976D2; padding-bottom: 10px; margin-bottom: 24px; text-align: center; }
h2 { font-size: 20pt; font-weight: 700; color: #1976D2; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
blockquote { border: 2px solid #388E3C; padding: 16px; margin: 24px 0; border-radius: 16px; color: #388E3C; } /* Green marker box */
`
},
{
id: 'stock-ticker',
name: 'Stock Ticker',
category: 'Financial',
description: 'LED moving message sign. Dot matrix fonts with bright green/red on black.',
vibe: 'Financial, Digital, LED',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap',
wordConfig: {
heading1: {
font: "DotGothic16", size: 32, color: "00E676", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
heading2: {
font: "DotGothic16", size: 18, color: "FF1744", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
body: {
font: "DotGothic16", size: 12, color: "E0E0E0", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "212121", color: "auto", style: "clear" }
},
accentColor: "00E676"
},
previewCss: `
font-family: 'DotGothic16', sans-serif;
background: #212121;
h1 { font-size: 32pt; color: #00E676; background: #000000; padding: 12px; margin-bottom: 24px; border-bottom: 2px solid #333; }
h2 { font-size: 18pt; color: #FF1744; background: #000000; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
p { font-size: 12pt; line-height: 1.5; color: #E0E0E0; margin-bottom: 14px; }
blockquote { border-left: 4px solid #00E676; padding-left: 16px; margin: 24px 0; color: #B9F6CA; }
`
},
{
id: 'police-blotter',
name: 'Police Blotter',
category: 'Official',
description: 'Law enforcement paperwork. Carbon copy blue fonts on stark white forms.',
vibe: 'Official, Blue, Bureaucratic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Special+Elite&display=swap',
wordConfig: {
heading1: {
font: "Special Elite", size: 26, color: "0D47A1", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
allCaps: true
},
heading2: {
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "E3F2FD", color: "auto", style: "clear" }
},
body: {
font: "Courier Prime", size: 11, color: "1A237E", align: 'left', // Carbon copy blue
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0D47A1"
},
previewCss: `
font-family: 'Courier Prime', monospace;
h1 { font-family: 'Special Elite', cursive; font-size: 26pt; color: #0D47A1; margin-bottom: 24px; text-transform: uppercase; text-decoration: underline; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E3F2FD; display: block; padding: 4px; margin-top: 32px; margin-bottom: 16px; border: 1px solid #0D47A1; }
p { font-size: 11pt; line-height: 1.5; color: #1A237E; margin-bottom: 14px; }
blockquote { border: 1px solid #000; padding: 16px; margin: 24px 0; background: #FAFAFA; }
`
}
];

364
styles/creative.ts Normal file
View File

@@ -0,0 +1,364 @@
import { StyleOption } from '../types';
export const creativeStyles: StyleOption[] = [
{
id: 'brutalist-mono',
name: 'Brutalist Lab',
category: 'Creative',
description: 'Raw, monospaced aesthetic. Boxes, thick outlines, and typewriter vibes.',
vibe: 'Code, Industrial, Raw',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Space Mono", size: 24, color: "000000", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: {
top: { color: "000000", space: 12, style: "single", size: 24 },
bottom: { color: "000000", space: 12, style: "single", size: 24 },
left: { color: "000000", space: 12, style: "single", size: 24 },
right: { color: "000000", space: 12, style: "single", size: 24 }
}
},
heading2: {
font: "Space Mono", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "E0E0E0", color: "auto", style: "clear" }
},
body: {
font: "Space Mono", size: 10, color: "111111", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Space Mono', monospace;
h1 { font-size: 24pt; font-weight: 700; color: #000000; border: 4px solid #000; padding: 16px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E0E0E0; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
p { font-size: 10pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
blockquote { border-left: 6px solid #000; padding-left: 16px; margin: 24px 0; font-weight: 700; }
`
},
{
id: 'bauhaus-poster',
name: 'Bauhaus Poster',
category: 'Creative',
description: 'Geometric minimalism. Primary colors, angled text, and strong diagonal compositions.',
vibe: 'Artistic, Geometric, Modernist',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Jost:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Josefin Sans", size: 36, color: "D50000", bold: true, align: 'right',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "000000", space: 8, style: "single", size: 36 } }
},
heading2: {
font: "Jost", size: 16, color: "2962FF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
},
body: {
font: "Jost", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D50000"
},
previewCss: `
font-family: 'Jost', sans-serif;
h1 { font-family: 'Josefin Sans', sans-serif; font-size: 36pt; font-weight: 700; color: #D50000; text-align: right; border-bottom: 8px solid #000; padding-bottom: 10px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-size: 16pt; font-weight: 700; color: #2962FF; background: #FFEB3B; padding: 8px 16px; margin-top: 32px; margin-bottom: 16px; display: inline-block; transform: rotate(-1deg); }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border-left: 10px solid #D50000; padding-left: 20px; margin: 24px 0; font-style: italic; }
`
},
{
id: 'glitch-art',
name: 'Glitch Art',
category: 'Creative',
description: 'Digital distortion aesthetic. Monospaced fonts with neon colors and "broken" styling.',
vibe: 'Digital, Glitch, Cyber',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Share+Tech+Mono&display=swap',
wordConfig: {
heading1: {
font: "Rubik Glitch", size: 40, color: "D500F9", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "121212", color: "auto", style: "clear" }
},
heading2: {
font: "Share Tech Mono", size: 18, color: "00E5FF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Share Tech Mono", size: 11, color: "BDBDBD", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
accentColor: "00E5FF"
},
previewCss: `
font-family: 'Share Tech Mono', monospace;
background: #000000;
color: #BDBDBD;
h1 { font-family: 'Rubik Glitch', cursive; font-size: 40pt; color: #D500F9; background: #121212; padding: 10px; margin-bottom: 24px; text-shadow: 2px 0 #00E5FF; }
h2 { font-size: 18pt; font-weight: 700; color: #00E5FF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
p { font-size: 11pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; }
blockquote { border: 1px solid #D500F9; padding: 16px; margin: 24px 0; color: #D500F9; box-shadow: 4px 4px 0 #00E5FF; }
`
},
{
id: 'vaporwave-aesthetic',
name: 'Vaporwave Aesthetic',
category: 'Creative',
description: 'Nostalgic 80s/90s internet culture. Pink and cyan gradients, wide tracking, and ironic luxury.',
vibe: 'Nostalgic, Digital, Surreal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=Montserrat:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Montserrat", size: 32, color: "FF71CE", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
allCaps: true,
tracking: 100 // Wide spacing
},
heading2: {
font: "Varela Round", size: 16, color: "01CDFE", bold: false, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Montserrat", size: 10, color: "B967FF", align: 'center',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "01CDFE"
},
previewCss: `
font-family: 'Montserrat', sans-serif;
background: #F0F0FF;
h1 { font-size: 32pt; font-weight: 700; color: #FF71CE; text-align: center; margin-bottom: 24px; letter-spacing: 4px; text-shadow: 2px 2px #01CDFE; text-transform: uppercase; }
h2 { font-family: 'Varela Round', sans-serif; font-size: 16pt; color: #01CDFE; text-align: center; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #B967FF; margin-bottom: 14px; text-align: center; }
blockquote { border: 2px solid #FF71CE; padding: 16px; margin: 24px 0; background: #E0FFFF; color: #01CDFE; }
`
},
{
id: 'pop-art-comic',
name: 'Pop Art Comic',
category: 'Creative',
description: 'Roy Lichtenstein inspired. Bold black outlines, halftone vibes, and primary colors.',
vibe: 'Comic, Bold, Pop',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Bangers", size: 42, color: "000000", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "FFFF00", color: "auto", style: "clear" } // Yellow back
},
heading2: {
font: "Bangers", size: 24, color: "FFFFFF", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "FF0000", color: "auto", style: "clear" } // Red back
},
body: {
font: "Comic Neue", size: 12, color: "000000", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Comic Neue', sans-serif;
h1 { font-family: 'Bangers', cursive; font-size: 42pt; color: #000000; background: #FFFF00; padding: 10px; border: 4px solid #000; box-shadow: 5px 5px 0 #000; margin-bottom: 24px; display: inline-block; }
h2 { font-family: 'Bangers', cursive; font-size: 24pt; color: #FFFFFF; background: #FF0000; padding: 5px 15px; border: 3px solid #000; margin-top: 32px; margin-bottom: 16px; display: inline-block; transform: rotate(-2deg); }
p { font-size: 12pt; line-height: 1.5; color: #000000; margin-bottom: 14px; font-weight: 700; }
blockquote { background: #FFFFFF; border: 3px solid #000; padding: 20px; border-radius: 50% / 20%; margin: 24px 0; text-align: center; }
`
},
{
id: 'grunge-90s',
name: 'Grunge 90s',
category: 'Creative',
description: 'Distressed and edgy. David Carson inspired typography with overlapping elements and grit.',
vibe: 'Dirty, Edgy, Chaotic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&display=swap',
wordConfig: {
heading1: {
font: "Permanent Marker", size: 36, color: "333333", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Special Elite", size: 18, color: "8B0000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "000000", space: 4, style: "dashed", size: 12 } }
},
body: {
font: "Special Elite", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "8B0000"
},
previewCss: `
font-family: 'Special Elite', cursive;
background-color: #F0F0F0;
h1 { font-family: 'Permanent Marker', cursive; font-size: 36pt; color: #333333; text-align: center; margin-bottom: 24px; transform: rotate(1deg); opacity: 0.9; }
h2 { font-size: 18pt; font-weight: 700; color: #8B0000; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dashed #000; display: inline-block; transform: skewX(-5deg); }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border: 3px solid #000; padding: 16px; margin: 24px 0; background: #D3D3D3; transform: rotate(-1deg); }
`
},
{
id: 'risograph-print',
name: 'Risograph Print',
category: 'Creative',
description: 'Independent publishing style. Grainy textures, misalignment, and vibrant spot colors (Pink/Teal).',
vibe: 'Artistic, Indie, Textured',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Eb+Garamond:ital,wght@0,400;0,700;1,400&family=Karla:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Eb Garamond", size: 42, color: "FF007F", bold: true, align: 'left', // Riso Pink
spacing: { before: 400, after: 200, line: 200 },
italic: true
},
heading2: {
font: "Karla", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "00A9FF", color: "auto", style: "clear" } // Riso Blue background
},
body: {
font: "Karla", size: 10, color: "1A1A1A", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FF007F"
},
previewCss: `
font-family: 'Karla', sans-serif;
background: #FFFEF0;
h1 { font-family: 'Eb Garamond', serif; font-size: 42pt; font-weight: 700; font-style: italic; color: #FF007F; margin-bottom: 24px; mix-blend-mode: multiply; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #00A9FF; display: inline-block; padding: 4px 10px; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 14px; }
blockquote { border-left: 6px solid #FF007F; padding-left: 16px; margin: 24px 0; color: #555; font-style: italic; }
`
},
{
id: 'blueprint-cyanotype',
name: 'Blueprint Cyanotype',
category: 'Creative',
description: 'Architectural blueprint style. White lines on a deep cyan blue background.',
vibe: 'Technical, Blue, Schematic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto+Mono:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Architects Daughter", size: 32, color: "FFFFFF", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 } }
},
heading2: {
font: "Roboto Mono", size: 14, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Roboto Mono", size: 10, color: "E0F7FA", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFFFFF"
},
previewCss: `
font-family: 'Roboto Mono', monospace;
background: #0047AB; /* Cobalt/Blueprint Blue */
color: #FFFFFF;
h1 { font-family: 'Architects Daughter', cursive; font-size: 32pt; font-weight: 700; color: #FFFFFF; text-align: center; border-bottom: 2px solid #FFFFFF; margin-bottom: 24px; padding-bottom: 8px; }
h2 { font-size: 14pt; font-weight: 700; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; border: 1px solid #FFF; display: inline-block; padding: 4px; }
p { font-size: 10pt; line-height: 1.6; color: #E0F7FA; margin-bottom: 14px; }
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; background: #003380; }
`
},
{
id: 'street-art-graffiti',
name: 'Street Art Graffiti',
category: 'Creative',
description: 'Urban street style. Spray paint fonts, dripping effects, and concrete vibes.',
vibe: 'Urban, Rebel, Spray',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&display=swap',
wordConfig: {
heading1: {
font: "Permanent Marker", size: 48, color: "000000", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "FFFF00", color: "auto", style: "clear" } // Hazard Yellow
},
heading2: {
font: "Rock Salt", size: 18, color: "FF0000", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Permanent Marker", size: 12, color: "333333", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Permanent Marker', cursive;
background: #F0F0F0;
h1 { font-size: 48pt; color: #000000; text-align: center; background: #FFFF00; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; box-shadow: 4px 4px 0 #000; }
h2 { font-family: 'Rock Salt', cursive; font-size: 18pt; color: #FF0000; margin-top: 32px; margin-bottom: 16px; transform: rotate(1deg); }
p { font-size: 12pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
blockquote { border-left: 5px solid #000; padding-left: 16px; margin: 24px 0; font-family: 'Rock Salt', cursive; font-size: 10pt; }
`
},
{
id: 'origami-paper',
name: 'Origami Paper',
category: 'Creative',
description: 'Folded paper aesthetic. Sharp angles, subtle shadows, and crisp typography.',
vibe: 'Delicate, Sharp, Paper',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@400;700&family=Muli:wght@300;400&display=swap',
wordConfig: {
heading1: {
font: "Cormorant Unicase", size: 32, color: "37474F", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Cormorant Unicase", size: 16, color: "546E7A", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Muli", size: 10, color: "455A64", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "37474F"
},
previewCss: `
font-family: 'Muli', sans-serif;
background: #FAFAFA;
h1 { font-family: 'Cormorant Unicase', serif; font-size: 32pt; font-weight: 700; color: #37474F; text-align: center; margin-bottom: 24px; text-shadow: 1px 1px 0 #CCC; }
h2 { font-family: 'Cormorant Unicase', serif; font-size: 16pt; color: #546E7A; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CFD8DC; display: inline-block; padding-bottom: 4px; }
p { font-size: 10pt; line-height: 1.7; color: #455A64; margin-bottom: 14px; }
blockquote { background: #FFF; padding: 20px; border: 1px solid #ECEFF1; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); margin: 24px 0; transform: rotate(1deg); }
`
},
{
id: 'watercolor-wash',
name: 'Watercolor Wash',
category: 'Creative',
description: 'Artistic and fluid. Soft blended colors and painterly fonts.',
vibe: 'Artistic, Soft, Fluid',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Amatic+SC:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Kalam", size: 36, color: "7986CB", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Amatic SC", size: 24, color: "4DB6AC", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Kalam", size: 12, color: "616161", align: 'center',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "7986CB"
},
previewCss: `
font-family: 'Kalam', cursive;
h1 { font-size: 36pt; font-weight: 700; color: #7986CB; text-align: center; margin-bottom: 24px; text-shadow: 2px 2px 4px rgba(121, 134, 203, 0.3); }
h2 { font-family: 'Amatic SC', cursive; font-size: 24pt; font-weight: 700; color: #4DB6AC; text-align: center; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 12pt; line-height: 1.6; color: #616161; margin-bottom: 14px; text-align: center; }
blockquote { border: 2px solid #E0F2F1; background: #E8EAF6; padding: 20px; border-radius: 50% 20% / 10% 40%; margin: 24px 0; text-align: center; }
`
}
];

284
styles/editorial.ts Normal file
View File

@@ -0,0 +1,284 @@
import { StyleOption } from '../types';
export const editorialStyles: 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; }
`
},
{
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; }
`
},
{
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; }
`
},
{
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; }
`
},
{
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; }
`
},
{
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); }
`
},
{
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; }
`
},
{
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; }
`
},
{
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; }
`
}
];

22
styles/index.ts Normal file
View File

@@ -0,0 +1,22 @@
import { StyleOption } from '../types';
import { minimalistStyles } from './minimalist';
import { editorialStyles } from './editorial';
import { corporateStyles } from './corporate';
import { techStyles } from './tech';
import { creativeStyles } from './creative';
import { vintageStyles } from './vintage';
import { lifestyleStyles } from './lifestyle';
import { academicStyles } from './academic';
import { industrialStyles } from './industrial';
export const ALL_STYLES: StyleOption[] = [
...minimalistStyles,
...editorialStyles,
...corporateStyles,
...techStyles,
...creativeStyles,
...vintageStyles,
...lifestyleStyles,
...academicStyles,
...industrialStyles
];

617
styles/industrial.ts Normal file
View File

@@ -0,0 +1,617 @@
import { StyleOption } from '../types';
export const industrialStyles: StyleOption[] = [
{
id: 'construction-industrial',
name: 'Construction Industrial',
category: 'Industrial',
description: 'Bold and sturdy design for construction and industrial companies. Strong typography with safety-inspired colors.',
vibe: 'Strong, Industrial, Professional',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500&display=swap',
wordConfig: {
heading1: {
font: "Oswald", size: 28, color: "212121", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "FFC107", color: "auto", style: "clear" }
},
heading2: {
font: "Oswald", size: 16, color: "FF8F00", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Roboto", size: 10, color: "37474F", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FF8F00"
},
previewCss: `
font-family: 'Roboto', sans-serif;
h1 { font-family: 'Oswald', sans-serif; font-size: 28pt; font-weight: 700; color: #212121; background: #FFC107; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-family: 'Oswald', sans-serif; font-size: 16pt; font-weight: 700; color: #FF8F00; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
blockquote { background: #FFF8E1; padding: 16px; border-left: 6px solid #FF8F00; margin: 20px 0; }
`
},
{
id: 'automotive-bold',
name: 'Automotive Bold',
category: 'Automotive',
description: 'Powerful design for automotive and motorsport industries. Bold typography with dynamic energy and speed.',
vibe: 'Powerful, Dynamic, Bold',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&family=Barlow:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Teko", size: 40, color: "B71C1C", bold: true, align: 'left',
spacing: { before: 360, after: 200, line: 200 }
},
heading2: {
font: "Teko", size: 20, color: "212121", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 220 }
},
body: {
font: "Barlow", size: 10, color: "37474F", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "B71C1C"
},
previewCss: `
font-family: 'Barlow', sans-serif;
h1 { font-family: 'Teko', sans-serif; font-size: 40pt; font-weight: 700; color: #B71C1C; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 2px; }
h2 { font-family: 'Teko', sans-serif; font-size: 20pt; font-weight: 500; color: #212121; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #37474F; margin-bottom: 14px; }
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #B71C1C; margin: 20px 0; }
`
},
{
id: 'real-estate-premium',
name: 'Real Estate Premium',
category: 'Real Estate',
description: 'Sophisticated design for luxury real estate and property marketing. Elegant typography with premium golden accents.',
vibe: 'Luxury, Premium, Sophisticated',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&display=swap',
wordConfig: {
heading1: {
font: "Cinzel", size: 28, color: "1A1A1A", bold: false, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Cinzel", size: 14, color: "B8860B", bold: false, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Lato", size: 10, color: "4A4A4A", align: 'left',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "B8860B"
},
previewCss: `
font-family: 'Lato', sans-serif;
h1 { font-family: 'Cinzel', serif; font-size: 28pt; font-weight: 600; color: #1A1A1A; text-align: center; margin-bottom: 32px; letter-spacing: 4px; }
h2 { font-family: 'Cinzel', serif; font-size: 14pt; color: #B8860B; margin-top: 36px; margin-bottom: 18px; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 1.7; color: #4A4A4A; 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; }
`
},
{
id: 'environmental-green',
name: 'Environmental Green',
category: 'Sustainability',
description: 'Nature-inspired design for environmental and sustainability communications. Organic feel with earthy green palette.',
vibe: 'Natural, Sustainable, Organic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;700&family=Karla:wght@400;500;700&display=swap',
wordConfig: {
heading1: {
font: "Bitter", size: 26, color: "2E7D32", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Bitter", size: 14, color: "388E3C", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Karla", size: 10, color: "3E4A3D", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "2E7D32"
},
previewCss: `
font-family: 'Karla', sans-serif;
h1 { font-family: 'Bitter', serif; font-size: 26pt; font-weight: 700; color: #2E7D32; margin-bottom: 24px; }
h2 { font-family: 'Bitter', serif; font-size: 14pt; font-weight: 700; color: #388E3C; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 10pt; line-height: 1.6; color: #3E4A3D; margin-bottom: 14px; }
blockquote { background: #E8F5E9; padding: 16px; border-left: 4px solid #2E7D32; margin: 20px 0; }
`
},
{
id: 'aviation-classic',
name: 'Aviation Classic',
category: 'Transport',
description: 'Vintage aviation inspired design. Classic military typography with heritage color palette.',
vibe: 'Heritage, Classic, Aviation',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stencil&family=Public+Sans:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Stencil", size: 28, color: "1B4D3E", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Public Sans", size: 13, color: "8B0000", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Public Sans", size: 10, color: "363636", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "8B0000"
},
previewCss: `
font-family: 'Public Sans', sans-serif;
h1 { font-family: 'Stencil', sans-serif; font-size: 28pt; color: #1B4D3E; margin-bottom: 24px; letter-spacing: 3px; }
h2 { font-size: 13pt; font-weight: 600; color: #8B0000; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #363636; margin-bottom: 14px; }
blockquote { background: #F5F5DC; padding: 16px; border-left: 4px solid #1B4D3E; margin: 20px 0; }
`
},
{
id: 'architecture-firm',
name: 'Architecture Firm',
category: 'Architecture',
description: 'Structural precision for architecture and design firms. Clean geometry with sophisticated restraint.',
vibe: 'Structural, Precise, Sophisticated',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fahkwang:wght@400;500;600&family=Manrope:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Fahkwang", size: 28, color: "1A1A1A", bold: false, align: 'left',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Manrope", size: 12, color: "4A4A4A", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
body: {
font: "Manrope", size: 10, color: "525252", align: 'left',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "1A1A1A"
},
previewCss: `
font-family: 'Manrope', sans-serif;
h1 { font-family: 'Fahkwang', sans-serif; font-size: 28pt; font-weight: 500; color: #1A1A1A; margin-bottom: 32px; letter-spacing: 1px; }
h2 { font-size: 12pt; font-weight: 500; color: #4A4A4A; margin-top: 40px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 1.7; color: #525252; margin-bottom: 16px; font-weight: 300; }
blockquote { border-left: 1px solid #1A1A1A; padding-left: 24px; margin: 32px 0; }
`
},
{
id: 'electric-vehicle',
name: 'Electric Vehicle',
category: 'Automotive',
description: 'Sustainable tech design for electric vehicle and clean energy content. Eco-modern with electric accents.',
vibe: 'Sustainable, Modern, Electric',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Electrolize&family=Mulish:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Electrolize", size: 28, color: "10B981", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Mulish", size: 14, color: "1E293B", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Mulish", size: 10, color: "475569", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "10B981"
},
previewCss: `
font-family: 'Mulish', sans-serif;
h1 { font-family: 'Electrolize', sans-serif; font-size: 28pt; color: #10B981; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #1E293B; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #475569; margin-bottom: 14px; }
blockquote { background: #ECFDF5; padding: 16px; border-left: 4px solid #10B981; margin: 20px 0; }
`
},
{
id: 'industrial-blueprint',
name: 'Industrial Blueprint',
category: 'Technical',
description: 'Engineering-inspired design reminiscent of technical blueprints. Precise typography with drafting aesthetics.',
vibe: 'Technical, Precise, Engineering',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Titillium+Web:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Titillium Web", size: 24, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "1A3A5C", color: "auto", style: "clear" }
},
heading2: {
font: "Titillium Web", size: 14, color: "1A3A5C", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Share Tech Mono", size: 9, color: "2C4A6B", align: 'left',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "1A3A5C"
},
previewCss: `
font-family: 'Share Tech Mono', monospace;
h1 { font-family: 'Titillium Web', sans-serif; font-size: 24pt; font-weight: 700; color: #FFFFFF; background: #1A3A5C; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-family: 'Titillium Web', sans-serif; font-size: 14pt; font-weight: 700; color: #1A3A5C; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 9pt; line-height: 1.7; color: #2C4A6B; margin-bottom: 14px; }
blockquote { background: #E8F4FC; padding: 16px; border: 1px dashed #1A3A5C; margin: 20px 0; }
`
},
{
id: 'tactical-military',
name: 'Tactical Military',
category: 'Industrial',
description: 'Military-spec aesthetic. Stencil typography with olive drab and technical readouts.',
vibe: 'Tactical, Sturdy, Regulated',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Quantico:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Allerta Stencil", size: 28, color: "33691E", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "558B2F", space: 6, style: "single", size: 16 } }
},
heading2: {
font: "Quantico", size: 14, color: "558B2F", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Quantico", size: 10, color: "1B1B1B", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "33691E"
},
previewCss: `
font-family: 'Quantico', sans-serif;
background: #F1F8E9;
h1 { font-family: 'Allerta Stencil', sans-serif; font-size: 28pt; color: #33691E; border-bottom: 4px solid #558B2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-size: 14pt; font-weight: 700; color: #558B2F; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
blockquote { border: 2px solid #33691E; padding: 16px; margin: 20px 0; background: #DCEDC8; font-family: 'Quantico', sans-serif; }
`
},
{
id: 'logistics-freight',
name: 'Logistics Freight',
category: 'Industrial',
description: 'Shipping and cargo aesthetic. Stenciled, heavy typography with industrial orange and slate blue.',
vibe: 'Industrial, Heavy, Shipping',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Saira:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Saira Stencil One", size: 36, color: "E65100", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Saira", size: 16, color: "263238", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Saira", size: 10, color: "455A64", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "E65100"
},
previewCss: `
font-family: 'Saira', sans-serif;
h1 { font-family: 'Saira Stencil One', sans-serif; font-size: 36pt; color: #E65100; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 600; color: #263238; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.5; color: #455A64; margin-bottom: 14px; }
blockquote { background: #FFF3E0; padding: 16px; border-left: 8px solid #263238; margin: 20px 0; }
`
},
{
id: 'public-transit',
name: 'Public Transit',
category: 'Urban',
description: 'Subway map and transit signage aesthetic. Clean, highly legible sans-serifs with color-coded lines.',
vibe: 'Urban, Functional, Color-coded',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&family=Hanken+Grotesk:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Hanken Grotesk", size: 32, color: "000000", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "FFC107", space: 8, style: "single", size: 24 } }
},
heading2: {
font: "Mukta", size: 18, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "EEEEEE", color: "auto", style: "clear" }
},
body: {
font: "Mukta", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFC107"
},
previewCss: `
font-family: 'Mukta', sans-serif;
h1 { font-family: 'Hanken Grotesk', sans-serif; font-size: 32pt; font-weight: 700; color: #000000; border-bottom: 6px solid #FFC107; padding-bottom: 12px; margin-bottom: 24px; }
h2 { font-size: 18pt; font-weight: 700; color: #000000; background: #EEEEEE; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border-left: 6px solid #F44336; padding-left: 16px; margin: 24px 0; }
`
},
{
id: 'industrial-safety',
name: 'Industrial Safety',
category: 'Industrial',
description: 'Construction site signage. Heavy blacks and yellow caution stripes.',
vibe: 'Safety, Bold, Construction',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Anton", size: 48, color: "000000", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "FFD600", color: "auto", style: "clear" }
},
heading2: {
font: "Roboto", size: 16, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "000000", space: 4, style: "thick", size: 24 } },
allCaps: true
},
body: {
font: "Roboto", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFD600"
},
previewCss: `
font-family: 'Roboto', sans-serif;
h1 { font-family: 'Anton', sans-serif; font-size: 48pt; color: #000000; background: repeating-linear-gradient(45deg, #FFD600, #FFD600 10px, #FFC400 10px, #FFC400 20px); text-align: center; padding: 20px; margin-bottom: 24px; text-transform: uppercase; border: 4px solid #000; }
h2 { font-size: 16pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; border-bottom: 4px solid #000; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
blockquote { border: 2px solid #000; background: #FFF9C4; padding: 16px; margin: 24px 0; font-weight: 700; }
`
},
{
id: 'highway-interstate',
name: 'Highway Interstate',
category: 'Urban',
description: 'Road signage aesthetic. Reflective white text on deep highway green backgrounds.',
vibe: 'Functional, Travel, Signage',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Public+Sans:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Overpass", size: 36, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "00695C", color: "auto", style: "clear" },
border: {
bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 },
top: { color: "FFFFFF", space: 4, style: "single", size: 12 }
}
},
heading2: {
font: "Public Sans", size: 18, color: "004D40", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Public Sans", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "00695C"
},
previewCss: `
font-family: 'Public Sans', sans-serif;
h1 { font-family: 'Overpass', sans-serif; font-size: 36pt; font-weight: 700; color: #FFFFFF; background: #00695C; padding: 16px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; margin-bottom: 24px; border-radius: 8px; }
h2 { font-size: 18pt; font-weight: 700; color: #004D40; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; border: 4px solid #000; transform: skewX(-10deg); width: fit-content; }
`
},
{
id: 'furniture-manual',
name: 'Furniture Manual',
category: 'Instructional',
description: 'Flat-pack assembly guide. Clean, heavy line art vibes with friendly sans-serifs.',
vibe: 'Clean, Instructional, Neutral',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=Hind:wght@300;600&display=swap',
wordConfig: {
heading1: {
font: "Varela Round", size: 32, color: "000000", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Varela Round", size: 16, color: "000000", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: {
bottom: { color: "000000", space: 4, style: "single", size: 12 },
left: { color: "000000", space: 4, style: "single", size: 12 }
},
shading: { fill: "F5F5F5", color: "auto", style: "clear" }
},
body: {
font: "Hind", size: 11, color: "424242", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Hind', sans-serif;
h1 { font-family: 'Varela Round', sans-serif; font-size: 32pt; color: #000000; margin-bottom: 24px; }
h2 { font-family: 'Varela Round', sans-serif; font-size: 16pt; color: #000000; background: #F5F5F5; padding: 8px; border-left: 4px solid #000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
blockquote { border: 2px solid #000; padding: 20px; margin: 24px 0; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align: center; font-weight: 700; font-size: 24pt; display: inline-block; }
`
},
{
id: 'night-vision',
name: 'Night Vision',
category: 'Tactical',
description: 'Military optics style. Grainy bright greens on dark green background.',
vibe: 'Tactical, Green, Grainy',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Wallpoet&family=Roboto+Mono:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Wallpoet", size: 32, color: "76FF03", bold: false, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "1B5E20", color: "auto", style: "clear" }
},
heading2: {
font: "Roboto Mono", size: 16, color: "CCFF90", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "76FF03", space: 4, style: "dotted", size: 12 } }
},
body: {
font: "Roboto Mono", size: 10, color: "B2FF59", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
accentColor: "76FF03"
},
previewCss: `
font-family: 'Roboto Mono', monospace;
background: #000000;
h1 { font-family: 'Wallpoet', cursive; font-size: 32pt; color: #76FF03; background: #1B5E20; padding: 16px; text-align: center; margin-bottom: 24px; text-shadow: 0 0 10px #76FF03; }
h2 { font-size: 16pt; font-weight: 700; color: #CCFF90; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dotted #76FF03; }
p { font-size: 10pt; line-height: 1.6; color: #B2FF59; margin-bottom: 14px; }
blockquote { border-left: 4px solid #76FF03; padding-left: 16px; margin: 24px 0; color: #64DD17; }
`
},
{
id: 'fire-station',
name: 'Fire Station',
category: 'Service',
description: 'Engine company aesthetic. Fire engine red, brass gold, and bold gothic numbers.',
vibe: 'Brave, Red, Gold',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Anton&family=Rokkitt:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Anton", size: 40, color: "B71C1C", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
border: {
top: { color: "FFD600", space: 6, style: "thick", size: 24 },
bottom: { color: "FFD600", space: 6, style: "thick", size: 24 }
}
},
heading2: {
font: "Rokkitt", size: 18, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Rokkitt", size: 12, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "B71C1C"
},
previewCss: `
font-family: 'Rokkitt', serif;
h1 { font-family: 'Anton', sans-serif; font-size: 40pt; color: #B71C1C; text-align: center; border-top: 6px solid #FFD600; border-bottom: 6px solid #FFD600; padding: 16px 0; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-size: 18pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 12pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
blockquote { background: #FFEBEE; border: 2px solid #B71C1C; padding: 16px; margin: 24px 0; }
`
},
{
id: 'taxi-cab',
name: 'Taxi Cab',
category: 'Urban',
description: 'Yellow cab aesthetic. Checkerboard patterns (simulated) and bold black on yellow.',
vibe: 'Urban, Yellow, Bold',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Archivo Black", size: 36, color: "000000", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "FFEB3B", color: "auto", style: "clear" },
border: {
top: { color: "000000", space: 4, style: "dashed", size: 24 }, // Simulates checkers
bottom: { color: "000000", space: 4, style: "dashed", size: 24 }
}
},
heading2: {
font: "Roboto", size: 18, color: "000000", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "FFFFFF", color: "auto", style: "clear" }
},
body: {
font: "Roboto", size: 12, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFEB3B"
},
previewCss: `
font-family: 'Roboto', sans-serif;
background: #212121;
padding: 20px;
h1 { font-family: 'Archivo Black', sans-serif; font-size: 36pt; color: #000000; background: #FFEB3B; padding: 16px; margin-bottom: 24px; text-align: center; border-top: 6px dashed #000; border-bottom: 6px dashed #000; }
h2 { font-size: 18pt; font-weight: 700; color: #000000; background: #FFFFFF; padding: 8px; margin-top: 32px; margin-bottom: 16px; text-align: center; display: inline-block; }
p { font-size: 12pt; line-height: 1.5; color: #FFFFFF; margin-bottom: 14px; }
blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; font-weight: 700; }
`
},
{
id: 'subway-tile',
name: 'Subway Tile',
category: 'Urban',
description: 'Classic station ceramics. Clean white backgrounds, heavy black text, and tile-like framing.',
vibe: 'Clean, Ceramic, Urban',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;600&family=Lexend:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Lexend", size: 36, color: "000000", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
border: {
top: { color: "000000", space: 12, style: "single", size: 4 },
bottom: { color: "000000", space: 12, style: "single", size: 4 },
left: { color: "000000", space: 12, style: "single", size: 4 },
right: { color: "000000", space: 12, style: "single", size: 4 }
}
},
heading2: {
font: "Work Sans", size: 16, color: "212121", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Work Sans", size: 11, color: "424242", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Work Sans', sans-serif;
h1 { font-family: 'Lexend', sans-serif; font-size: 36pt; font-weight: 700; color: #000000; border: 4px solid #000000; padding: 16px; margin-bottom: 24px; text-align: center; background: #FFFFFF; }
h2 { font-size: 16pt; font-weight: 700; color: #212121; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
blockquote { border-left: 8px solid #000; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
`
},
{
id: 'german-autobahn',
name: 'German Autobahn',
category: 'Transport',
description: 'Precision engineering aesthetic. DIN-style fonts and strict blue/white signage.',
vibe: 'German, Precision, Transport',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Barlow", size: 36, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "1565C0", color: "auto", style: "clear" } // Autobahn Blue
},
heading2: {
font: "Roboto Condensed", size: 18, color: "0D47A1", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Roboto Condensed", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "1565C0"
},
previewCss: `
font-family: 'Roboto Condensed', sans-serif;
h1 { font-family: 'Barlow', sans-serif; font-size: 36pt; font-weight: 700; color: #FFFFFF; background: #1565C0; padding: 12px 20px; margin-bottom: 24px; border-radius: 4px; }
h2 { font-size: 18pt; font-weight: 700; color: #0D47A1; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
blockquote { border-left: 6px solid #1565C0; padding-left: 16px; margin: 24px 0; background: #E3F2FD; }
`
}
];

768
styles/lifestyle.ts Normal file
View File

@@ -0,0 +1,768 @@
import { StyleOption } from '../types';
export const lifestyleStyles: StyleOption[] = [
{
id: 'food-recipe',
name: 'Food & Recipe',
category: 'Lifestyle',
description: 'Warm and appetizing design for cookbooks and food content. Inviting typography with rustic charm.',
vibe: 'Warm, Appetizing, Homestyle',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Playfair Display", size: 32, color: "6D4C41", bold: false, align: 'center',
spacing: { before: 400, after: 240, line: 240 }
},
heading2: {
font: "Playfair Display", size: 16, color: "8D6E63", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Lato", size: 10, color: "4E342E", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D84315"
},
previewCss: `
font-family: 'Lato', sans-serif;
h1 { font-family: 'Playfair Display', serif; font-size: 32pt; font-weight: 600; color: #6D4C41; text-align: center; margin-bottom: 28px; }
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; color: #8D6E63; margin-top: 32px; margin-bottom: 16px; font-style: italic; }
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
blockquote { background: #FFF3E0; padding: 16px; border-left: 4px solid #D84315; margin: 20px 0; }
`
},
{
id: 'wedding-elegant',
name: 'Wedding Elegant',
category: 'Events',
description: 'Romantic and elegant design for wedding stationery and formal events. Delicate typography with sophisticated flourishes.',
vibe: 'Romantic, Elegant, Celebratory',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&family=Cormorant+Garamond:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Tangerine", size: 48, color: "5D4037", bold: true, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Cormorant Garamond", size: 14, color: "795548", bold: false, align: 'center',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Cormorant Garamond", size: 11, color: "5D4037", align: 'center',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "D4AF37"
},
previewCss: `
font-family: 'Cormorant Garamond', serif;
h1 { font-family: 'Tangerine', cursive; font-size: 48pt; font-weight: 700; color: #5D4037; text-align: center; margin-bottom: 32px; }
h2 { font-size: 14pt; font-weight: 500; color: #795548; text-align: center; margin-top: 36px; margin-bottom: 18px; letter-spacing: 3px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.7; color: #5D4037; margin-bottom: 16px; text-align: center; font-weight: 300; }
blockquote { border-top: 1px solid #D4AF37; border-bottom: 1px solid #D4AF37; padding: 24px 40px; margin: 32px 0; text-align: center; font-style: italic; }
`
},
{
id: 'sports-dynamic',
name: 'Sports Dynamic',
category: 'Sports',
description: 'Energetic and bold design for sports and athletic content. Dynamic typography with high-impact colors.',
vibe: 'Energetic, Bold, Athletic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik:wght@400;500;700&display=swap',
wordConfig: {
heading1: {
font: "Bebas Neue", size: 36, color: "D32F2F", bold: false, align: 'left',
spacing: { before: 360, after: 200, line: 220 }
},
heading2: {
font: "Rubik", size: 14, color: "1A1A1A", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 }
},
body: {
font: "Rubik", size: 10, color: "333333", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D32F2F"
},
previewCss: `
font-family: 'Rubik', sans-serif;
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 36pt; color: #D32F2F; margin-bottom: 24px; letter-spacing: 2px; text-transform: uppercase; }
h2 { font-size: 14pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #D32F2F; margin: 20px 0; font-weight: 500; }
`
},
{
id: 'childrens-playful',
name: 'Children\'s Playful',
category: 'Children',
description: 'Fun and engaging design for children\'s content. Rounded typography with bright, cheerful colors.',
vibe: 'Playful, Friendly, Colorful',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Baloo 2", size: 32, color: "6A1B9A", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 }
},
heading2: {
font: "Baloo 2", size: 18, color: "00897B", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Baloo 2", size: 11, color: "37474F", align: 'left',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "FF6B6B"
},
previewCss: `
font-family: 'Baloo 2', cursive;
h1 { font-size: 32pt; font-weight: 700; color: #6A1B9A; text-align: center; margin-bottom: 28px; }
h2 { font-size: 18pt; font-weight: 700; color: #00897B; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.7; color: #37474F; margin-bottom: 14px; }
blockquote { background: #FFF3E0; padding: 16px; border-radius: 16px; border-left: 6px solid #FF6F00; margin: 20px 0; }
`
},
{
id: 'travel-adventure',
name: 'Travel Adventure',
category: 'Travel',
description: 'Adventurous design for travel and exploration content. Bold typography with earthy, wanderlust-inspiring colors.',
vibe: 'Adventurous, Inspiring, Explorer',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Josefin+Sans:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Amatic SC", size: 48, color: "3E2723", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 220 }
},
heading2: {
font: "Josefin Sans", size: 14, color: "5D4037", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Josefin Sans", size: 10, color: "4E342E", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FF7043"
},
previewCss: `
font-family: 'Josefin Sans', sans-serif;
h1 { font-family: 'Amatic SC', cursive; font-size: 48pt; font-weight: 700; color: #3E2723; text-align: center; margin-bottom: 28px; letter-spacing: 4px; }
h2 { font-size: 14pt; font-weight: 600; color: #5D4037; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
blockquote { background: #FBE9E7; padding: 16px; border-left: 4px solid #FF7043; margin: 20px 0; }
`
},
{
id: 'hotel-hospitality',
name: 'Hotel Hospitality',
category: 'Hospitality',
description: 'Welcoming design for hotels and hospitality industry. Elegant yet approachable with warm sophistication.',
vibe: 'Welcoming, Elegant, Warm',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Nunito+Sans:wght@300;400;600&display=swap',
wordConfig: {
heading1: {
font: "Tenor Sans", size: 28, color: "2C3E50", bold: false, align: 'center',
spacing: { before: 400, after: 240, line: 240 }
},
heading2: {
font: "Tenor Sans", size: 14, color: "8B7355", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Nunito Sans", size: 10, color: "4A4A4A", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "8B7355"
},
previewCss: `
font-family: 'Nunito Sans', sans-serif;
h1 { font-family: 'Tenor Sans', sans-serif; font-size: 28pt; color: #2C3E50; text-align: center; margin-bottom: 28px; letter-spacing: 2px; }
h2 { font-family: 'Tenor Sans', sans-serif; font-size: 14pt; color: #8B7355; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #4A4A4A; margin-bottom: 14px; font-weight: 300; }
blockquote { background: #F9F6F1; padding: 20px; border-left: 4px solid #8B7355; margin: 24px 0; }
`
},
{
id: 'spa-wellness',
name: 'Spa Wellness',
category: 'Wellness',
description: 'Serene design for spa and wellness industries. Calm typography with soothing, natural colors.',
vibe: 'Serene, Calming, Natural',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Questrial&display=swap',
wordConfig: {
heading1: {
font: "Philosopher", size: 28, color: "4A6741", bold: false, align: 'center',
spacing: { before: 480, after: 280, line: 240 }
},
heading2: {
font: "Philosopher", size: 14, color: "6B8E63", bold: false, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Questrial", size: 10, color: "5D6D5A", align: 'left',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "6B8E63"
},
previewCss: `
font-family: 'Questrial', sans-serif;
h1 { font-family: 'Philosopher', serif; font-size: 28pt; color: #4A6741; text-align: center; margin-bottom: 32px; }
h2 { font-family: 'Philosopher', serif; font-size: 14pt; color: #6B8E63; margin-top: 36px; margin-bottom: 18px; }
p { font-size: 10pt; line-height: 1.7; color: #5D6D5A; margin-bottom: 16px; }
blockquote { background: #F1F8E9; padding: 20px; border-radius: 4px; margin: 28px 0; text-align: center; }
`
},
{
id: 'parisian-chic',
name: 'Parisian Chic',
category: 'Fashion',
description: 'Sophisticated French aesthetics. Elegant high-contrast serifs with plenty of white space.',
vibe: 'Sophisticated, Chic, Minimal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Jost:wght@300;400&display=swap',
wordConfig: {
heading1: {
font: "Bodoni Moda", size: 36, color: "000000", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 }
},
heading2: {
font: "Bodoni Moda", size: 16, color: "333333", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 },
italic: true
},
body: {
font: "Jost", size: 10, color: "1A1A1A", align: 'center',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Jost', sans-serif;
h1 { font-family: 'Bodoni Moda', serif; font-size: 36pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 32px; }
h2 { font-family: 'Bodoni Moda', serif; font-size: 16pt; font-weight: 700; color: #333333; text-align: center; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
p { font-size: 10pt; line-height: 1.8; color: #1A1A1A; margin-bottom: 16px; text-align: center; font-weight: 300; }
blockquote { border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding: 24px; margin: 32px 40px; text-align: center; font-family: 'Bodoni Moda', serif; font-style: italic; }
`
},
{
id: 'fine-dining-menu',
name: 'Fine Dining Menu',
category: 'Hospitality',
description: 'High-end restaurant aesthetic. Elegant scripts, centered layouts, and luxurious gold tones.',
vibe: 'Elegant, Expensive, Centered',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Great Vibes", size: 42, color: "C5A059", bold: false, align: 'center',
spacing: { before: 500, after: 300, line: 240 }
},
heading2: {
font: "Cormorant Garamond", size: 14, color: "212121", bold: true, align: 'center',
spacing: { before: 360, after: 180, line: 240 },
allCaps: true
},
body: {
font: "Cormorant Garamond", size: 12, color: "424242", align: 'center',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "C5A059"
},
previewCss: `
font-family: 'Cormorant Garamond', serif;
background: #FFFAF0;
h1 { font-family: 'Great Vibes', cursive; font-size: 42pt; color: #C5A059; text-align: center; margin-bottom: 30px; }
h2 { font-size: 14pt; font-weight: 600; color: #212121; text-align: center; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; border-bottom: 1px solid #C5A059; display: inline-block; padding-bottom: 5px; }
p { font-size: 12pt; line-height: 1.8; color: #424242; margin-bottom: 16px; text-align: center; font-style: italic; }
blockquote { border: 1px solid #C5A059; padding: 24px; margin: 30px 60px; text-align: center; }
`
},
{
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; }
`
},
{
id: 'hipster-coffee',
name: 'Hipster Coffee',
category: 'Modern',
description: 'Artisan roaster branding. Clean slab serifs on kraft paper textures.',
vibe: 'Artisan, Slab, Kraft',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&family=Lato:wght@300;400&display=swap',
wordConfig: {
heading1: {
font: "Zilla Slab", size: 36, color: "3E2723", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Lato", size: 14, color: "000000", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true,
tracking: 100
},
body: {
font: "Lato", size: 10, color: "4E342E", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "3E2723"
},
previewCss: `
font-family: 'Lato', sans-serif;
background: #E0C097;
h1 { font-family: 'Zilla Slab', serif; font-size: 36pt; font-weight: 700; color: #3E2723; text-align: center; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
blockquote { border-top: 1px solid #3E2723; border-bottom: 1px solid #3E2723; padding: 20px; margin: 24px 0; text-align: center; font-style: italic; }
`
},
{
id: 'kindergarten-art',
name: 'Kindergarten Art',
category: 'Playful',
description: 'Child-like crayon aesthetic. Primary colors, rounded fonts, and large friendly text.',
vibe: 'Childish, Fun, Primary',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chewy&family=Balsamiq+Sans:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Chewy", size: 40, color: "2962FF", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Balsamiq Sans", size: 18, color: "D50000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Balsamiq Sans", size: 14, color: "111111", align: 'left',
spacing: { before: 0, after: 160, line: 320 }
},
accentColor: "FFD600"
},
previewCss: `
font-family: 'Balsamiq Sans', cursive;
h1 { font-family: 'Chewy', cursive; font-size: 40pt; color: #2962FF; text-align: center; margin-bottom: 24px; transform: rotate(-2deg); }
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 14pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
blockquote { border: 4px dashed #FFD600; padding: 20px; margin: 24px 0; border-radius: 20px; background: #FFFDE7; }
`
},
{
id: 'surf-shop',
name: 'Surf Shop',
category: 'Lifestyle',
description: 'California cool. Relaxed hand-drawn fonts with sea foam blues and sunny yellows.',
vibe: 'Relaxed, Beach, Sunny',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Permanent Marker", size: 36, color: "0097A7", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Kalam", size: 18, color: "FBC02D", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Kalam", size: 12, color: "424242", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0097A7"
},
previewCss: `
font-family: 'Kalam', cursive;
h1 { font-family: 'Permanent Marker', cursive; font-size: 36pt; color: #0097A7; text-align: center; margin-bottom: 24px; transform: rotate(-1deg); }
h2 { font-size: 18pt; font-weight: 700; color: #FBC02D; text-align: center; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 12pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
blockquote { background: #E0F7FA; border-radius: 16px; padding: 20px; margin: 24px 0; border: 2px solid #0097A7; }
`
},
{
id: 'winter-holiday',
name: 'Winter Holiday',
category: 'Seasonal',
description: 'Festive greeting card style. Elegant script, deep reds and forest greens.',
vibe: 'Festive, Cozy, Traditional',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Merriweather:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Mountains of Christmas", size: 36, color: "B71C1C", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 }
},
heading2: {
font: "Merriweather", size: 16, color: "1B5E20", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Merriweather", size: 11, color: "212121", align: 'center',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "B71C1C"
},
previewCss: `
font-family: 'Merriweather', serif;
background: #FFEBEE;
h1 { font-family: 'Mountains of Christmas', cursive; font-size: 36pt; font-weight: 700; color: #B71C1C; text-align: center; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 700; color: #1B5E20; text-align: center; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px dotted #1B5E20; display: inline-block; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: center; }
blockquote { border: 2px solid #B71C1C; padding: 16px; margin: 24px 0; border-radius: 8px; background: #FFF; }
`
},
{
id: 'recipe-card',
name: 'Recipe Card',
category: 'Home',
description: 'Grandmas index card. Typewriter fonts with red header lines.',
vibe: 'Homey, Traditional, Cookery',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Homemade+Apple&display=swap',
wordConfig: {
heading1: {
font: "Courier Prime", size: 24, color: "000000", bold: true, align: 'left',
spacing: { before: 360, after: 200, line: 240 },
border: { bottom: { color: "F44336", space: 4, style: "single", size: 12 } }
},
heading2: {
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 },
allCaps: true
},
body: {
font: "Courier Prime", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "F44336"
},
previewCss: `
font-family: 'Courier Prime', monospace;
background: #FFF;
border: 1px solid #E0E0E0;
padding: 20px;
h1 { font-size: 24pt; font-weight: 700; color: #000000; border-bottom: 2px solid #F44336; padding-bottom: 8px; margin-bottom: 20px; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
blockquote { font-family: 'Homemade Apple', cursive; color: #D32F2F; font-size: 14pt; margin: 20px 0; }
`
},
{
id: 'national-park-signage',
name: 'National Park Signage',
category: 'Nature',
description: 'Routed wood sign aesthetic. Heavy rounded serifs with earthy brown and cream colors.',
vibe: 'Outdoors, Rustic, Official',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=Lato:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Crete Round", size: 32, color: "FFFFFF", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "3E2723", color: "auto", style: "clear" } // Dark brown background
},
heading2: {
font: "Lato", size: 16, color: "3E2723", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Lato", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "3E2723"
},
previewCss: `
font-family: 'Lato', sans-serif;
h1 { font-family: 'Crete Round', serif; font-size: 32pt; color: #FFFFFF; background: #3E2723; padding: 16px; margin-bottom: 24px; border-radius: 8px; border: 2px solid #5D4037; }
h2 { font-size: 16pt; font-weight: 700; color: #3E2723; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { background: #EFEBE9; border-left: 6px solid #3E2723; padding: 16px; margin: 24px 0; }
`
},
{
id: 'supermarket-receipt',
name: 'Supermarket Receipt',
category: 'Everyday',
description: 'Thermal paper aesthetic. Monospaced, slightly faded grey text with narrow alignment.',
vibe: 'Disposable, Monospace, Grey',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inconsolata:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Fira Mono", size: 24, color: "000000", bold: true, align: 'center',
spacing: { before: 300, after: 200, line: 240 },
allCaps: true
},
heading2: {
font: "Inconsolata", size: 14, color: "000000", bold: false, align: 'center',
spacing: { before: 240, after: 120, line: 240 },
border: { bottom: { color: "000000", space: 4, style: "dashed", size: 12 } }
},
body: {
font: "Inconsolata", size: 11, color: "424242", align: 'left', // Dark grey for thermal look
spacing: { before: 0, after: 120, line: 240 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Inconsolata', monospace;
background: #FAFAFA;
padding: 20px;
width: 400px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
h1 { font-family: 'Fira Mono', monospace; font-size: 24pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 20px; text-transform: uppercase; }
h2 { font-size: 14pt; font-weight: 400; color: #000000; text-align: center; margin-top: 24px; margin-bottom: 12px; border-bottom: 1px dashed #000; padding-bottom: 5px; }
p { font-size: 11pt; line-height: 1.4; color: #424242; margin-bottom: 10px; }
blockquote { text-align: center; margin: 20px 0; font-weight: 700; }
`
},
{
id: 'varsity-team',
name: 'Varsity Team',
category: 'Sport',
description: 'College sports jersey style. Block lettering with athletic gold and navy.',
vibe: 'Athletic, College, Bold',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Graduate&family=Saira:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Graduate", size: 36, color: "FDD835", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "1A237E", color: "auto", style: "clear" },
border: {
top: { color: "FDD835", space: 8, style: "single", size: 24 },
bottom: { color: "FDD835", space: 8, style: "single", size: 24 }
}
},
heading2: {
font: "Saira", size: 20, color: "1A237E", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Saira", size: 12, color: "212121", align: 'center',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FDD835"
},
previewCss: `
font-family: 'Saira', sans-serif;
h1 { font-family: 'Graduate', serif; font-size: 36pt; color: #FDD835; background: #1A237E; border-top: 4px solid #FDD835; border-bottom: 4px solid #FDD835; padding: 20px; text-align: center; margin-bottom: 24px; }
h2 { font-size: 20pt; font-weight: 700; color: #1A237E; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 12pt; line-height: 1.5; color: #212121; margin-bottom: 14px; text-align: center; }
blockquote { border: 2px dashed #1A237E; padding: 16px; margin: 24px 0; background: #E8EAF6; }
`
},
{
id: 'sticky-note',
name: 'Sticky Note',
category: 'Casual',
description: 'Handwritten reminder aesthetic. Marker fonts on a canary yellow background.',
vibe: 'Casual, Handwritten, Yellow',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Permanent Marker", size: 32, color: "000000", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Kalam", size: 18, color: "D50000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Kalam", size: 14, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "FFF9C4", color: "auto", style: "clear" } // Yellow paper
},
accentColor: "D50000"
},
previewCss: `
font-family: 'Kalam', cursive;
background: #FFF9C4;
padding: 30px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
h1 { font-family: 'Permanent Marker', cursive; font-size: 32pt; color: #000000; text-align: center; margin-bottom: 24px; transform: rotate(-1deg); }
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
blockquote { border-left: 4px solid #D50000; padding-left: 12px; margin: 20px 0; }
`
},
{
id: 'brick-toy',
name: 'Brick Toy',
category: 'Playful',
description: 'Plastic building block aesthetic. Primary red, blue, and yellow with chunky text.',
vibe: 'Playful, Primary, Chunky',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@400;800&display=swap',
wordConfig: {
heading1: {
font: "Titan One", size: 36, color: "D32F2F", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "FFEB3B", color: "auto", style: "clear" } // Yellow background
},
heading2: {
font: "Nunito", size: 18, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "1976D2", color: "auto", style: "clear" } // Blue background
},
body: {
font: "Nunito", size: 12, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "D32F2F"
},
previewCss: `
font-family: 'Nunito', sans-serif;
h1 { font-family: 'Titan One', cursive; font-size: 36pt; color: #D32F2F; background: #FFEB3B; padding: 16px; border-radius: 8px; text-align: center; margin-bottom: 24px; border: 4px solid #D32F2F; }
h2 { font-size: 18pt; font-weight: 800; color: #FFFFFF; background: #1976D2; padding: 8px 16px; border-radius: 4px; display: inline-block; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 12pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border: 4px dotted #D32F2F; padding: 16px; margin: 24px 0; background: #E3F2FD; }
`
},
{
id: 'jungle-explorer',
name: 'Jungle Explorer',
category: 'Adventure',
description: 'Safari expedition style. Khaki, olive drab, and canvas textures.',
vibe: 'Adventure, Khaki, Nature',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stardos+Stencil&family=Domine:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Stardos Stencil", size: 36, color: "33691E", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "827717", space: 6, style: "thick", size: 18 } }
},
heading2: {
font: "Domine", size: 16, color: "558B2F", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Domine", size: 11, color: "1B1B1B", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "827717"
},
previewCss: `
font-family: 'Domine', serif;
background: #F0F4C3; /* Khaki tint */
h1 { font-family: 'Stardos Stencil', cursive; font-size: 36pt; font-weight: 700; color: #33691E; border-bottom: 4px solid #827717; padding-bottom: 12px; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 700; color: #558B2F; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
blockquote { background: #DCEDC8; padding: 20px; border-left: 6px solid #33691E; margin: 24px 0; }
`
},
{
id: 'volcanic-ash',
name: 'Volcanic Ash',
category: 'Nature',
description: 'Geological extreme. Obsidian greys with magma orange cracks.',
vibe: 'Dark, Hot, Geological',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Creepster&family=Merriweather+Sans:wght@400;800&display=swap',
wordConfig: {
heading1: {
font: "Merriweather Sans", size: 36, color: "FF3D00", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "212121", color: "auto", style: "clear" } // Obsidian
},
heading2: {
font: "Merriweather Sans", size: 16, color: "424242", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "FF3D00", space: 4, style: "single", size: 6 } }
},
body: {
font: "Merriweather Sans", size: 11, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FF3D00"
},
previewCss: `
font-family: 'Merriweather Sans', sans-serif;
background: #FAFAFA;
h1 { font-size: 36pt; font-weight: 800; color: #FF3D00; background: #212121; padding: 16px; margin-bottom: 24px; border-bottom: 4px solid #DD2C00; }
h2 { font-size: 16pt; font-weight: 800; color: #424242; margin-top: 32px; margin-bottom: 16px; border-bottom: 2px solid #FF3D00; display: inline-block; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border-left: 8px solid #212121; padding-left: 16px; margin: 24px 0; background: #FFCCBC; }
`
},
{
id: 'desert-sands',
name: 'Desert Sands',
category: 'Nature',
description: 'Dune aesthetic. Warm beige backgrounds with wind-swept, eroded typefaces.',
vibe: 'Warm, Sandy, Soft',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel&family=Fauna+One&display=swap',
wordConfig: {
heading1: {
font: "Cinzel", size: 36, color: "5D4037", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Fauna One", size: 16, color: "8D6E63", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Fauna One", size: 11, color: "4E342E", align: 'center',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "8D6E63"
},
previewCss: `
font-family: 'Fauna One', serif;
background: #F3E5AB; /* Sand color */
h1 { font-family: 'Cinzel', serif; font-size: 36pt; color: #5D4037; text-align: center; margin-bottom: 24px; letter-spacing: 2px; }
h2 { font-size: 16pt; font-weight: 700; color: #8D6E63; text-align: center; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; text-align: center; }
blockquote { border-top: 1px solid #5D4037; border-bottom: 1px solid #5D4037; padding: 20px; margin: 24px 0; }
`
},
{
id: 'bistro-chalkboard',
name: 'Bistro Chalkboard',
category: 'Food',
description: 'French cafe menu. White chalk text on slate black.',
vibe: 'French, Food, Chalk',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Caveat:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Homemade Apple", size: 32, color: "FFFFFF", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "212121", color: "auto", style: "clear" }
},
heading2: {
font: "Caveat", size: 20, color: "E0E0E0", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Caveat", size: 14, color: "BDBDBD", align: 'center',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "263238", color: "auto", style: "clear" }
},
accentColor: "FFFFFF"
},
previewCss: `
font-family: 'Caveat', cursive;
background: #212121;
color: #FFFFFF;
h1 { font-family: 'Homemade Apple', cursive; font-size: 32pt; color: #FFFFFF; text-align: center; margin-bottom: 24px; border-bottom: 1px solid #757575; padding-bottom: 12px; }
h2 { font-size: 20pt; font-weight: 700; color: #E0E0E0; text-align: center; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 14pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; text-align: center; }
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; font-style: italic; text-align: center; }
`
}
];

354
styles/minimalist.ts Normal file
View File

@@ -0,0 +1,354 @@
import { StyleOption } from '../types';
export const minimalistStyles: StyleOption[] = [
{
id: 'swiss-grid',
name: 'Swiss International',
category: 'Minimalist',
description: 'Objective, bold, and asymmetric. Heavy use of black and white, strong grid alignment.',
vibe: 'Architecture, Design, Modernism',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap',
wordConfig: {
heading1: {
font: "Inter", size: 42, color: "000000", bold: true, tracking: -40, align: 'left',
spacing: { before: 800, after: 400, line: 240 },
border: { top: { color: "000000", space: 24, style: "single", size: 36 } }
},
heading2: {
font: "Inter", size: 16, color: "000000", bold: true, allCaps: true, tracking: 40, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
body: {
font: "Inter", size: 10, color: "111111", align: 'left',
spacing: { before: 0, after: 200, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Inter', sans-serif;
h1 { font-size: 42pt; font-weight: 900; letter-spacing: -2px; border-top: 6px solid black; padding-top: 24px; margin-bottom: 24px; line-height: 1; }
h2 { font-size: 16pt; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-top: 40px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.5; margin-bottom: 16px; max-width: 65ch; }
blockquote { border-left: 4px solid black; padding-left: 20px; font-weight: 700; font-style: normal; margin-left: 0; }
`
},
{
id: 'minimalist-white',
name: 'Minimalist White',
category: 'Minimal',
description: 'Ultra-clean design with maximum white space. Less is more philosophy with restrained typography that lets content breathe.',
vibe: 'Clean, Modern, Sophisticated',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;600&display=swap',
wordConfig: {
heading1: {
font: "Work Sans", size: 32, color: "111111", bold: false, align: 'left',
spacing: { before: 600, after: 300, line: 240 }
},
heading2: {
font: "Work Sans", size: 14, color: "444444", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
body: {
font: "Work Sans", size: 10, color: "555555", align: 'left',
spacing: { before: 0, after: 200, line: 320 }
},
accentColor: "111111"
},
previewCss: `
font-family: 'Work Sans', sans-serif;
h1 { font-size: 32pt; font-weight: 300; color: #111111; margin-bottom: 32px; letter-spacing: -1px; }
h2 { font-size: 14pt; font-weight: 600; color: #444444; margin-top: 40px; margin-bottom: 20px; }
p { font-size: 10pt; line-height: 1.8; color: #555555; margin-bottom: 18px; }
blockquote { border-left: 1px solid #DDDDDD; padding-left: 24px; margin: 32px 0; color: #666666; }
`
},
{
id: 'scandinavian-clean',
name: 'Scandinavian Clean',
category: 'Minimal',
description: 'Inspired by Nordic design principles. Clean lines, functional typography, and subtle warmth with muted colors.',
vibe: 'Nordic, Clean, Warm Minimal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap',
wordConfig: {
heading1: {
font: "Poppins", size: 28, color: "2C2C2C", bold: false, align: 'left',
spacing: { before: 480, after: 240, line: 240 }
},
heading2: {
font: "Poppins", size: 14, color: "5D5D5D", bold: true, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Poppins", size: 10, color: "4A4A4A", align: 'left',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "E07A5F"
},
previewCss: `
font-family: 'Poppins', sans-serif;
h1 { font-size: 28pt; font-weight: 300; color: #2C2C2C; margin-bottom: 28px; }
h2 { font-size: 14pt; font-weight: 600; color: #5D5D5D; margin-top: 36px; margin-bottom: 18px; }
p { font-size: 10pt; line-height: 1.7; color: #4A4A4A; margin-bottom: 16px; font-weight: 300; }
blockquote { border-left: 3px solid #E07A5F; padding-left: 20px; margin: 28px 0; color: #666666; }
`
},
{
id: 'minimalist-black',
name: 'Minimalist Black',
category: 'Minimal',
description: 'Ultra-minimal dark design with stark contrasts. High-impact typography on dark backgrounds.',
vibe: 'Dark, Minimal, Bold',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Bebas Neue", size: 48, color: "FFFFFF", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 200 },
shading: { fill: "0A0A0A", color: "auto", style: "clear" }
},
heading2: {
font: "Work Sans", size: 12, color: "FFFFFF", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "1A1A1A", color: "auto", style: "clear" }
},
body: {
font: "Work Sans", size: 10, color: "E0E0E0", align: 'left',
spacing: { before: 0, after: 180, line: 300 },
shading: { fill: "121212", color: "auto", style: "clear" }
},
accentColor: "FFFFFF"
},
previewCss: `
font-family: 'Work Sans', sans-serif;
background: #0A0A0A;
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 48pt; color: #FFFFFF; background: #0A0A0A; padding: 16px 20px; margin-bottom: 24px; letter-spacing: 3px; }
h2 { font-size: 12pt; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 4px; font-weight: 300; }
p { font-size: 10pt; line-height: 1.7; color: #E0E0E0; margin-bottom: 16px; font-weight: 300; }
blockquote { border-left: 1px solid #FFFFFF; padding-left: 24px; margin: 28px 0; }
`
},
{
id: 'japanese-zen',
name: 'Japanese Zen',
category: 'Minimal',
description: 'Inspired by Japanese minimalism and wabi-sabi aesthetics. Peaceful typography with intentional asymmetry.',
vibe: 'Zen, Peaceful, Minimal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Shippori Mincho", size: 28, color: "2D2D2D", bold: false, align: 'left',
spacing: { before: 560, after: 320, line: 240 }
},
heading2: {
font: "Zen Kaku Gothic New", size: 12, color: "5C5C5C", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
body: {
font: "Zen Kaku Gothic New", size: 10, color: "4A4A4A", align: 'left',
spacing: { before: 0, after: 200, line: 320 }
},
accentColor: "C41E3A"
},
previewCss: `
font-family: 'Zen Kaku Gothic New', sans-serif;
h1 { font-family: 'Shippori Mincho', serif; font-size: 28pt; color: #2D2D2D; margin-bottom: 36px; }
h2 { font-size: 12pt; color: #5C5C5C; margin-top: 40px; margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 1.8; color: #4A4A4A; margin-bottom: 18px; font-weight: 300; }
blockquote { border-left: 2px solid #C41E3A; padding-left: 24px; margin: 36px 0; }
`
},
{
id: 'zen-garden',
name: 'Zen Garden',
category: 'Minimal',
description: 'Inspired by Japanese rock gardens. Extreme minimalism with meditative spacing and natural balance.',
vibe: 'Meditative, Balanced, Serene',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Noto+Sans+JP:wght@300;400&display=swap',
wordConfig: {
heading1: {
font: "Noto Serif JP", size: 26, color: "2C2C2C", bold: false, align: 'left',
spacing: { before: 600, after: 360, line: 240 }
},
heading2: {
font: "Noto Sans JP", size: 11, color: "5C5C5C", bold: false, align: 'left',
spacing: { before: 480, after: 240, line: 240 }
},
body: {
font: "Noto Sans JP", size: 10, color: "4A4A4A", align: 'left',
spacing: { before: 0, after: 240, line: 360 }
},
accentColor: "6B8E6B"
},
previewCss: `
font-family: 'Noto Sans JP', sans-serif;
h1 { font-family: 'Noto Serif JP', serif; font-size: 26pt; font-weight: 600; color: #2C2C2C; margin-bottom: 40px; }
h2 { font-size: 11pt; color: #5C5C5C; margin-top: 48px; margin-bottom: 24px; font-weight: 300; letter-spacing: 2px; }
p { font-size: 10pt; line-height: 2; color: #4A4A4A; margin-bottom: 20px; font-weight: 300; }
blockquote { border-left: 1px solid #6B8E6B; padding-left: 32px; margin: 40px 0; }
`
},
{
id: 'de-stijl',
name: 'De Stijl',
category: 'Modern',
description: 'Inspired by the Dutch movement (Mondrian). Primary colors, thick black lines, and rigid grid geometry.',
vibe: 'Abstract, Geometric, Primary',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Geo:wght@400&family=Arimo:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Geo", size: 32, color: "FF0000", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: {
bottom: { color: "000000", space: 12, style: "single", size: 24 },
left: { color: "000000", space: 12, style: "single", size: 24 }
}
},
heading2: {
font: "Arimo", size: 14, color: "0000FF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "FFFF00", color: "auto", style: "clear" }
},
body: {
font: "Arimo", size: 10, color: "000000", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FF0000"
},
previewCss: `
font-family: 'Arimo', sans-serif;
h1 { font-family: 'Geo', sans-serif; font-size: 32pt; color: #FF0000; border-bottom: 4px solid #000000; border-left: 4px solid #000000; padding-left: 16px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #0000FF; background: #FFFF00; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
blockquote { border: 4px solid #000000; padding: 16px; margin: 24px 0; box-shadow: 8px 8px 0px #0000FF; }
`
},
{
id: 'bauhaus-construction',
name: 'Bauhaus Construction',
category: 'Modernism',
description: 'Form follows function. Geometric simplicity using primary colors and heavy structural borders.',
vibe: 'Geometric, Functional, Primary',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Jura:wght@400;700&family=Tenor+Sans&display=swap',
wordConfig: {
heading1: {
font: "Jura", size: 32, color: "111111", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { left: { color: "D50000", space: 12, style: "single", size: 48 } }
},
heading2: {
font: "Tenor Sans", size: 16, color: "111111", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 },
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
},
body: {
font: "Tenor Sans", size: 11, color: "212121", align: 'both',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0000FF"
},
previewCss: `
font-family: 'Tenor Sans', sans-serif;
h1 { font-family: 'Jura', sans-serif; font-size: 32pt; font-weight: 700; color: #111111; border-left: 12px solid #D50000; padding-left: 16px; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 700; color: #111111; background: #FFEB3B; display: inline-block; padding: 4px 12px; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
blockquote { border-top: 4px solid #0000FF; border-bottom: 4px solid #0000FF; padding: 16px 0; margin: 24px 0; }
`
},
{
id: 'museum-gallery',
name: 'Museum Gallery',
category: 'Institutional',
description: 'Art gallery placard style. Extremely neutral sans-serifs, high contrast, small but clear text.',
vibe: 'Neutral, Institutional, Clean',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Work+Sans:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Work Sans", size: 24, color: "000000", bold: true, align: 'left',
spacing: { before: 360, after: 180, line: 240 }
},
heading2: {
font: "Karla", size: 12, color: "616161", bold: true, align: 'left',
spacing: { before: 280, after: 140, line: 240 },
allCaps: true
},
body: {
font: "Karla", size: 10, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Karla', sans-serif;
h1 { font-family: 'Work Sans', sans-serif; font-size: 24pt; font-weight: 700; color: #000000; margin-bottom: 20px; }
h2 { font-size: 12pt; font-weight: 700; color: #616161; margin-top: 24px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border-left: 2px solid #000; padding-left: 16px; margin: 20px 0; color: #424242; }
`
},
{
id: 'wireframe-layout',
name: 'Wireframe Layout',
category: 'Minimal',
description: 'Digital blueprint style. Grey backgrounds, monospaced fonts, and placeholder-like blocks.',
vibe: 'Digital, Prototype, Structural',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Redacted+Script&family=Flow+Circular&family=Roboto+Mono&display=swap',
wordConfig: {
heading1: {
font: "Roboto Mono", size: 24, color: "0000FF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "E0E0E0", color: "auto", style: "clear" }
},
heading2: {
font: "Roboto Mono", size: 14, color: "555555", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "CCCCCC", space: 4, style: "single", size: 4 } }
},
body: {
font: "Roboto Mono", size: 10, color: "333333", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0000FF"
},
previewCss: `
font-family: 'Roboto Mono', monospace;
h1 { font-size: 24pt; font-weight: 700; color: #0000FF; background: #E0E0E0; padding: 12px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #555555; border-bottom: 1px solid #CCC; margin-top: 32px; margin-bottom: 16px; padding-bottom: 4px; }
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
blockquote { border: 1px dashed #999; padding: 16px; margin: 24px 0; background: #F9F9F9; }
`
},
{
id: 'muted-pastel',
name: 'Muted Pastel',
category: 'Minimal',
description: 'Soft and calming. Very light background tints with gentle, rounded typography.',
vibe: 'Soft, Calming, Gentle',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Quicksand:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Nunito", size: 28, color: "7986CB", bold: true, align: 'center',
spacing: { before: 480, after: 240, line: 240 }
},
heading2: {
font: "Quicksand", size: 14, color: "9575CD", bold: true, align: 'center',
spacing: { before: 360, after: 180, line: 240 }
},
body: {
font: "Quicksand", size: 11, color: "616161", align: 'center',
spacing: { before: 0, after: 180, line: 300 }
},
accentColor: "9575CD"
},
previewCss: `
font-family: 'Quicksand', sans-serif;
background: #FDFBF7;
h1 { font-family: 'Nunito', sans-serif; font-size: 28pt; font-weight: 700; color: #7986CB; text-align: center; margin-bottom: 32px; }
h2 { font-size: 14pt; font-weight: 600; color: #9575CD; text-align: center; margin-top: 36px; margin-bottom: 18px; }
p { font-size: 11pt; line-height: 1.7; color: #616161; margin-bottom: 16px; text-align: center; }
blockquote { background: #F3E5F5; padding: 24px; border-radius: 20px; margin: 32px 40px; text-align: center; }
`
}
];

957
styles/tech.ts Normal file
View File

@@ -0,0 +1,957 @@
import { StyleOption } from '../types';
export const techStyles: StyleOption[] = [
{
id: 'tech-startup',
name: 'Tech Startup',
category: 'Tech',
description: 'Modern, energetic design for technology companies and startups. Bold gradients, vibrant colors, and confident typography.',
vibe: 'Innovative, Dynamic, Bold',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap',
wordConfig: {
heading1: {
font: "Plus Jakarta Sans", size: 28, color: "6366F1", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Plus Jakarta Sans", size: 16, color: "1E1E1E", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Plus Jakarta Sans", size: 10, color: "4B5563", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "6366F1"
},
previewCss: `
font-family: 'Plus Jakarta Sans', sans-serif;
h1 { font-size: 28pt; font-weight: 700; color: #6366F1; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 700; color: #1E1E1E; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #4B5563; margin-bottom: 14px; }
blockquote { background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); padding: 20px; border-radius: 8px; border-left: 4px solid #6366F1; margin: 24px 0; }
`
},
{
id: 'tech-documentation',
name: 'Tech Documentation',
category: 'Technical',
description: 'Clean and functional design for technical documentation. Optimized for code samples and clear instruction.',
vibe: 'Technical, Clear, Functional',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap',
wordConfig: {
heading1: {
font: "IBM Plex Sans", size: 24, color: "161616", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "IBM Plex Sans", size: 16, color: "161616", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "IBM Plex Sans", size: 10, color: "525252", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0F62FE"
},
previewCss: `
font-family: 'IBM Plex Sans', sans-serif;
h1 { font-size: 24pt; font-weight: 600; color: #161616; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 600; color: #161616; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #525252; margin-bottom: 14px; }
blockquote { font-family: 'IBM Plex Mono', monospace; background: #F4F4F4; padding: 16px; margin: 20px 0; font-size: 9pt; border-left: 4px solid #0F62FE; }
`
},
{
id: 'industrial-blueprint',
name: 'Industrial Blueprint',
category: 'Technical',
description: 'Engineering-inspired design reminiscent of technical blueprints. Precise typography with drafting aesthetics.',
vibe: 'Technical, Precise, Engineering',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Titillium+Web:wght@400;600;700&display=swap',
wordConfig: {
heading1: {
font: "Titillium Web", size: 24, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "1A3A5C", color: "auto", style: "clear" }
},
heading2: {
font: "Titillium Web", size: 14, color: "1A3A5C", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Share Tech Mono", size: 9, color: "2C4A6B", align: 'left',
spacing: { before: 0, after: 160, line: 300 }
},
accentColor: "1A3A5C"
},
previewCss: `
font-family: 'Share Tech Mono', monospace;
h1 { font-family: 'Titillium Web', sans-serif; font-size: 24pt; font-weight: 700; color: #FFFFFF; background: #1A3A5C; padding: 16px 20px; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-family: 'Titillium Web', sans-serif; font-size: 14pt; font-weight: 700; color: #1A3A5C; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 9pt; line-height: 1.7; color: #2C4A6B; margin-bottom: 14px; }
blockquote { background: #E8F4FC; padding: 16px; border: 1px dashed #1A3A5C; margin: 20px 0; }
`
},
{
id: 'crypto-futurism',
name: 'Crypto Futurism',
category: 'Tech',
description: 'Cutting-edge design for blockchain and cryptocurrency content. Dark themes with electric accents.',
vibe: 'Futuristic, Digital, Cutting-edge',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Audiowide&family=Rajdhani:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Audiowide", size: 26, color: "00D4AA", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "0D1117", color: "auto", style: "clear" }
},
heading2: {
font: "Rajdhani", size: 16, color: "58A6FF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Rajdhani", size: 10, color: "C9D1D9", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "161B22", color: "auto", style: "clear" }
},
accentColor: "00D4AA"
},
previewCss: `
font-family: 'Rajdhani', sans-serif;
background: #0D1117;
h1 { font-family: 'Audiowide', cursive; font-size: 26pt; color: #00D4AA; background: #0D1117; padding: 16px 20px; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 600; color: #58A6FF; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #C9D1D9; margin-bottom: 14px; }
blockquote { background: #21262D; padding: 16px; border-left: 4px solid #00D4AA; margin: 20px 0; }
`
},
{
id: 'aerospace-modern',
name: 'Aerospace Modern',
category: 'Tech',
description: 'Sleek design inspired by aerospace and space exploration. Clean lines with futuristic precision.',
vibe: 'Futuristic, Sleek, Precision',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Michroma&family=Saira:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Michroma", size: 22, color: "0B3D91", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Saira", size: 13, color: "FC3D21", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Saira", size: 10, color: "2E3A45", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FC3D21"
},
previewCss: `
font-family: 'Saira', sans-serif;
h1 { font-family: 'Michroma', sans-serif; font-size: 22pt; color: #0B3D91; margin-bottom: 24px; letter-spacing: 2px; }
h2 { font-size: 13pt; font-weight: 500; color: #FC3D21; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #2E3A45; margin-bottom: 14px; font-weight: 300; }
blockquote { background: #E8F0FE; padding: 16px; border-left: 4px solid #0B3D91; margin: 20px 0; }
`
},
{
id: 'data-analytics',
name: 'Data Analytics',
category: 'Tech',
description: 'Clean design for data science and analytics content. Precise typography optimized for charts and metrics.',
vibe: 'Analytical, Clean, Data-driven',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;700&family=Overpass+Mono:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Overpass", size: 26, color: "0F172A", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Overpass", size: 14, color: "3730A3", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Overpass", size: 10, color: "475569", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "3730A3"
},
previewCss: `
font-family: 'Overpass', sans-serif;
h1 { font-size: 26pt; font-weight: 700; color: #0F172A; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 700; color: #3730A3; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 10pt; line-height: 1.6; color: #475569; margin-bottom: 14px; }
blockquote { font-family: 'Overpass Mono', monospace; background: #F1F5F9; padding: 16px; border-left: 4px solid #3730A3; margin: 20px 0; font-size: 9pt; }
`
},
{
id: 'artificial-intelligence',
name: 'Artificial Intelligence',
category: 'Tech',
description: 'Cutting-edge design for AI and machine learning content. Neural network inspired with gradient accents.',
vibe: 'Cutting-edge, Neural, Intelligent',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Lexend:wght@300;400;500&display=swap',
wordConfig: {
heading1: {
font: "Oxanium", size: 28, color: "7C3AED", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Lexend", size: 14, color: "2563EB", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Lexend", size: 10, color: "334155", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "7C3AED"
},
previewCss: `
font-family: 'Lexend', sans-serif;
h1 { font-family: 'Oxanium', sans-serif; font-size: 28pt; font-weight: 700; color: #7C3AED; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 500; color: #2563EB; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; font-weight: 300; }
blockquote { background: linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%); padding: 16px; border-radius: 8px; margin: 20px 0; }
`
},
{
id: 'marine-biology',
name: 'Marine Biology',
category: 'Science',
description: 'Ocean-inspired design for marine science and aquatic content. Deep blues with flowing elegance.',
vibe: 'Oceanic, Scientific, Flowing',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Lora:wght@400;500&display=swap',
wordConfig: {
heading1: {
font: "Lora", size: 26, color: "0C4A6E", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Archivo", size: 13, color: "0369A1", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Archivo", size: 10, color: "334155", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0EA5E9"
},
previewCss: `
font-family: 'Archivo', sans-serif;
h1 { font-family: 'Lora', serif; font-size: 26pt; font-weight: 700; color: #0C4A6E; margin-bottom: 24px; }
h2 { font-size: 13pt; font-weight: 600; color: #0369A1; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; }
blockquote { background: #E0F2FE; padding: 16px; border-left: 4px solid #0EA5E9; margin: 20px 0; }
`
},
{
id: 'startup-saas',
name: 'Startup SaaS',
category: 'Tech',
description: 'Modern SaaS product design language. Clean, conversion-focused with trustworthy tech aesthetics.',
vibe: 'Modern, Trustworthy, Product',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
wordConfig: {
heading1: {
font: "Inter", size: 32, color: "111827", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Inter", size: 18, color: "4F46E5", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Inter", size: 10, color: "6B7280", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "4F46E5"
},
previewCss: `
font-family: 'Inter', sans-serif;
h1 { font-size: 32pt; font-weight: 700; color: #111827; margin-bottom: 24px; letter-spacing: -0.5px; }
h2 { font-size: 18pt; font-weight: 600; color: #4F46E5; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #6B7280; margin-bottom: 14px; }
blockquote { background: #EEF2FF; padding: 16px; border-radius: 8px; border-left: 4px solid #4F46E5; margin: 20px 0; }
`
},
{
id: 'cybersecurity',
name: 'Cybersecurity',
category: 'Tech',
description: 'High-security design for infosec and cybersecurity. Matrix-inspired with threat-level colors.',
vibe: 'Secure, Technical, Alert',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Exo 2", size: 26, color: "00E676", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "0D0D0D", color: "auto", style: "clear" }
},
heading2: {
font: "Exo 2", size: 14, color: "00E676", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Share Tech Mono", size: 9, color: "B0BEC5", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "1A1A1A", color: "auto", style: "clear" }
},
accentColor: "00E676"
},
previewCss: `
font-family: 'Share Tech Mono', monospace;
background: #0D0D0D;
h1 { font-family: 'Exo 2', sans-serif; font-size: 26pt; font-weight: 600; color: #00E676; background: #0D0D0D; padding: 16px 20px; margin-bottom: 24px; }
h2 { font-family: 'Exo 2', sans-serif; font-size: 14pt; font-weight: 600; color: #00E676; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 9pt; line-height: 1.6; color: #B0BEC5; margin-bottom: 14px; }
blockquote { background: #1A1A1A; padding: 16px; border-left: 4px solid #00E676; margin: 20px 0; }
`
},
{
id: 'astronomy-space',
name: 'Astronomy Space',
category: 'Science',
description: 'Cosmic design for astronomy and space science. Deep space colors with stellar typography.',
vibe: 'Cosmic, Scientific, Vast',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Space+Grotesk:wght@400;500&display=swap',
wordConfig: {
heading1: {
font: "Orbitron", size: 26, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "0A0A23", color: "auto", style: "clear" }
},
heading2: {
font: "Space Grotesk", size: 14, color: "7C4DFF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Space Grotesk", size: 10, color: "B0BEC5", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "121225", color: "auto", style: "clear" }
},
accentColor: "7C4DFF"
},
previewCss: `
font-family: 'Space Grotesk', sans-serif;
background: #0A0A23;
h1 { font-family: 'Orbitron', sans-serif; font-size: 26pt; font-weight: 700; color: #FFFFFF; background: #0A0A23; padding: 16px 20px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 500; color: #7C4DFF; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #B0BEC5; margin-bottom: 14px; }
blockquote { background: #1A1A3E; padding: 16px; border-left: 4px solid #7C4DFF; margin: 20px 0; }
`
},
{
id: 'blockchain-protocol',
name: 'Blockchain Protocol',
category: 'Tech',
description: 'Technical blockchain and Web3 design. Decentralized aesthetics with protocol documentation style.',
vibe: 'Technical, Decentralized, Protocol',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Inter", size: 28, color: "6366F1", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Inter", size: 16, color: "1E1E1E", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Inter", size: 10, color: "4B5563", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "6366F1"
},
previewCss: `
font-family: 'Inter', sans-serif;
h1 { font-size: 28pt; font-weight: 600; color: #6366F1; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 600; color: #1E1E1E; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #4B5563; margin-bottom: 14px; }
blockquote { font-family: 'JetBrains Mono', monospace; background: #F3F4F6; padding: 16px; border-radius: 6px; margin: 20px 0; font-size: 9pt; border-left: 4px solid #6366F1; }
`
},
{
id: 'smart-home-tech',
name: 'Smart Home Tech',
category: 'Tech',
description: 'Modern IoT and smart home design. Clean, connected typography with ambient intelligence.',
vibe: 'Connected, Modern, Ambient',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap',
wordConfig: {
heading1: {
font: "Poppins", size: 28, color: "00BFA5", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "Poppins", size: 15, color: "263238", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Poppins", size: 10, color: "546E7A", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "00BFA5"
},
previewCss: `
font-family: 'Poppins', sans-serif;
h1 { font-size: 28pt; font-weight: 600; color: #00BFA5; margin-bottom: 24px; }
h2 { font-size: 15pt; font-weight: 600; color: #263238; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #546E7A; margin-bottom: 14px; }
blockquote { background: #E0F2F1; padding: 16px; border-radius: 12px; border-left: 4px solid #00BFA5; margin: 20px 0; }
`
},
{
id: 'frutiger-aero',
name: 'Frutiger Aero',
category: 'Tech',
description: 'Mid-2000s tech aesthetic. Glossy textures, humanist sans-serifs, and optimistic skeuomorphic blues and greens.',
vibe: 'Glossy, Optimistic, 2000s',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Varela+Round&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap',
wordConfig: {
heading1: {
font: "Varela Round", size: 28, color: "0288D1", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 }
},
heading2: {
font: "M PLUS Rounded 1c", size: 15, color: "7CB342", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "M PLUS Rounded 1c", size: 10, color: "546E7A", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "03A9F4"
},
previewCss: `
font-family: 'M PLUS Rounded 1c', sans-serif;
h1 { font-family: 'Varela Round', sans-serif; font-size: 28pt; color: #0288D1; margin-bottom: 24px; background: linear-gradient(to right, #E1F5FE, #FFFFFF); padding: 10px; border-radius: 10px; }
h2 { font-size: 15pt; font-weight: 700; color: #7CB342; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 10pt; line-height: 1.6; color: #546E7A; margin-bottom: 14px; }
blockquote { background: linear-gradient(180deg, #FFFFFF 0%, #E0F7FA 100%); padding: 16px; border-radius: 15px; border: 1px solid #B3E5FC; margin: 20px 0; }
`
},
{
id: 'solarpunk',
name: 'Solarpunk',
category: 'Futuristic',
description: 'Nature-meets-technology future. Art Nouveau curves with high-tech sustainable green and gold.',
vibe: 'Sustainable, Hopeful, Organic',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Caudex:wght@400;700&family=El+Messiri:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "El Messiri", size: 30, color: "2E7D32", bold: true, align: 'left',
spacing: { before: 440, after: 260, line: 240 }
},
heading2: {
font: "Caudex", size: 15, color: "AFB42B", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Caudex", size: 11, color: "33691E", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFD700"
},
previewCss: `
font-family: 'Caudex', serif;
h1 { font-family: 'El Messiri', sans-serif; font-size: 30pt; font-weight: 700; color: #2E7D32; margin-bottom: 30px; }
h2 { font-size: 15pt; font-weight: 700; color: #AFB42B; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 11pt; line-height: 1.6; color: #33691E; margin-bottom: 14px; }
blockquote { background: #F1F8E9; padding: 16px; border-left: 4px solid #FFD700; border-radius: 0 16px 16px 0; margin: 20px 0; }
`
},
{
id: 'biohazard-lab',
name: 'Biohazard Lab',
category: 'Sci-Fi',
description: 'Warning-label aesthetic. Monospace fonts with high-contrast yellow and black caution themes.',
vibe: 'Warning, Industrial, Hazardous',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Syne+Mono&family=Azeret+Mono:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Syne Mono", size: 32, color: "000000", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "FFEB3B", color: "auto", style: "clear" }
},
heading2: {
font: "Azeret Mono", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { left: { color: "FFEB3B", space: 8, style: "single", size: 24 } }
},
body: {
font: "Azeret Mono", size: 10, color: "212121", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFEB3B"
},
previewCss: `
font-family: 'Azeret Mono', monospace;
h1 { font-family: 'Syne Mono', monospace; font-size: 32pt; font-weight: 700; color: #000000; background: #FFEB3B; padding: 16px; text-align: center; margin-bottom: 28px; letter-spacing: -1px; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; border-left: 8px solid #FFEB3B; padding-left: 12px; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
blockquote { border: 2px dashed #000000; padding: 16px; margin: 20px 0; background: #FFF9C4; }
`
},
{
id: 'code-editor',
name: 'Code Editor',
category: 'Tech',
description: 'Dark mode IDE aesthetic. Monospaced fonts with syntax-highlighting color palette.',
vibe: 'Technical, Dark, Coding',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Source+Code+Pro:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Inconsolata", size: 26, color: "61AFEF", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "282C34", color: "auto", style: "clear" }
},
heading2: {
font: "Source Code Pro", size: 14, color: "98C379", bold: true, align: 'left',
spacing: { before: 300, after: 150, line: 240 }
},
body: {
font: "Source Code Pro", size: 10, color: "ABB2BF", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "21252B", color: "auto", style: "clear" }
},
accentColor: "E06C75"
},
previewCss: `
font-family: 'Source Code Pro', monospace;
background: #282C34;
h1 { font-family: 'Inconsolata', monospace; font-size: 26pt; font-weight: 700; color: #61AFEF; background: #282C34; padding: 16px 20px; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 600; color: #98C379; margin-top: 30px; margin-bottom: 14px; }
p { font-size: 10pt; line-height: 1.6; color: #ABB2BF; margin-bottom: 14px; }
blockquote { background: #2C313C; padding: 16px; border-left: 4px solid #E06C75; margin: 20px 0; color: #E06C75; }
`
},
{
id: 'neon-noir',
name: 'Neon Noir',
category: 'Futuristic',
description: 'High-tech noir aesthetic. Ultra-thin, futuristic typography with glowing neon accents.',
vibe: 'Futuristic, Thin, Neon',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Megrim&family=Gruppo&display=swap',
wordConfig: {
heading1: {
font: "Megrim", size: 36, color: "D500F9", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "121212", color: "auto", style: "clear" }
},
heading2: {
font: "Gruppo", size: 18, color: "00E5FF", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Gruppo", size: 12, color: "E0E0E0", align: 'left',
spacing: { before: 0, after: 160, line: 300 },
shading: { fill: "1C1C1C", color: "auto", style: "clear" }
},
accentColor: "D500F9"
},
previewCss: `
font-family: 'Gruppo', sans-serif;
background: #121212;
h1 { font-family: 'Megrim', cursive; font-size: 36pt; font-weight: 700; color: #D500F9; background: #121212; margin-bottom: 24px; }
h2 { font-size: 18pt; font-weight: 700; color: #00E5FF; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 12pt; line-height: 1.6; color: #E0E0E0; margin-bottom: 14px; }
blockquote { border: 1px solid #D500F9; padding: 16px; margin: 20px 0; background: #000; color: #D500F9; }
`
},
{
id: '8-bit-arcade',
name: '8-Bit Arcade',
category: 'Gaming',
description: 'Retro gaming high-score screen. Pixelated fonts on dark backgrounds.',
vibe: 'Retro, Gaming, Pixel',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap',
wordConfig: {
heading1: {
font: "Press Start 2P", size: 20, color: "76FF03", bold: false, align: 'center',
spacing: { before: 400, after: 240, line: 300 },
shading: { fill: "212121", color: "auto", style: "clear" }
},
heading2: {
font: "Press Start 2P", size: 12, color: "D500F9", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "VT323", size: 14, color: "FFFFFF", align: 'left',
spacing: { before: 0, after: 160, line: 240 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
accentColor: "76FF03"
},
previewCss: `
font-family: 'VT323', monospace;
background: #000000;
h1 { font-family: 'Press Start 2P', cursive; font-size: 20pt; color: #76FF03; background: #212121; text-align: center; padding: 20px; margin-bottom: 28px; line-height: 1.5; }
h2 { font-family: 'Press Start 2P', cursive; font-size: 12pt; color: #D500F9; margin-top: 32px; margin-bottom: 16px; }
p { font-size: 14pt; line-height: 1.4; color: #FFFFFF; margin-bottom: 14px; }
blockquote { border: 4px dashed #FFFFFF; padding: 16px; margin: 20px 0; color: #FFFF00; }
`
},
{
id: 'bsod-blue',
name: 'BSOD Blue',
category: 'Tech',
description: 'The infamous crash screen. Pure white terminal fonts on a deep, error blue background.',
vibe: 'Crash, Error, Terminal',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Lucident&family=Fira+Mono&display=swap',
wordConfig: {
heading1: {
font: "Lucident", size: 24, color: "FFFFFF", bold: true, align: 'left',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "0000AA", color: "auto", style: "clear" }
},
heading2: {
font: "Fira Mono", size: 14, color: "FFFFFF", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "0000AA", color: "auto", style: "clear" }
},
body: {
font: "Fira Mono", size: 11, color: "FFFFFF", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "0000AA", color: "auto", style: "clear" }
},
accentColor: "FFFFFF"
},
previewCss: `
font-family: 'Fira Mono', monospace;
background: #0000AA;
color: #FFFFFF;
h1 { font-family: 'Lucident', monospace; font-size: 24pt; font-weight: 700; color: #FFFFFF; margin-bottom: 24px; }
h2 { font-size: 14pt; font-weight: 400; color: #FFFFFF; margin-top: 32px; margin-bottom: 16px; text-decoration: underline; }
p { font-size: 11pt; line-height: 1.5; color: #FFFFFF; margin-bottom: 14px; }
blockquote { border: 2px solid #FFFFFF; padding: 16px; margin: 20px 0; }
`
},
{
id: 'amber-monitor',
name: 'Amber Monitor',
category: 'Retro',
description: '1980s monochrome computing. Glowing amber text on a black void.',
vibe: 'Retro, Computing, Amber',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=VT323&display=swap',
wordConfig: {
heading1: {
font: "VT323", size: 36, color: "FFB300", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "212121", color: "auto", style: "clear" }
},
heading2: {
font: "VT323", size: 20, color: "FFCA28", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "FFB300", space: 4, style: "single", size: 12 } }
},
body: {
font: "VT323", size: 16, color: "FFE082", align: 'left',
spacing: { before: 0, after: 160, line: 240 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
accentColor: "FFB300"
},
previewCss: `
font-family: 'VT323', monospace;
background: #000000;
h1 { font-size: 36pt; color: #FFB300; margin-bottom: 24px; text-shadow: 0 0 5px #FF6F00; }
h2 { font-size: 20pt; color: #FFCA28; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #FFB300; }
p { font-size: 16pt; line-height: 1.4; color: #FFE082; margin-bottom: 14px; }
blockquote { border-left: 4px solid #FFB300; padding-left: 16px; margin: 24px 0; color: #FFECB3; }
`
},
{
id: 'game-handheld',
name: 'Game Handheld',
category: 'Gaming',
description: 'Classic 90s handheld console. Four shades of olive green pixel art style.',
vibe: 'Pixel, Green, Retro',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
wordConfig: {
heading1: {
font: "Press Start 2P", size: 20, color: "0f380f", bold: false, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "8bac0f", color: "auto", style: "clear" }
},
heading2: {
font: "Press Start 2P", size: 12, color: "306230", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Press Start 2P", size: 10, color: "0f380f", align: 'left',
spacing: { before: 0, after: 160, line: 240 }
},
accentColor: "306230"
},
previewCss: `
font-family: 'Press Start 2P', cursive;
background: #9bbc0f;
h1 { font-size: 20pt; color: #0f380f; background: #8bac0f; padding: 20px; text-align: center; border: 4px solid #0f380f; margin-bottom: 24px; }
h2 { font-size: 12pt; color: #306230; margin-top: 32px; margin-bottom: 16px; border-bottom: 4px solid #306230; }
p { font-size: 10pt; line-height: 1.6; color: #0f380f; margin-bottom: 14px; }
blockquote { background: #8bac0f; border: 2px solid #306230; padding: 16px; margin: 20px 0; }
`
},
{
id: 'weather-radar',
name: 'Weather Radar',
category: 'Scientific',
description: 'Meteorological map aesthetic. Deep map green backgrounds with rainbow radar text colors.',
vibe: 'Scientific, Map, Storm',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=Sarpanch:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Chakra Petch", size: 32, color: "FF1744", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "263238", color: "auto", style: "clear" }
},
heading2: {
font: "Sarpanch", size: 16, color: "00E676", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
shading: { fill: "37474F", color: "auto", style: "clear" }
},
body: {
font: "Chakra Petch", size: 11, color: "E0F2F1", align: 'left',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "455A64", color: "auto", style: "clear" }
},
accentColor: "FF1744"
},
previewCss: `
font-family: 'Chakra Petch', sans-serif;
background: #455A64;
color: #E0F2F1;
h1 { font-size: 32pt; font-weight: 700; color: #FF1744; background: #263238; padding: 16px; margin-bottom: 24px; border-left: 8px solid #FF1744; }
h2 { font-family: 'Sarpanch', sans-serif; font-size: 16pt; font-weight: 700; color: #00E676; background: #37474F; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
p { font-size: 11pt; line-height: 1.5; color: #E0F2F1; margin-bottom: 14px; }
blockquote { border: 2px solid #FFEA00; padding: 16px; margin: 24px 0; background: #263238; color: #FFEA00; }
`
},
{
id: 'mars-rover',
name: 'Mars Rover',
category: 'Space',
description: 'Red planet exploration. Dusty orange and terracotta tones with functional technical type.',
vibe: 'Space, Dusty, Technical',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Orbitron&family=Exo:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Orbitron", size: 30, color: "BF360C", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "FF7043", space: 6, style: "thick", size: 18 } }
},
heading2: {
font: "Exo", size: 16, color: "E64A19", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Exo", size: 11, color: "3E2723", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FF5722"
},
previewCss: `
font-family: 'Exo', sans-serif;
background: #FBE9E7;
h1 { font-family: 'Orbitron', sans-serif; font-size: 30pt; font-weight: 700; color: #BF360C; border-bottom: 4px solid #FF7043; padding-bottom: 12px; margin-bottom: 24px; }
h2 { font-size: 16pt; font-weight: 700; color: #E64A19; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.6; color: #3E2723; margin-bottom: 14px; }
blockquote { background: #FFCCBC; border-left: 6px solid #BF360C; padding: 16px; margin: 24px 0; }
`
},
{
id: 'deep-sea-sub',
name: 'Deep Sea Sub',
category: 'Nature',
description: 'Bioluminescent abyss. Deepest navy backgrounds with glowing cyan/purple text.',
vibe: 'Dark, Underwater, Glowing',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abel&family=Rajdhani:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Rajdhani", size: 36, color: "00E5FF", bold: true, align: 'center',
spacing: { before: 400, after: 240, line: 240 },
shading: { fill: "1A237E", color: "auto", style: "clear" }
},
heading2: {
font: "Abel", size: 20, color: "E040FB", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Abel", size: 12, color: "B2EBF2", align: 'center',
spacing: { before: 0, after: 160, line: 280 },
shading: { fill: "000051", color: "auto", style: "clear" }
},
accentColor: "00E5FF"
},
previewCss: `
font-family: 'Abel', sans-serif;
background: #000051;
h1 { font-family: 'Rajdhani', sans-serif; font-size: 36pt; font-weight: 700; color: #00E5FF; background: #1A237E; padding: 20px; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; margin: 0 auto 24px auto; text-align: center; display: block; box-shadow: 0 0 20px #00E5FF; }
h2 { font-size: 20pt; font-weight: 700; color: #E040FB; text-align: center; margin-top: 32px; margin-bottom: 16px; text-shadow: 0 0 5px #E040FB; }
p { font-size: 12pt; line-height: 1.6; color: #B2EBF2; margin-bottom: 14px; text-align: center; }
blockquote { border: 1px solid #00E5FF; padding: 16px; margin: 24px 0; color: #E0F7FA; text-align: center; }
`
},
{
id: 'arctic-base',
name: 'Arctic Base',
category: 'Scientific',
description: 'Polar research station. Stark white and ice blues with minimal sterile typography.',
vibe: 'Cold, Sterile, Blue',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Iceland&family=Roboto:wght@300;400&display=swap',
wordConfig: {
heading1: {
font: "Iceland", size: 36, color: "01579B", bold: false, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "E1F5FE", color: "auto", style: "clear" }
},
heading2: {
font: "Roboto", size: 18, color: "0277BD", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
allCaps: true
},
body: {
font: "Roboto", size: 11, color: "455A64", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "0288D1"
},
previewCss: `
font-family: 'Roboto', sans-serif;
h1 { font-family: 'Iceland', cursive; font-size: 36pt; color: #01579B; background: #E1F5FE; padding: 12px 20px; margin-bottom: 24px; border-left: 4px solid #01579B; }
h2 { font-size: 18pt; font-weight: 700; color: #0277BD; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; }
p { font-size: 11pt; line-height: 1.6; color: #455A64; margin-bottom: 14px; font-weight: 300; }
blockquote { border: 1px solid #B3E5FC; padding: 16px; margin: 24px 0; background: #F0F8FF; color: #0277BD; }
`
},
{
id: 'schematic-diagram',
name: 'Schematic Diagram',
category: 'Technical',
description: 'Patent drawing style. Thin, precise lines on stark white with serif lettering.',
vibe: 'Technical, Precise, Patent',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Libre+Baskerville:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Libre Baskerville", size: 28, color: "000000", bold: true, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
allCaps: true
},
heading2: {
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "000000", space: 4, style: "single", size: 4 } }
},
body: {
font: "Courier Prime", size: 11, color: "212121", align: 'both',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "000000"
},
previewCss: `
font-family: 'Courier Prime', monospace;
h1 { font-family: 'Libre Baskerville', serif; font-size: 28pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 24px; text-transform: uppercase; }
h2 { font-size: 14pt; font-weight: 700; color: #000000; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #000; display: inline-block; padding-bottom: 2px; }
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: justify; }
blockquote { border: 1px solid #000; padding: 20px; margin: 24px 0; font-size: 10pt; }
`
},
{
id: 'circuit-board',
name: 'Circuit Board',
category: 'Tech',
description: 'PCB aesthetic. Deep forest green background with copper/gold tracks.',
vibe: 'Tech, Green, Copper',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Teko:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Teko", size: 36, color: "FFD54F", bold: true, align: 'left',
spacing: { before: 400, after: 200, line: 240 },
border: { bottom: { color: "FFB300", space: 4, style: "dotted", size: 12 } }
},
heading2: {
font: "Share Tech Mono", size: 16, color: "A5D6A7", bold: false, align: 'left',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Share Tech Mono", size: 11, color: "C8E6C9", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "FFD54F"
},
previewCss: `
font-family: 'Share Tech Mono', monospace;
background: #1B5E20;
h1 { font-family: 'Teko', sans-serif; font-size: 36pt; font-weight: 700; color: #FFD54F; margin-bottom: 24px; border-bottom: 4px dotted #FFB300; }
h2 { font-size: 16pt; color: #A5D6A7; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
p { font-size: 11pt; line-height: 1.5; color: #C8E6C9; margin-bottom: 14px; }
blockquote { border: 1px solid #FFD54F; padding: 16px; margin: 24px 0; color: #FFD54F; }
`
},
{
id: 'hologram-blue',
name: 'Hologram Blue',
category: 'Sci-Fi',
description: 'Star Wars style communications. Translucent flickering blue text on dark voids.',
vibe: 'Holographic, Futuristic, Translucent',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Audiowide&family=Rajdhani:wght@400;600&display=swap',
wordConfig: {
heading1: {
font: "Audiowide", size: 30, color: "00B0FF", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "000000", color: "auto", style: "clear" }
},
heading2: {
font: "Rajdhani", size: 18, color: "80D8FF", bold: true, align: 'center',
spacing: { before: 320, after: 160, line: 240 }
},
body: {
font: "Rajdhani", size: 12, color: "B3E5FC", align: 'center',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "00B0FF"
},
previewCss: `
font-family: 'Rajdhani', sans-serif;
background: #000000;
h1 { font-family: 'Audiowide', cursive; font-size: 30pt; color: #00B0FF; text-align: center; margin-bottom: 24px; opacity: 0.8; text-shadow: 0 0 8px #00B0FF; }
h2 { font-size: 18pt; font-weight: 700; color: #80D8FF; text-align: center; margin-top: 32px; margin-bottom: 16px; border-top: 1px solid #00B0FF; border-bottom: 1px solid #00B0FF; display: inline-block; padding: 5px 20px; }
p { font-size: 12pt; line-height: 1.6; color: #B3E5FC; margin-bottom: 14px; text-align: center; opacity: 0.9; }
blockquote { border: 1px dashed #00B0FF; padding: 16px; margin: 24px 0; color: #E1F5FE; text-align: center; }
`
},
{
id: 'biopunk-lab',
name: 'Biopunk Lab',
category: 'Sci-Fi',
description: 'Organic technology. Slime greens, flesh tones, and rounded organic fonts.',
vibe: 'Organic, Gross, Tech',
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Creepster&family=Kodchasan:wght@400;700&display=swap',
wordConfig: {
heading1: {
font: "Creepster", size: 32, color: "2E7D32", bold: false, align: 'center',
spacing: { before: 400, after: 200, line: 240 },
shading: { fill: "C8E6C9", color: "auto", style: "clear" }
},
heading2: {
font: "Kodchasan", size: 18, color: "1B5E20", bold: true, align: 'left',
spacing: { before: 320, after: 160, line: 240 },
border: { bottom: { color: "2E7D32", space: 4, style: "wave", size: 12 } }
},
body: {
font: "Kodchasan", size: 11, color: "33691E", align: 'left',
spacing: { before: 0, after: 160, line: 280 }
},
accentColor: "2E7D32"
},
previewCss: `
font-family: 'Kodchasan', sans-serif;
h1 { font-family: 'Creepster', cursive; font-size: 32pt; color: #2E7D32; background: #C8E6C9; padding: 16px; border-radius: 20px; text-align: center; margin-bottom: 24px; }
h2 { font-size: 18pt; font-weight: 700; color: #1B5E20; margin-top: 32px; margin-bottom: 16px; text-decoration: underline wavy #2E7D32; }
p { font-size: 11pt; line-height: 1.6; color: #33691E; margin-bottom: 14px; }
blockquote { background: #F1F8E9; border: 2px solid #2E7D32; border-radius: 16px; padding: 16px; margin: 24px 0; }
`
}
];

1077
styles/vintage.ts Normal file
View File

File diff suppressed because it is too large Load Diff

1
styles/volume1.ts Normal file
View File

@@ -0,0 +1 @@
// Styles have been moved to categorized files.

1
styles/volume2.ts Normal file
View File

@@ -0,0 +1 @@
// Styles have been moved to categorized files.