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