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