Initial commit: TypoGenie - Markdown to Word document converter
This commit is contained in:
TypoGenie
957
styles/tech.ts
Normal file
957
styles/tech.ts
Normal 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; }
|
||||
`
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user