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; } ` } ];