chore: cleanup unused files and scripts
- Removed legacy TypeScript templates (replaced by JSON) - Removed unused PowerShell and CJS maintenance scripts - Removed debug logs and unused components - Files moved to local _TRASH/ directory (excluded from git)
This commit is contained in:
TypoGenie
@@ -1,272 +0,0 @@
|
||||
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
||||
|
||||
interface CustomScrollbarProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
horizontal?: boolean;
|
||||
}
|
||||
|
||||
export const CustomScrollbar: React.FC<CustomScrollbarProps> = ({
|
||||
children,
|
||||
className = '',
|
||||
horizontal = false
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const thumbRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isHoveringContainer, setIsHoveringContainer] = useState(false);
|
||||
const [isHoveringTrack, setIsHoveringTrack] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [thumbSize, setThumbSize] = useState(40);
|
||||
|
||||
// Drag state
|
||||
const dragState = useRef({
|
||||
isActive: false,
|
||||
startMouse: 0,
|
||||
startScroll: 0,
|
||||
trackSize: 0,
|
||||
maxScroll: 0
|
||||
});
|
||||
|
||||
// Update thumb size
|
||||
const updateMetrics = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
if (horizontal) {
|
||||
const ratio = container.clientWidth / Math.max(container.scrollWidth, 1);
|
||||
setThumbSize(Math.max(40, ratio * container.clientWidth));
|
||||
} else {
|
||||
const ratio = container.clientHeight / Math.max(container.scrollHeight, 1);
|
||||
setThumbSize(Math.max(40, ratio * container.clientHeight));
|
||||
}
|
||||
|
||||
updateThumbVisual();
|
||||
}, [horizontal]);
|
||||
|
||||
// Update thumb position from scroll
|
||||
const updateThumbVisual = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
const thumb = thumbRef.current;
|
||||
if (!container || !thumb) return;
|
||||
|
||||
if (dragState.current.isActive) return;
|
||||
|
||||
if (horizontal) {
|
||||
const maxScroll = container.scrollWidth - container.clientWidth;
|
||||
const trackSize = container.clientWidth - thumbSize;
|
||||
if (maxScroll <= 0 || trackSize <= 0) {
|
||||
thumb.style.transform = 'translateX(0px)';
|
||||
return;
|
||||
}
|
||||
const ratio = container.scrollLeft / maxScroll;
|
||||
thumb.style.transform = `translateX(${ratio * trackSize}px)`;
|
||||
} else {
|
||||
const maxScroll = container.scrollHeight - container.clientHeight;
|
||||
const trackSize = container.clientHeight - thumbSize;
|
||||
if (maxScroll <= 0 || trackSize <= 0) {
|
||||
thumb.style.transform = 'translateY(0px)';
|
||||
return;
|
||||
}
|
||||
const ratio = container.scrollTop / maxScroll;
|
||||
thumb.style.transform = `translateY(${ratio * trackSize}px)`;
|
||||
}
|
||||
}, [horizontal, thumbSize]);
|
||||
|
||||
// Setup
|
||||
useEffect(() => {
|
||||
updateMetrics();
|
||||
|
||||
const handleResize = () => updateMetrics();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
const observer = new MutationObserver(() => updateMetrics());
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [updateMetrics]);
|
||||
|
||||
// Scroll listener
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const onScroll = () => {
|
||||
if (!dragState.current.isActive) {
|
||||
updateThumbVisual();
|
||||
}
|
||||
};
|
||||
|
||||
container.addEventListener('scroll', onScroll, { passive: true });
|
||||
return () => container.removeEventListener('scroll', onScroll);
|
||||
}, [updateThumbVisual]);
|
||||
|
||||
// Drag handling - DIRECT synchronous updates
|
||||
useEffect(() => {
|
||||
if (!isDragging) {
|
||||
// Restore transition when not dragging
|
||||
if (thumbRef.current) {
|
||||
thumbRef.current.style.transition = 'opacity 0.15s, width 0.15s, height 0.15s';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const container = containerRef.current;
|
||||
const thumb = thumbRef.current;
|
||||
if (!container || !thumb) return;
|
||||
|
||||
const state = dragState.current;
|
||||
state.isActive = true;
|
||||
|
||||
// REMOVE transition during drag for instant response
|
||||
thumb.style.transition = 'none';
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const mousePos = horizontal ? e.clientX : e.clientY;
|
||||
const deltaMouse = mousePos - state.startMouse;
|
||||
const scrollRatio = deltaMouse / state.trackSize;
|
||||
const newScroll = state.startScroll + (scrollRatio * state.maxScroll);
|
||||
const clampedScroll = Math.max(0, Math.min(newScroll, state.maxScroll));
|
||||
|
||||
if (horizontal) {
|
||||
container.scrollLeft = clampedScroll;
|
||||
const visualRatio = state.maxScroll > 0 ? clampedScroll / state.maxScroll : 0;
|
||||
thumb.style.transform = `translateX(${visualRatio * state.trackSize}px)`;
|
||||
} else {
|
||||
container.scrollTop = clampedScroll;
|
||||
const visualRatio = state.maxScroll > 0 ? clampedScroll / state.maxScroll : 0;
|
||||
thumb.style.transform = `translateY(${visualRatio * state.trackSize}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
state.isActive = false;
|
||||
setIsDragging(false);
|
||||
// Transition will be restored by effect cleanup
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
state.isActive = false;
|
||||
};
|
||||
}, [isDragging, horizontal]);
|
||||
|
||||
const handleThumbMouseDown = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const container = containerRef.current;
|
||||
const thumb = thumbRef.current;
|
||||
if (!container || !thumb) return;
|
||||
|
||||
const state = dragState.current;
|
||||
|
||||
if (horizontal) {
|
||||
state.startMouse = e.clientX;
|
||||
state.startScroll = container.scrollLeft;
|
||||
state.trackSize = container.clientWidth - thumbSize;
|
||||
state.maxScroll = container.scrollWidth - container.clientWidth;
|
||||
} else {
|
||||
state.startMouse = e.clientY;
|
||||
state.startScroll = container.scrollTop;
|
||||
state.trackSize = container.clientHeight - thumbSize;
|
||||
state.maxScroll = container.scrollHeight - container.clientHeight;
|
||||
}
|
||||
|
||||
// Remove transition immediately on mouse down
|
||||
thumb.style.transition = 'none';
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleTrackClick = (e: React.MouseEvent) => {
|
||||
if (e.target === thumbRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const rect = container.getBoundingClientRect();
|
||||
|
||||
if (horizontal) {
|
||||
const clickX = e.clientX - rect.left;
|
||||
const percentage = clickX / rect.width;
|
||||
container.scrollTo({
|
||||
left: percentage * (container.scrollWidth - container.clientWidth),
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} else {
|
||||
const clickY = e.clientY - rect.top;
|
||||
const percentage = clickY / rect.height;
|
||||
container.scrollTo({
|
||||
top: percentage * (container.scrollHeight - container.clientHeight),
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isActive = isHoveringTrack || isDragging;
|
||||
const opacity = isActive ? 0.6 : (isHoveringContainer ? 0.2 : 0);
|
||||
const size = isActive ? '6px' : '2px';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative ${className}`}
|
||||
onMouseEnter={() => setIsHoveringContainer(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsHoveringContainer(false);
|
||||
if (!isDragging) setIsHoveringTrack(false);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="h-full w-full overflow-auto scrollbar-hide"
|
||||
style={{
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
overflowX: horizontal ? 'auto' : 'hidden',
|
||||
overflowY: horizontal ? 'hidden' : 'auto'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute cursor-pointer z-10 ${horizontal ? 'bottom-0 left-0 right-0 h-4' : 'top-0 right-0 bottom-0 w-4'}`}
|
||||
style={{ opacity }}
|
||||
onMouseEnter={() => setIsHoveringTrack(true)}
|
||||
onMouseLeave={() => { if (!isDragging) setIsHoveringTrack(false); }}
|
||||
onClick={handleTrackClick}
|
||||
>
|
||||
<div
|
||||
ref={thumbRef}
|
||||
className="absolute rounded-full bg-zinc-400 cursor-grab active:cursor-grabbing"
|
||||
style={{
|
||||
[horizontal ? 'left' : 'top']: 0,
|
||||
[horizontal ? 'bottom' : 'right']: '4px',
|
||||
[horizontal ? 'width' : 'height']: thumbSize,
|
||||
[horizontal ? 'height' : 'width']: size,
|
||||
opacity: isActive ? 0.9 : 0.5,
|
||||
transition: 'opacity 0.15s, width 0.15s, height 0.15s',
|
||||
transform: horizontal ? 'translateX(0px)' : 'translateY(0px)',
|
||||
willChange: 'transform'
|
||||
}}
|
||||
onMouseDown={handleThumbMouseDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,153 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const academicJournal: StyleOption = {
|
||||
id: 'academic-journal',
|
||||
name: 'Academic Journal',
|
||||
category: 'Academic',
|
||||
description: 'Scholarly and rigorous design for academic papers and research publications. Traditional serif typography optimized for extended reading.',
|
||||
vibe: 'Scholarly, Serious, Traditional',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Libre Baskerville',
|
||||
body: 'Libre Baskerville',
|
||||
code: 'Source Sans 3'
|
||||
},
|
||||
colors: {
|
||||
text: '1A1A1A',
|
||||
textSecondary: '333333',
|
||||
background: 'FFFFFF',
|
||||
accent: '800000',
|
||||
border: '800000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '333333'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 18,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
spacing: { before: 18, after: 12, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 7, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 9,
|
||||
color: '333333',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 10,
|
||||
borderLeft: { color: '800000', width: 3, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '333333',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '333333',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '800000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '800000', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,157 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const arcticBase: StyleOption = {
|
||||
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',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Iceland',
|
||||
body: 'Roboto',
|
||||
code: 'Roboto'
|
||||
},
|
||||
colors: {
|
||||
text: '455A64',
|
||||
textSecondary: '78909C',
|
||||
background: 'FFFFFF',
|
||||
accent: '0288D1',
|
||||
border: '01579B',
|
||||
codeBg: 'E3F2FD',
|
||||
blockquoteBorder: '0277BD'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 36,
|
||||
color: '01579B',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
background: 'E1F5FE',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
borderLeft: { color: '01579B', width: 4, style: 'solid' },
|
||||
padding: 12
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 18,
|
||||
color: '0277BD',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
allCaps: true,
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '0288D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '0288D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '039BE5',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '039BE5',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '455A64',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '0277BD',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'F0F8FF',
|
||||
border: { color: 'B3E5FC', width: 1, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '01579B',
|
||||
background: 'E3F2FD'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '01579B',
|
||||
background: 'E3F2FD',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '455A64',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '0288D1',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '01579B',
|
||||
bold: true,
|
||||
background: 'E1F5FE',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '455A64',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '81D4FA', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const botanicalTextbook: StyleOption = {
|
||||
id: 'botanical-textbook',
|
||||
name: 'Botanical Textbook',
|
||||
category: 'Scientific',
|
||||
description: 'Vintage science textbook aesthetic. Academic yet organic, like a 19th-century flora guide.',
|
||||
vibe: 'Vintage, Scientific, Organic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alice&family=Gentium+Book+Basic:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Alice',
|
||||
body: 'Gentium Book Basic',
|
||||
code: 'Gentium Book Basic'
|
||||
},
|
||||
colors: {
|
||||
text: '1B1B1B',
|
||||
textSecondary: '33691E',
|
||||
background: 'FFFFFF',
|
||||
accent: '827717',
|
||||
border: '827717',
|
||||
codeBg: 'F9FBE7',
|
||||
blockquoteBorder: '827717'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: '33691E',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: '827717', width: 2, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '558B2F',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 13,
|
||||
color: '558B2F',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '689F38',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '689F38',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '7CB342',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '1B1B1B',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 8, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '33691E',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'F9FBE7',
|
||||
borderLeft: { color: '827717', width: 4, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '33691E',
|
||||
background: 'F9FBE7'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '33691E',
|
||||
background: 'F9FBE7',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '1B1B1B',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '558B2F',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '33691E',
|
||||
bold: true,
|
||||
background: 'F0F4C3',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '1B1B1B',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '827717', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,153 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const chemistryLab: StyleOption = {
|
||||
id: 'chemistry-lab',
|
||||
name: 'Chemistry Lab',
|
||||
category: 'Scientific',
|
||||
description: 'Clean, molecular design. Modern thin typography suitable for diagrams and formulas.',
|
||||
vibe: 'Scientific, Modern, Molecular',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;600;700&family=Heebo:wght@300;400;500&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Advent Pro',
|
||||
body: 'Heebo',
|
||||
code: 'Advent Pro'
|
||||
},
|
||||
colors: {
|
||||
text: '37474F',
|
||||
textSecondary: '546E7A',
|
||||
background: 'FFFFFF',
|
||||
accent: '00BCD4',
|
||||
border: '00BCD4',
|
||||
codeBg: 'E0F7FA',
|
||||
blockquoteBorder: '00BCD4'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: '00BCD4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '0097A7',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '00838F',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '00838F',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '006064',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '006064',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '0097A7',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'E0F7FA',
|
||||
border: { color: '00BCD4', width: 1, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '00838F',
|
||||
background: 'E0F7FA'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '00838F',
|
||||
background: 'E0F7FA',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '00BCD4',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '00BCD4',
|
||||
bold: true,
|
||||
background: 'E0F7FA',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'B2EBF2', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const darkAcademia: StyleOption = {
|
||||
id: 'dark-academia',
|
||||
name: 'Dark Academia',
|
||||
category: 'Academic',
|
||||
description: 'Moody, literary aesthetic. Tweed textures, old libraries, and classic serif typography.',
|
||||
vibe: 'Moody, Scholarly, Literary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Alegreya+SC:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Alegreya SC',
|
||||
body: 'Alegreya',
|
||||
code: 'Alegreya'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '4E342E',
|
||||
background: 'F5F1E8',
|
||||
accent: '5D4037',
|
||||
border: '5D4037',
|
||||
codeBg: 'EFEBE9',
|
||||
blockquoteBorder: '3E2723'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: '3E2723',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
spacing: { before: 24, after: 14, line: 1.2 },
|
||||
border: { color: '5D4037', width: 4, style: 'double' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '4E342E',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 18, after: 9, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '4E342E',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
italic: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '6D4C41',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 9, line: 1.8 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '4E342E',
|
||||
italic: true,
|
||||
spacing: { before: 14, after: 14, line: 1.6 },
|
||||
padding: 10,
|
||||
borderLeft: { color: '3E2723', width: 2, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '3E2723',
|
||||
background: 'EFEBE9'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '3E2723',
|
||||
background: 'EFEBE9',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '5D4037',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '3E2723',
|
||||
bold: true,
|
||||
background: 'EFEBE9',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '5D4037', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const educationFriendly: StyleOption = {
|
||||
id: 'education-friendly',
|
||||
name: 'Education Friendly',
|
||||
category: 'Education',
|
||||
description: 'Approachable and clear design for educational materials. High readability with friendly colors suitable for learning environments.',
|
||||
vibe: 'Friendly, Educational, Accessible',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Nunito',
|
||||
body: 'Nunito',
|
||||
code: 'Nunito'
|
||||
},
|
||||
colors: {
|
||||
text: '424242',
|
||||
textSecondary: '616161',
|
||||
background: 'FFFFFF',
|
||||
accent: '5E35B1',
|
||||
border: '7E57C2',
|
||||
codeBg: 'EDE7F6',
|
||||
blockquoteBorder: '7E57C2'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 24,
|
||||
color: '5E35B1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: 'EDE7F6',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
padding: 16,
|
||||
border: { color: 'D1C4E9', width: 1, style: 'solid' }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '7E57C2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '7E57C2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '9575CD',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '9575CD',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: 'B39DDB',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '5E35B1',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'F3E5F5',
|
||||
borderLeft: { color: '7E57C2', width: 4, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5E35B1',
|
||||
background: 'EDE7F6'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5E35B1',
|
||||
background: 'EDE7F6',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '5E35B1',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '5E35B1',
|
||||
bold: true,
|
||||
background: 'EDE7F6',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'D1C4E9', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,155 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const emergencyRoom: StyleOption = {
|
||||
id: 'emergency-room',
|
||||
name: 'Emergency Room',
|
||||
category: 'Medical',
|
||||
description: 'Hospital signage. Sterile white, urgent red, and clean blue.',
|
||||
vibe: 'Sterile, Urgent, Clean',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Heebo:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Assistant',
|
||||
body: 'Heebo',
|
||||
code: 'Heebo'
|
||||
},
|
||||
colors: {
|
||||
text: '424242',
|
||||
textSecondary: '616161',
|
||||
background: 'FFFFFF',
|
||||
accent: 'D50000',
|
||||
border: 'D50000',
|
||||
codeBg: 'FFEBEE',
|
||||
blockquoteBorder: 'D50000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 36,
|
||||
color: 'D50000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: 'D50000', width: 4, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 18,
|
||||
color: '2962FF',
|
||||
bold: true,
|
||||
allCaps: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 15,
|
||||
color: '2962FF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 13,
|
||||
color: '2979FF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '2979FF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '448AFF',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: 'D50000',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'FFEBEE',
|
||||
borderLeft: { color: 'D50000', width: 6, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'D50000',
|
||||
background: 'FFEBEE'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'D50000',
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '2962FF',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: 'D50000',
|
||||
bold: true,
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'EF5350', width: 3, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,157 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const furnitureManual: StyleOption = {
|
||||
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',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Varela Round',
|
||||
body: 'Hind',
|
||||
code: 'Hind'
|
||||
},
|
||||
colors: {
|
||||
text: '424242',
|
||||
textSecondary: '616161',
|
||||
background: 'FFFFFF',
|
||||
accent: '000000',
|
||||
border: '000000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '000000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: '000000',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 16,
|
||||
color: '000000',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 16, after: 8, line: 1.2 },
|
||||
borderLeft: { color: '000000', width: 4, style: 'single' },
|
||||
border: { color: '000000', width: 2, style: 'single' },
|
||||
padding: 8
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '212121',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '616161',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '212121',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 20,
|
||||
background: 'F5F5F5',
|
||||
border: { color: '000000', width: 2, style: 'single' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '000000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '424242',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '000000', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,154 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const historyTextbook: StyleOption = {
|
||||
id: 'history-textbook',
|
||||
name: 'History Textbook',
|
||||
category: 'Academic',
|
||||
description: 'Classic textbook design. Sepia tones, distinct serif headers, and wide margins for notes.',
|
||||
vibe: 'Classic, Educational, Historical',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Sorts+Mill+Goudy&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Goudy Bookletter 1911',
|
||||
body: 'Sorts Mill Goudy',
|
||||
code: 'Sorts Mill Goudy'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '3E2723',
|
||||
background: 'FFF8E1',
|
||||
accent: '8D6E63',
|
||||
border: '8D6E63',
|
||||
codeBg: 'FFF3E0',
|
||||
blockquoteBorder: '8D6E63'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: '5D4037',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: '8D6E63', width: 2, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'body',
|
||||
size: 16,
|
||||
color: '3E2723',
|
||||
bold: false,
|
||||
align: 'left',
|
||||
spacing: { before: 15, after: 7.5, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'body',
|
||||
size: 14,
|
||||
color: '4E342E',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '6D4C41',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '795548',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.7 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '3E2723',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'FFFFFF',
|
||||
border: { color: '8D6E63', width: 1, style: 'single' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5D4037',
|
||||
background: 'FFF3E0'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '5D4037',
|
||||
background: 'FFF3E0',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '5D4037',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '5D4037',
|
||||
bold: true,
|
||||
background: 'FFF3E0',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '8D6E63', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { academicJournal } from './academic-journal';
|
||||
import { arcticBase } from './arctic-base';
|
||||
import { botanicalTextbook } from './botanical-textbook';
|
||||
import { chemistryLab } from './chemistry-lab';
|
||||
import { darkAcademia } from './dark-academia';
|
||||
import { educationFriendly } from './education-friendly';
|
||||
import { emergencyRoom } from './emergency-room';
|
||||
import { furnitureManual } from './furniture-manual';
|
||||
import { historyTextbook } from './history-textbook';
|
||||
import { kidsEducation } from './kids-education';
|
||||
import { mathematicsPaper } from './mathematics-paper';
|
||||
import { medicalProfessional } from './medical-professional';
|
||||
import { phdThesis } from './phd-thesis';
|
||||
import { scantronTest } from './scantron-test';
|
||||
import { scientificJournal } from './scientific-journal';
|
||||
import { weatherRadar } from './weather-radar';
|
||||
|
||||
export const academicStyles: StyleOption[] = [
|
||||
academicJournal,
|
||||
arcticBase,
|
||||
botanicalTextbook,
|
||||
chemistryLab,
|
||||
darkAcademia,
|
||||
educationFriendly,
|
||||
emergencyRoom,
|
||||
furnitureManual,
|
||||
historyTextbook,
|
||||
kidsEducation,
|
||||
mathematicsPaper,
|
||||
medicalProfessional,
|
||||
phdThesis,
|
||||
scantronTest,
|
||||
scientificJournal,
|
||||
weatherRadar
|
||||
];
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const kidsEducation: StyleOption = {
|
||||
id: 'kids-education',
|
||||
name: 'Kids Education',
|
||||
category: 'Education',
|
||||
description: 'Fun and engaging design for children\'s educational content. Rounded typography with bright, cheerful colors.',
|
||||
vibe: 'Educational, Fun, Engaging',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Fredoka',
|
||||
body: 'Fredoka',
|
||||
code: 'Fredoka'
|
||||
},
|
||||
colors: {
|
||||
text: '495057',
|
||||
textSecondary: '6C757D',
|
||||
background: 'FFFFFF',
|
||||
accent: 'FF6B6B',
|
||||
border: 'FF6B6B',
|
||||
codeBg: 'FFF9DB',
|
||||
blockquoteBorder: '4ECDC4'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: 'FF6B6B',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
background: 'FFF9DB',
|
||||
spacing: { before: 20, after: 12, line: 1.2 },
|
||||
padding: 16,
|
||||
border: { color: 'FFE066', width: 2, style: 'solid' }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 18,
|
||||
color: '4ECDC4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 15,
|
||||
color: '45B7D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '45B7D1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '96CEB4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '96CEB4',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '495057',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 9, line: 1.8 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '4ECDC4',
|
||||
spacing: { before: 10, after: 10, line: 1.6 },
|
||||
padding: 16,
|
||||
background: 'E3F9F8',
|
||||
borderLeft: { color: '4ECDC4', width: 6, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: 'FF6B6B',
|
||||
background: 'FFF9DB'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: 'FF6B6B',
|
||||
background: 'FFF9DB',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '495057',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: 'FF6B6B',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: 'FF6B6B',
|
||||
bold: true,
|
||||
background: 'FFF9DB',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '495057',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'FFE066', width: 3, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,154 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const mathematicsPaper: StyleOption = {
|
||||
id: 'mathematics-paper',
|
||||
name: 'Mathematics Paper',
|
||||
category: 'Academic',
|
||||
description: 'Inspired by LaTeX and Computer Modern. Serif-heavy, precise, and highly legible for academic rigor.',
|
||||
vibe: 'Academic, Rigorous, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Noticia+Text:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Domine',
|
||||
body: 'Noticia Text',
|
||||
code: 'Noticia Text'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '424242',
|
||||
background: 'FFFFFF',
|
||||
accent: '000000',
|
||||
border: '000000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '000000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 24,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
spacing: { before: 20, after: 12, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 16, after: 8, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '616161',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
italic: true,
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 10,
|
||||
background: 'F5F5F5',
|
||||
borderLeft: { color: '000000', width: 3, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '000000',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '000000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '000000', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,153 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const medicalProfessional: StyleOption = {
|
||||
id: 'medical-professional',
|
||||
name: 'Medical Professional',
|
||||
category: 'Healthcare',
|
||||
description: 'Clean, clinical design for healthcare and medical documentation. Emphasizes clarity and professionalism with calming blue accents.',
|
||||
vibe: 'Clinical, Professional, Trustworthy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Open Sans',
|
||||
body: 'Open Sans',
|
||||
code: 'Open Sans'
|
||||
},
|
||||
colors: {
|
||||
text: '37474F',
|
||||
textSecondary: '546E7A',
|
||||
background: 'FFFFFF',
|
||||
accent: '1565C0',
|
||||
border: '0D47A1',
|
||||
codeBg: 'E3F2FD',
|
||||
blockquoteBorder: '1565C0'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 20,
|
||||
color: '1565C0',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 18, after: 10, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 13,
|
||||
color: '0D47A1',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '1565C0',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '1976D2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '1976D2',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '2196F3',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '1565C0',
|
||||
spacing: { before: 10, after: 10, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'E3F2FD',
|
||||
borderLeft: { color: '1565C0', width: 4, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0D47A1',
|
||||
background: 'E3F2FD'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0D47A1',
|
||||
background: 'E3F2FD',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '1565C0',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '1565C0',
|
||||
bold: true,
|
||||
background: 'E3F2FD',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '37474F',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '90CAF9', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,154 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const phdThesis: StyleOption = {
|
||||
id: 'phd-thesis',
|
||||
name: 'PhD Thesis',
|
||||
category: 'Academic',
|
||||
description: 'The pinnacle of academic formatting. Extremely legible serif body, double spacing, and rigorous margin structure.',
|
||||
vibe: 'Formal, Scholarly, Prestigious',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Tinos',
|
||||
body: 'Crimson Text',
|
||||
code: 'Crimson Text'
|
||||
},
|
||||
colors: {
|
||||
text: '000000',
|
||||
textSecondary: '424242',
|
||||
background: 'FFFFFF',
|
||||
accent: '000000',
|
||||
border: '000000',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '000000'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 24,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
allCaps: true,
|
||||
align: 'center',
|
||||
spacing: { before: 24, after: 12, line: 1.2 }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '212121',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '616161',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 0, line: 2.0 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
italic: true,
|
||||
spacing: { before: 12, after: 12, line: 2.0 },
|
||||
padding: 10,
|
||||
indent: 40
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: '000000',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 2.0 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 2.0 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
spacing: { before: 4, after: 4, line: 2.0 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '000000',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 12,
|
||||
color: '000000',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '000000', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const scantronTest: StyleOption = {
|
||||
id: 'scantron-test',
|
||||
name: 'Scantron Test',
|
||||
category: 'Academic',
|
||||
description: 'Standardized testing sheet. Salmon pinks and greens with bubble-filling aesthetics.',
|
||||
vibe: 'Academic, Retro, Bureaucratic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Roboto Mono',
|
||||
body: 'Roboto Mono',
|
||||
code: 'Roboto Mono'
|
||||
},
|
||||
colors: {
|
||||
text: '212121',
|
||||
textSecondary: '424242',
|
||||
background: 'FFF3E0',
|
||||
accent: 'EF5350',
|
||||
border: 'B71C1C',
|
||||
codeBg: 'FFEBEE',
|
||||
blockquoteBorder: 'B71C1C'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 28,
|
||||
color: 'B71C1C',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
border: { color: 'EF5350', width: 2, style: 'single' }
|
||||
},
|
||||
h2: {
|
||||
font: 'heading',
|
||||
size: 14,
|
||||
color: '1B5E20',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: 'C8E6C9',
|
||||
spacing: { before: 16, after: 8, line: 1.2 },
|
||||
padding: 4
|
||||
},
|
||||
h3: {
|
||||
font: 'heading',
|
||||
size: 12,
|
||||
color: '2E7D32',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: '388E3C',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '43A047',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '4CAF50',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: 'B71C1C',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: 'FFEBEE',
|
||||
border: { color: 'B71C1C', width: 1, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: 'B71C1C',
|
||||
background: 'FFEBEE'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: 'B71C1C',
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: 'B71C1C',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: 'B71C1C',
|
||||
bold: true,
|
||||
background: 'FFEBEE',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '212121',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'EF5350', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,152 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const scientificJournal: StyleOption = {
|
||||
id: 'scientific-journal',
|
||||
name: 'Scientific Journal',
|
||||
category: 'Academic',
|
||||
description: 'Precise design for scientific publications. Clear hierarchy optimized for data-heavy content and citations.',
|
||||
vibe: 'Scientific, Precise, Academic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Literata:wght@400;500;700&family=Fira+Sans:wght@400;500;600&display=swap',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Literata',
|
||||
body: 'Literata',
|
||||
code: 'Fira Sans'
|
||||
},
|
||||
colors: {
|
||||
text: '262626',
|
||||
textSecondary: '4A4A4A',
|
||||
background: 'FFFFFF',
|
||||
accent: '0066CC',
|
||||
border: '0066CC',
|
||||
codeBg: 'F5F5F5',
|
||||
blockquoteBorder: '0066CC'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 18,
|
||||
color: '1A1A1A',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 18, after: 10, line: 1.3 }
|
||||
},
|
||||
h2: {
|
||||
font: 'code',
|
||||
size: 12,
|
||||
color: '1A1A1A',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 6, line: 1.2 }
|
||||
},
|
||||
h3: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: '262626',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '333333',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: '424242',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '4A4A4A',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 6, after: 3, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '262626',
|
||||
align: 'both',
|
||||
spacing: { before: 0, after: 7, line: 1.6 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 9,
|
||||
color: '4A4A4A',
|
||||
spacing: { before: 8, after: 8, line: 1.4 },
|
||||
padding: 10,
|
||||
borderLeft: { color: '0066CC', width: 2, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0066CC',
|
||||
background: 'F5F5F5'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 9,
|
||||
color: '0066CC',
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '262626',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: '0066CC',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 10,
|
||||
color: '1A1A1A',
|
||||
bold: true,
|
||||
background: 'F5F5F5',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: '262626',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: '0066CC', width: 1, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,159 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const weatherRadar: StyleOption = {
|
||||
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',
|
||||
typography: {
|
||||
fonts: {
|
||||
heading: 'Chakra Petch',
|
||||
body: 'Chakra Petch',
|
||||
code: 'Sarpanch'
|
||||
},
|
||||
colors: {
|
||||
text: 'E0F2F1',
|
||||
textSecondary: 'B2DFDB',
|
||||
background: '455A64',
|
||||
accent: 'FF1744',
|
||||
border: 'FF1744',
|
||||
codeBg: '37474F',
|
||||
blockquoteBorder: 'FFEA00'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
h1: {
|
||||
font: 'heading',
|
||||
size: 32,
|
||||
color: 'FF1744',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: '263238',
|
||||
spacing: { before: 20, after: 10, line: 1.2 },
|
||||
borderLeft: { color: 'FF1744', width: 8, style: 'solid' },
|
||||
padding: 16
|
||||
},
|
||||
h2: {
|
||||
font: 'code',
|
||||
size: 16,
|
||||
color: '00E676',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
background: '37474F',
|
||||
spacing: { before: 16, after: 8, line: 1.2 },
|
||||
padding: 8
|
||||
},
|
||||
h3: {
|
||||
font: 'code',
|
||||
size: 14,
|
||||
color: '69F0AE',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 14, after: 7, line: 1.2 }
|
||||
},
|
||||
h4: {
|
||||
font: 'code',
|
||||
size: 12,
|
||||
color: '69F0AE',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 12, after: 6, line: 1.2 }
|
||||
},
|
||||
h5: {
|
||||
font: 'code',
|
||||
size: 11,
|
||||
color: 'B9F6CA',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 10, after: 5, line: 1.2 }
|
||||
},
|
||||
h6: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'B9F6CA',
|
||||
bold: true,
|
||||
align: 'left',
|
||||
spacing: { before: 8, after: 4, line: 1.2 }
|
||||
},
|
||||
p: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: 'E0F2F1',
|
||||
align: 'left',
|
||||
spacing: { before: 0, after: 8, line: 1.5 }
|
||||
},
|
||||
blockquote: {
|
||||
font: 'body',
|
||||
size: 10,
|
||||
color: 'FFEA00',
|
||||
spacing: { before: 12, after: 12, line: 1.5 },
|
||||
padding: 16,
|
||||
background: '263238',
|
||||
border: { color: 'FFEA00', width: 2, style: 'solid' }
|
||||
},
|
||||
code: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'FFEA00',
|
||||
background: '37474F'
|
||||
},
|
||||
pre: {
|
||||
font: 'code',
|
||||
size: 10,
|
||||
color: 'FFEA00',
|
||||
background: '37474F',
|
||||
spacing: { before: 12, after: 12, line: 1.4 },
|
||||
padding: 12
|
||||
},
|
||||
ul: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
ol: {
|
||||
spacing: { before: 8, after: 8, line: 1.5 }
|
||||
},
|
||||
li: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: 'E0F2F1',
|
||||
spacing: { before: 4, after: 4, line: 1.5 }
|
||||
},
|
||||
strong: {
|
||||
bold: true
|
||||
},
|
||||
em: {
|
||||
italic: true
|
||||
},
|
||||
a: {
|
||||
color: 'FFEA00',
|
||||
underline: true
|
||||
},
|
||||
table: {
|
||||
spacing: { before: 12, after: 12, line: 1.4 }
|
||||
},
|
||||
th: {
|
||||
font: 'heading',
|
||||
size: 11,
|
||||
color: 'FF1744',
|
||||
bold: true,
|
||||
background: '263238',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
td: {
|
||||
font: 'body',
|
||||
size: 11,
|
||||
color: 'E0F2F1',
|
||||
background: '37474F',
|
||||
spacing: { before: 6, after: 6, line: 1.4 }
|
||||
},
|
||||
hr: {
|
||||
border: { color: 'FFEA00', width: 2, style: 'single' },
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
},
|
||||
img: {
|
||||
align: 'center',
|
||||
spacing: { before: 12, after: 12, line: 1 }
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const circusSideshow: StyleOption = {
|
||||
id: 'circus-sideshow',
|
||||
name: 'Circus Sideshow',
|
||||
category: 'Entertainment',
|
||||
description: 'Big top aesthetic. Ornamental fonts with red and cream stripe vibes.',
|
||||
vibe: 'Fun, Ornamental, Striped',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rye&family=Sancreek&family=Roboto+Slab&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Sancreek", size: 40, color: "D32F2F", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rye", size: 18, color: "1A237E", bold: false, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto Slab", size: 11, color: "212121", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto Slab', serif;
|
||||
background: #FFF8E1;
|
||||
h1 { font-family: 'Sancreek', cursive; font-size: 40pt; color: #D32F2F; text-align: center; margin-bottom: 24px; text-shadow: 2px 2px 0px #FBC02D; }
|
||||
h2 { font-family: 'Rye', serif; font-size: 18pt; color: #1A237E; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 4px double #D32F2F; padding: 20px; margin: 24px auto; background: #FFF; border-radius: 16px; font-family: 'Sancreek', cursive; font-size: 14pt; color: #1A237E; text-align: center; max-width: 80%; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const environmentalGreen: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const highwayInterstate: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { circusSideshow } from './circus-sideshow';
|
||||
import { environmentalGreen } from './environmental-green';
|
||||
import { highwayInterstate } from './highway-interstate';
|
||||
import { jungleExplorer } from './jungle-explorer';
|
||||
import { publicTransit } from './public-transit';
|
||||
import { silentFilmIntertitle } from './silent-film-intertitle';
|
||||
import { sportsDynamic } from './sports-dynamic';
|
||||
import { steampunkInventor } from './steampunk-inventor';
|
||||
import { subwayTile } from './subway-tile';
|
||||
import { taxiCab } from './taxi-cab';
|
||||
import { varsityTeam } from './varsity-team';
|
||||
|
||||
export const coreStyles: StyleOption[] = [
|
||||
circusSideshow,
|
||||
environmentalGreen,
|
||||
highwayInterstate,
|
||||
jungleExplorer,
|
||||
publicTransit,
|
||||
silentFilmIntertitle,
|
||||
sportsDynamic,
|
||||
steampunkInventor,
|
||||
subwayTile,
|
||||
taxiCab,
|
||||
varsityTeam
|
||||
];
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const jungleExplorer: StyleOption = {
|
||||
id: 'jungle-explorer',
|
||||
name: 'Jungle Explorer',
|
||||
category: 'Adventure',
|
||||
description: 'Safari expedition style. Khaki, olive drab, and canvas textures.',
|
||||
vibe: 'Adventure, Khaki, Nature',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Stardos+Stencil&family=Domine:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Stardos Stencil", size: 36, color: "33691E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "827717", space: 6, style: "thick", size: 18 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Domine", size: 16, color: "558B2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Domine", size: 11, color: "1B1B1B", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "827717"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Domine', serif;
|
||||
background: #F0F4C3; /* Khaki tint */
|
||||
h1 { font-family: 'Stardos Stencil', cursive; font-size: 36pt; font-weight: 700; color: #33691E; border-bottom: 4px solid #827717; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #558B2F; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #1B1B1B; margin-bottom: 14px; }
|
||||
blockquote { background: #DCEDC8; padding: 20px; border-left: 6px solid #33691E; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const publicTransit: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const silentFilmIntertitle: StyleOption = {
|
||||
id: 'silent-film-intertitle',
|
||||
name: 'Silent Film Intertitle',
|
||||
category: 'Cinema',
|
||||
description: '1920s cinema cards. White decorative text on black backgrounds with ornate borders.',
|
||||
vibe: 'Cinema, Vintage, Dramatic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Gye-Gye&family=Sorts+Mill+Goudy&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Gye-Gye", size: 32, color: "FFFFFF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Sorts Mill Goudy", size: 18, color: "EEEEEE", bold: false, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Sorts Mill Goudy", size: 14, color: "000000", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
h1 { font-family: 'Gye-Gye', sans-serif; font-size: 32pt; color: #FFFFFF; background: #000000; padding: 20px; text-align: center; margin-bottom: 24px; border: 4px double #FFF; }
|
||||
h2 { font-size: 18pt; color: #EEEEEE; background: #212121; display: inline-block; padding: 10px 20px; margin-top: 30px; margin-bottom: 16px; border-radius: 8px; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #000000; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px solid #000; padding: 20px; margin: 24px 0; font-style: italic; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const sportsDynamic: StyleOption = {
|
||||
id: 'sports-dynamic',
|
||||
name: 'Sports Dynamic',
|
||||
category: 'Sports',
|
||||
description: 'Energetic and bold design for sports and athletic content. Dynamic typography with high-impact colors.',
|
||||
vibe: 'Energetic, Bold, Athletic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bebas Neue", size: 36, color: "D32F2F", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Rubik", size: 14, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Rubik", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Rubik', sans-serif;
|
||||
h1 { font-family: 'Bebas Neue', sans-serif; font-size: 36pt; color: #D32F2F; margin-bottom: 24px; letter-spacing: 2px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { background: #FFEBEE; padding: 16px; border-left: 6px solid #D32F2F; margin: 20px 0; font-weight: 500; }
|
||||
`
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const steampunkInventor: StyleOption = {
|
||||
id: 'steampunk-inventor',
|
||||
name: 'Steampunk Inventor',
|
||||
category: 'Fantasy',
|
||||
description: 'Brass and gear aesthetic. Victorian fonts with industrial metallic colors.',
|
||||
vibe: 'Mechanical, Brass, Victorian',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Rye&family=Lora:wght@400;700&display=swap',
|
||||
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rye", size: 30, color: "5D4037", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: { bottom: { color: "B8860B", space: 8, style: "single", size: 24 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Lora", size: 16, color: "8D6E63", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Lora", size: 11, color: "3E2723", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
|
||||
previewCss: `
|
||||
font-family: 'Lora', serif;
|
||||
background: #EFEBE9;
|
||||
h1 { font-family: 'Rye', serif; font-size: 30pt; color: #5D4037; border-bottom: 6px double #B8860B; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #8D6E63; margin-top: 30px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #3E2723; margin-bottom: 14px; }
|
||||
blockquote { background: #D7CCC8; padding: 16px; border: 2px solid #5D4037; border-radius: 4px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const subwayTile: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const taxiCab: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const varsityTeam: StyleOption = {
|
||||
id: 'varsity-team',
|
||||
name: 'Varsity Team',
|
||||
category: 'Sport',
|
||||
description: 'College sports jersey style. Block lettering with athletic gold and navy.',
|
||||
vibe: 'Athletic, College, Bold',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Graduate&family=Saira:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Graduate", size: 36, color: "FDD835", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
shading: { fill: "1A237E", color: "auto", style: "clear" },
|
||||
border: {
|
||||
top: { color: "FDD835", space: 8, style: "single", size: 24 },
|
||||
bottom: { color: "FDD835", space: 8, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Saira", size: 20, color: "1A237E", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Saira", size: 12, color: "212121", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "FDD835"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Saira', sans-serif;
|
||||
h1 { font-family: 'Graduate', serif; font-size: 36pt; color: #FDD835; background: #1A237E; border-top: 4px solid #FDD835; border-bottom: 4px solid #FDD835; padding: 20px; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #1A237E; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #212121; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 2px dashed #1A237E; padding: 16px; margin: 24px 0; background: #E8EAF6; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const annualReport: StyleOption = {
|
||||
id: 'annual-report',
|
||||
name: 'Annual Report',
|
||||
category: 'Corporate',
|
||||
description: 'Trustworthy and substantial. Deep navy blues, clean sans-serifs, and grid-like precision.',
|
||||
vibe: 'Financial, Serious, Trust',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700;900&family=Merriweather:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Libre Franklin", size: 32, color: "0D2B46", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Libre Franklin", size: 16, color: "A0A0A0", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Merriweather", size: 10, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "0D2B46"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Merriweather', serif;
|
||||
h1 { font-family: 'Libre Franklin', sans-serif; font-size: 32pt; font-weight: 900; color: #0D2B46; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Libre Franklin', sans-serif; font-size: 16pt; font-weight: 700; color: #A0A0A0; text-transform: uppercase; margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid #CCC; padding-bottom: 4px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #333333; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border-left: 4px solid #0D2B46; padding-left: 16px; margin: 24px 0; color: #0D2B46; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const corporateExecutive: StyleOption = {
|
||||
id: 'corporate-executive',
|
||||
name: 'Corporate Executive',
|
||||
category: 'Corporate',
|
||||
description: 'Authoritative and professional. Designed for board reports, executive summaries, and high-stakes business communications.',
|
||||
vibe: 'Executive, Formal, Trustworthy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Source Serif 4", size: 24, color: "1A237E", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Source Sans 3", size: 14, color: "303F9F", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Source Sans 3", size: 10, color: "333333", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "1A237E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
h1 { font-family: 'Source Serif 4', serif; font-size: 24pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; border-bottom: 2px solid #1A237E; padding-bottom: 8px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #303F9F; margin-top: 30px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #1A237E; padding-left: 16px; color: #1A237E; margin: 20px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const creditCardPlatinum: StyleOption = {
|
||||
id: 'credit-card-platinum',
|
||||
name: 'Credit Card Platinum',
|
||||
category: 'Financial',
|
||||
description: 'Premium card aesthetic. Silver/gradient shading with OCR-style raised numbering fonts.',
|
||||
vibe: 'Premium, Silver, Metallic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Krub:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Krub", size: 32, color: "E0E0E0", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "424242", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Share Tech Mono", size: 18, color: "C0C0C0", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 100
|
||||
},
|
||||
body: {
|
||||
font: "Krub", size: 11, color: "616161", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "C0C0C0"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Krub', sans-serif;
|
||||
h1 { font-size: 32pt; font-weight: 700; color: #E0E0E0; background: linear-gradient(135deg, #616161, #212121); padding: 16px; margin-bottom: 24px; border-radius: 12px; }
|
||||
h2 { font-family: 'Share Tech Mono', monospace; font-size: 18pt; color: #757575; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 0 #FFF; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #616161; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #C0C0C0; padding-left: 16px; margin: 24px 0; background: #F5F5F5; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const currencyBill: StyleOption = {
|
||||
id: 'currency-bill',
|
||||
name: 'Currency Bill',
|
||||
category: 'Official',
|
||||
description: 'Banknote aesthetic. Intricate guilloche-style borders and emerald green serif fonts.',
|
||||
vibe: 'Financial, Secure, Green',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&family=Noto+Serif:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display SC", size: 36, color: "1B5E20", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: {
|
||||
top: { color: "2E7D32", space: 6, style: "double", size: 12 },
|
||||
bottom: { color: "2E7D32", space: 6, style: "double", size: 12 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Noto Serif", size: 16, color: "388E3C", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Noto Serif", size: 11, color: "1B5E20", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2E7D32"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Noto Serif', serif;
|
||||
background: #E8F5E9;
|
||||
h1 { font-family: 'Playfair Display SC', serif; font-size: 36pt; font-weight: 700; color: #1B5E20; text-align: center; border-top: 4px double #2E7D32; border-bottom: 4px double #2E7D32; padding: 12px 0; margin-bottom: 24px; letter-spacing: 2px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #388E3C; text-align: center; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #1B5E20; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { border: 1px solid #2E7D32; padding: 20px; margin: 24px 0; background: #C8E6C9; text-align: center; border-radius: 50%; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
|
||||
`
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { annualReport } from './annual-report';
|
||||
import { corporateExecutive } from './corporate-executive';
|
||||
import { creditCardPlatinum } from './credit-card-platinum';
|
||||
import { currencyBill } from './currency-bill';
|
||||
import { legalContract } from './legal-contract';
|
||||
import { legalPleading } from './legal-pleading';
|
||||
import { passportOfficial } from './passport-official';
|
||||
import { policeBlotter } from './police-blotter';
|
||||
import { politicalCampaign } from './political-campaign';
|
||||
import { stockTicker } from './stock-ticker';
|
||||
import { techMemo } from './tech-memo';
|
||||
import { topSecretRedacted } from './top-secret-redacted';
|
||||
import { whiteboardStrategy } from './whiteboard-strategy';
|
||||
|
||||
export const corporateStyles: StyleOption[] = [
|
||||
annualReport,
|
||||
corporateExecutive,
|
||||
creditCardPlatinum,
|
||||
currencyBill,
|
||||
legalContract,
|
||||
legalPleading,
|
||||
passportOfficial,
|
||||
policeBlotter,
|
||||
politicalCampaign,
|
||||
stockTicker,
|
||||
techMemo,
|
||||
topSecretRedacted,
|
||||
whiteboardStrategy
|
||||
];
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const legalContract: StyleOption = {
|
||||
id: 'legal-contract',
|
||||
name: 'Legal Contract',
|
||||
category: 'Corporate',
|
||||
description: 'Binding agreement style. Serif fonts, justified text, and numbered section aesthetics.',
|
||||
vibe: 'Legal, Binding, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tinos", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Tinos", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 },
|
||||
underline: true
|
||||
},
|
||||
body: {
|
||||
font: "Tinos", size: 11, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 120, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Tinos', serif;
|
||||
h1 { font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-transform: uppercase; margin-bottom: 16px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 11pt; line-height: 1.4; color: #000000; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { margin: 20px 40px; border: 1px solid #000; padding: 10px; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const legalPleading: StyleOption = {
|
||||
id: 'legal-pleading',
|
||||
name: 'Legal Pleading',
|
||||
category: 'Professional',
|
||||
description: 'Courtroom document style. Rigid framing, double spacing, and traditional serif fonts.',
|
||||
vibe: 'Legal, Strict, Formal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Courier+Prime&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "EB Garamond", size: 14, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true,
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 4 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "EB Garamond", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 12, color: "000000", align: 'both',
|
||||
spacing: { before: 0, after: 0, line: 480 },
|
||||
border: { left: { color: "BDBDBD", space: 12, style: "single", size: 4 } }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
line-height: 2.0;
|
||||
h1 { font-family: 'EB Garamond', serif; font-size: 14pt; font-weight: 700; color: #000000; text-align: center; text-decoration: underline; text-transform: uppercase; margin-bottom: 24px; }
|
||||
h2 { font-family: 'EB Garamond', serif; font-size: 12pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 12pt; color: #000000; margin-bottom: 0px; text-align: justify; border-left: 1px solid #BDBDBD; padding-left: 15px; }
|
||||
blockquote { margin-left: 40px; border-left: 1px solid #BDBDBD; padding-left: 15px; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const passportOfficial: StyleOption = {
|
||||
id: 'passport-official',
|
||||
name: 'Passport Official',
|
||||
category: 'Government',
|
||||
description: 'International travel document aesthetic. Machine-readable fonts with secure, bureaucratic vibes.',
|
||||
vibe: 'Official, Secure, Monospace',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;700&family=Courier+Prime&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Martian Mono", size: 22, color: "1A237E", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Martian Mono", size: 12, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 140, line: 260 }
|
||||
},
|
||||
accentColor: "B71C1C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Martian Mono', monospace; font-size: 22pt; font-weight: 700; color: #1A237E; margin-bottom: 24px; letter-spacing: -1px; }
|
||||
h2 { font-family: 'Martian Mono', monospace; font-size: 12pt; font-weight: 700; color: #B71C1C; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
|
||||
blockquote { border: 1px dashed #1A237E; padding: 16px; margin: 20px 0; background: #E8EAF6; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const policeBlotter: StyleOption = {
|
||||
id: 'police-blotter',
|
||||
name: 'Police Blotter',
|
||||
category: 'Official',
|
||||
description: 'Law enforcement paperwork. Carbon copy blue fonts on stark white forms.',
|
||||
vibe: 'Official, Blue, Bureaucratic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Special+Elite&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Special Elite", size: 26, color: "0D47A1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "E3F2FD", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "1A237E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0D47A1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-family: 'Special Elite', cursive; font-size: 26pt; color: #0D47A1; margin-bottom: 24px; text-transform: uppercase; text-decoration: underline; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; background: #E3F2FD; display: block; padding: 4px; margin-top: 32px; margin-bottom: 16px; border: 1px solid #0D47A1; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #1A237E; margin-bottom: 14px; }
|
||||
blockquote { border: 1px solid #000; padding: 16px; margin: 24px 0; background: #FAFAFA; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const politicalCampaign: StyleOption = {
|
||||
id: 'political-campaign',
|
||||
name: 'Political Campaign',
|
||||
category: 'Professional',
|
||||
description: 'Bold, patriotic design for campaigns. Strong headers with red, white, and blue motifs.',
|
||||
vibe: 'Patriotic, Bold, Official',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Francois+One&family=Cabin:wght@400;600;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Francois One", size: 36, color: "0D47A1", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "D32F2F", space: 8, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cabin", size: 16, color: "D32F2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Cabin", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Cabin', sans-serif;
|
||||
h1 { font-family: 'Francois One', sans-serif; font-size: 36pt; color: #0D47A1; border-bottom: 4px solid #D32F2F; padding-bottom: 12px; margin-bottom: 24px; text-transform: uppercase; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #D32F2F; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { background: #E3F2FD; padding: 20px; border-left: 8px solid #0D47A1; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const stockTicker: StyleOption = {
|
||||
id: 'stock-ticker',
|
||||
name: 'Stock Ticker',
|
||||
category: 'Financial',
|
||||
description: 'LED moving message sign. Dot matrix fonts with bright green/red on black.',
|
||||
vibe: 'Financial, Digital, LED',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "DotGothic16", size: 32, color: "00E676", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "DotGothic16", size: 18, color: "FF1744", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "DotGothic16", size: 12, color: "E0E0E0", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "00E676"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'DotGothic16', sans-serif;
|
||||
background: #212121;
|
||||
h1 { font-size: 32pt; color: #00E676; background: #000000; padding: 12px; margin-bottom: 24px; border-bottom: 2px solid #333; }
|
||||
h2 { font-size: 18pt; color: #FF1744; background: #000000; padding: 8px; margin-top: 32px; margin-bottom: 16px; display: inline-block; }
|
||||
p { font-size: 12pt; line-height: 1.5; color: #E0E0E0; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #00E676; padding-left: 16px; margin: 24px 0; color: #B9F6CA; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const techMemo: StyleOption = {
|
||||
id: 'tech-memo',
|
||||
name: 'Tech Memorandum',
|
||||
category: 'Corporate',
|
||||
description: 'Modern, functional, and authoritative. Uses shading for headers to create distinct sections.',
|
||||
vibe: 'Corporate, Tech, Strategy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Roboto", size: 24, color: "0F172A", bold: true, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "F1F5F9", color: "auto", style: "clear" },
|
||||
border: { left: { color: "2563EB", space: 10, style: "single", size: 48 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Roboto", size: 14, color: "2563EB", bold: true, align: 'left',
|
||||
spacing: { before: 300, after: 150, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Roboto", size: 10, color: "334155", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "2563EB"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Roboto', sans-serif;
|
||||
h1 { font-size: 24pt; font-weight: 700; background: #F1F5F9; color: #0F172A; padding: 12px 16px; border-left: 8px solid #2563EB; margin-bottom: 20px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #2563EB; margin-top: 30px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #334155; margin-bottom: 14px; }
|
||||
blockquote { background: #EFF6FF; padding: 16px; border-radius: 4px; color: #1E40AF; border-left: 4px solid #2563EB; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const topSecretRedacted: StyleOption = {
|
||||
id: 'top-secret-redacted',
|
||||
name: 'Top Secret Redacted',
|
||||
category: 'Government',
|
||||
description: 'Declassified document style. Typewriter fonts with "blacked out" highlight effects.',
|
||||
vibe: 'Secret, Classified, Rough',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Special Elite", size: 28, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: {
|
||||
top: { color: "000000", space: 6, style: "single", size: 24 },
|
||||
bottom: { color: "000000", space: 6, style: "single", size: 24 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "B71C1C", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "000000", color: "auto", style: "clear" }
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
background: #F5F5F5;
|
||||
h1 { font-family: 'Special Elite', cursive; font-size: 28pt; color: #000000; border-top: 4px solid #000; border-bottom: 4px solid #000; padding: 16px 0; text-align: center; margin-bottom: 28px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #B71C1C; background: #000000; display: inline-block; padding: 4px 12px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.6; color: #000000; margin-bottom: 14px; }
|
||||
blockquote { background: #000; color: #000; padding: 10px; margin: 20px 0; user-select: none; }
|
||||
blockquote:hover { color: #FFF; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const whiteboardStrategy: StyleOption = {
|
||||
id: 'whiteboard-strategy',
|
||||
name: 'Whiteboard Strategy',
|
||||
category: 'Business',
|
||||
description: 'Brainstorming session. Dry-erase marker fonts in standard office colors (Black, Blue, Red).',
|
||||
vibe: 'Corporate, Brainstorm, Sketch',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Architects Daughter", size: 36, color: "D32F2F", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "1976D2", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Patrick Hand", size: 20, color: "1976D2", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Patrick Hand", size: 14, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background: #FFFFFF;
|
||||
h1 { font-family: 'Architects Daughter', cursive; font-size: 36pt; font-weight: 700; color: #D32F2F; border-bottom: 3px solid #1976D2; padding-bottom: 10px; margin-bottom: 24px; text-align: center; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #1976D2; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px solid #388E3C; padding: 16px; margin: 24px 0; border-radius: 16px; color: #388E3C; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const bauhausPoster: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const blueprintCyanotype: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const brickToy: StyleOption = {
|
||||
id: 'brick-toy',
|
||||
name: 'Brick Toy',
|
||||
category: 'Playful',
|
||||
description: 'Plastic building block aesthetic. Primary red, blue, and yellow with chunky text.',
|
||||
vibe: 'Playful, Primary, Chunky',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@400;800&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Titan One", size: 36, color: "D32F2F", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "FFEB3B", color: "auto", style: "clear" } // Yellow background
|
||||
},
|
||||
heading2: {
|
||||
font: "Nunito", size: 18, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
shading: { fill: "1976D2", color: "auto", style: "clear" } // Blue background
|
||||
},
|
||||
body: {
|
||||
font: "Nunito", size: 12, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D32F2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Nunito', sans-serif;
|
||||
h1 { font-family: 'Titan One', cursive; font-size: 36pt; color: #D32F2F; background: #FFEB3B; padding: 16px; border-radius: 8px; text-align: center; margin-bottom: 24px; border: 4px solid #D32F2F; }
|
||||
h2 { font-size: 18pt; font-weight: 800; color: #FFFFFF; background: #1976D2; padding: 8px 16px; border-radius: 4px; display: inline-block; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dotted #D32F2F; padding: 16px; margin: 24px 0; background: #E3F2FD; }
|
||||
`
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const brutalistMono: 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; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const glitchArt: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const grunge90s: StyleOption = {
|
||||
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); }
|
||||
`
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { bauhausPoster } from './bauhaus-poster';
|
||||
import { blueprintCyanotype } from './blueprint-cyanotype';
|
||||
import { brickToy } from './brick-toy';
|
||||
import { brutalistMono } from './brutalist-mono';
|
||||
import { glitchArt } from './glitch-art';
|
||||
import { grunge90s } from './grunge-90s';
|
||||
import { kindergartenArt } from './kindergarten-art';
|
||||
import { origamiPaper } from './origami-paper';
|
||||
import { popArtComic } from './pop-art-comic';
|
||||
import { risographPrint } from './risograph-print';
|
||||
import { streetArtGraffiti } from './street-art-graffiti';
|
||||
import { vaporwaveAesthetic } from './vaporwave-aesthetic';
|
||||
import { watercolorWash } from './watercolor-wash';
|
||||
|
||||
export const creativeStyles: StyleOption[] = [
|
||||
bauhausPoster,
|
||||
blueprintCyanotype,
|
||||
brickToy,
|
||||
brutalistMono,
|
||||
glitchArt,
|
||||
grunge90s,
|
||||
kindergartenArt,
|
||||
origamiPaper,
|
||||
popArtComic,
|
||||
risographPrint,
|
||||
streetArtGraffiti,
|
||||
vaporwaveAesthetic,
|
||||
watercolorWash
|
||||
];
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const kindergartenArt: StyleOption = {
|
||||
id: 'kindergarten-art',
|
||||
name: 'Kindergarten Art',
|
||||
category: 'Playful',
|
||||
description: 'Child-like crayon aesthetic. Primary colors, rounded fonts, and large friendly text.',
|
||||
vibe: 'Childish, Fun, Primary',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chewy&family=Balsamiq+Sans:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Chewy", size: 40, color: "2962FF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Balsamiq Sans", size: 18, color: "D50000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Balsamiq Sans", size: 14, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "FFD600"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Balsamiq Sans', cursive;
|
||||
h1 { font-family: 'Chewy', cursive; font-size: 40pt; color: #2962FF; text-align: center; margin-bottom: 24px; transform: rotate(-2deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { border: 4px dashed #FFD600; padding: 20px; margin: 24px 0; border-radius: 20px; background: #FFFDE7; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const origamiPaper: StyleOption = {
|
||||
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); }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const popArtComic: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const risographPrint: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const streetArtGraffiti: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const vaporwaveAesthetic: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const watercolorWash: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const artNouveauOrganic: StyleOption = {
|
||||
id: 'art-nouveau-organic',
|
||||
name: 'Art Nouveau Organic',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by the Art Nouveau movement (1890-1910). Flowing organic lines with nature-inspired elegance and whiplash curves.',
|
||||
vibe: 'Organic, Flowing, Decorative',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:wght@400&family=Fanwood+Text:wght@400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Sorts Mill Goudy", size: 32, color: "4A5D23", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 },
|
||||
border: { bottom: { color: "8FA876", space: 10, style: "single", size: 8 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Sorts Mill Goudy", size: 16, color: "6B7F4A", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Fanwood Text", size: 11, color: "3D4A2D", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "8FA876"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Fanwood Text', serif;
|
||||
h1 { font-family: 'Sorts Mill Goudy', serif; font-size: 32pt; color: #4A5D23; text-align: center; border-bottom: 2px solid #8FA876; padding-bottom: 16px; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Sorts Mill Goudy', serif; font-size: 16pt; color: #6B7F4A; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #3D4A2D; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #F4F7F0; padding: 20px; border-left: 3px solid #8FA876; margin: 28px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const artsCraftsHeritage: StyleOption = {
|
||||
id: 'arts-crafts-heritage',
|
||||
name: 'Arts & Crafts Heritage',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by William Morris and the Arts & Crafts movement (1880s-1900). Emphasizes craftsmanship, natural forms, and medieval aesthetics with readable typography.',
|
||||
vibe: 'Artisan, Literary, Handcrafted',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=EB+Garamond:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant Garamond", size: 28, color: "2F4F4F", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 },
|
||||
border: {
|
||||
bottom: { color: "556B2F", space: 8, style: "single", size: 8 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Garamond", size: 16, color: "556B2F", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "EB Garamond", size: 11, color: "3C3C3C", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "556B2F"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'EB Garamond', serif;
|
||||
h1 { font-family: 'Cormorant Garamond', serif; font-size: 28pt; font-weight: 700; color: #2F4F4F; text-align: center; border-bottom: 2px solid #556B2F; padding-bottom: 16px; margin-bottom: 28px; }
|
||||
h2 { font-family: 'Cormorant Garamond', serif; font-size: 16pt; font-weight: 700; color: #556B2F; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #3C3C3C; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { background: #F5F5DC; padding: 20px; border-left: 4px solid #556B2F; margin: 24px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const baroqueSplendor: StyleOption = {
|
||||
id: 'baroque-splendor',
|
||||
name: 'Baroque Splendor',
|
||||
category: 'Classic',
|
||||
description: 'Heavy, dramatic 17th-century luxury. Deep golds and crimsons with deeply flourished script.',
|
||||
vibe: 'Luxurious, Dramatic, Heavy',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Mate:wght@400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Mrs Saint Delafield", size: 48, color: "800000", bold: false, align: 'center',
|
||||
spacing: { before: 520, after: 320, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Mate", size: 16, color: "B8860B", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Mate", size: 12, color: "3D2B1F", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Mate', serif;
|
||||
h1 { font-family: 'Mrs Saint Delafield', cursive; font-size: 48pt; color: #800000; text-align: center; margin-bottom: 36px; }
|
||||
h2 { font-size: 16pt; font-weight: 700; color: #B8860B; text-align: center; margin-top: 40px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
|
||||
p { font-size: 12pt; line-height: 1.8; color: #3D2B1F; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #FFF8E7; border: 2px double #B8860B; padding: 24px; margin: 32px 0; text-align: center; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const cottagecoreJournal: StyleOption = {
|
||||
id: 'cottagecore-journal',
|
||||
name: 'Cottagecore Journal',
|
||||
category: 'Aesthetic',
|
||||
description: 'Whimsical countryside diary. Handwritten fonts with soft sage greens and earthy browns.',
|
||||
vibe: 'Whimsical, Nature, Handmade',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Patrick+Hand&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Amatic SC", size: 40, color: "33691E", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Patrick Hand", size: 18, color: "5D4037", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Patrick Hand", size: 14, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "33691E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background: #F1F8E9;
|
||||
h1 { font-family: 'Amatic SC', cursive; font-size: 40pt; font-weight: 700; color: #33691E; text-align: center; margin-bottom: 24px; }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #5D4037; text-align: center; margin-top: 30px; margin-bottom: 14px; border-bottom: 1px dashed #8D6E63; display: inline-block; }
|
||||
p { font-size: 14pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF; border: 1px dotted #33691E; padding: 20px; border-radius: 10px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const dutchGoldenAge: StyleOption = {
|
||||
id: 'dutch-golden-age',
|
||||
name: 'Dutch Golden Age',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by 17th century Dutch art and typography. Rich, painterly aesthetics with Rembrandt-era elegance.',
|
||||
vibe: 'Classical, Rich, Painterly',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Pirata+One&family=Gentium+Book+Plus:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Pirata One", size: 32, color: "3E2723", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Gentium Book Plus", size: 14, color: "5D4037", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Gentium Book Plus", size: 11, color: "4E342E", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "BF8040"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Gentium Book Plus', serif;
|
||||
h1 { font-family: 'Pirata One', cursive; font-size: 32pt; color: #3E2723; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #5D4037; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #4E342E; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #EFEBE9; padding: 20px; border: 1px solid #BF8040; margin: 28px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const fashionMagazine: StyleOption = {
|
||||
id: 'fashion-magazine',
|
||||
name: 'Fashion Magazine',
|
||||
category: 'Editorial',
|
||||
description: 'Trendy and bold. High-contrast typography with oversized lettering and pink accents.',
|
||||
vibe: 'Trendy, Loud, Pink',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@300;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Abril Fatface", size: 48, color: "E91E63", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 200 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Raleway", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
allCaps: true,
|
||||
tracking: 200
|
||||
},
|
||||
body: {
|
||||
font: "Raleway", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "E91E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Raleway', sans-serif;
|
||||
h1 { font-family: 'Abril Fatface', cursive; font-size: 48pt; color: #E91E63; margin-bottom: 24px; line-height: 0.9; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 4px; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { border-left: 10px solid #E91E63; padding-left: 20px; margin: 24px 0; font-family: 'Abril Fatface', cursive; font-size: 18pt; }
|
||||
`
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const filmScript: StyleOption = {
|
||||
id: 'film-script',
|
||||
name: 'Film Script',
|
||||
category: 'Editorial',
|
||||
description: 'Hollywood screenplay format. Courier font, specific margins, and character name centering.',
|
||||
vibe: 'Cinematic, Format, Draft',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 240, line: 240 },
|
||||
allCaps: true,
|
||||
underline: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 0, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 12, color: "000000", align: 'left',
|
||||
spacing: { before: 0, after: 0, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
h1 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; text-transform: uppercase; margin-bottom: 12px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #000000; text-transform: uppercase; text-align: center; margin-top: 24px; margin-bottom: 0px; }
|
||||
p { font-size: 12pt; line-height: 1; color: #000000; margin-bottom: 12px; }
|
||||
blockquote { margin: 0 40px; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { artNouveauOrganic } from './art-nouveau-organic';
|
||||
import { artsCraftsHeritage } from './arts-crafts-heritage';
|
||||
import { baroqueSplendor } from './baroque-splendor';
|
||||
import { cottagecoreJournal } from './cottagecore-journal';
|
||||
import { dutchGoldenAge } from './dutch-golden-age';
|
||||
import { fashionMagazine } from './fashion-magazine';
|
||||
import { filmScript } from './film-script';
|
||||
import { indieZine } from './indie-zine';
|
||||
import { literaryReview } from './literary-review';
|
||||
import { luxuryEditorial } from './luxury-editorial';
|
||||
import { neoGothicRevival } from './neo-gothic-revival';
|
||||
import { newspaperClassic } from './newspaper-classic';
|
||||
import { newspaperModern } from './newspaper-modern';
|
||||
import { newspaperTabloid } from './newspaper-tabloid';
|
||||
import { nyEditor } from './ny-editor';
|
||||
import { rococoRomance } from './rococo-romance';
|
||||
import { victorianOrnate } from './victorian-ornate';
|
||||
|
||||
export const editorialStyles: StyleOption[] = [
|
||||
artNouveauOrganic,
|
||||
artsCraftsHeritage,
|
||||
baroqueSplendor,
|
||||
cottagecoreJournal,
|
||||
dutchGoldenAge,
|
||||
fashionMagazine,
|
||||
filmScript,
|
||||
indieZine,
|
||||
literaryReview,
|
||||
luxuryEditorial,
|
||||
neoGothicRevival,
|
||||
newspaperClassic,
|
||||
newspaperModern,
|
||||
newspaperTabloid,
|
||||
nyEditor,
|
||||
rococoRomance,
|
||||
victorianOrnate
|
||||
];
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const indieZine: StyleOption = {
|
||||
id: 'indie-zine',
|
||||
name: 'Indie Zine',
|
||||
category: 'Editorial',
|
||||
description: 'DIY photocopier aesthetic. Typewriter fonts, cut-out look, and rebellious asymmetry.',
|
||||
vibe: 'DIY, Rebellious, Rough',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Rock+Salt&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Rock Salt", size: 28, color: "000000", bold: false, align: 'left',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "D1C4E9", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Special Elite", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Special Elite", size: 10, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Special Elite', cursive;
|
||||
h1 { font-family: 'Rock Salt', cursive; font-size: 28pt; color: #000000; background: #D1C4E9; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; display: inline-block; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; width: fit-content; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border: 2px dashed #000; padding: 16px; margin: 24px 0; transform: rotate(1deg); }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const literaryReview: StyleOption = {
|
||||
id: 'literary-review',
|
||||
name: 'Literary Review',
|
||||
category: 'Editorial',
|
||||
description: 'Classic bookish aesthetic. Dense serif text, elegant headers, perfect for long-form essays.',
|
||||
vibe: 'Intellectual, Dense, Classic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Sorts+Mill+Goudy&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Crimson Pro", size: 30, color: "4A148C", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Crimson Pro", size: 14, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 },
|
||||
smallCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "4A148C"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
h1 { font-family: 'Crimson Pro', serif; font-size: 30pt; font-weight: 700; color: #4A148C; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Crimson Pro', serif; font-size: 14pt; color: #000000; text-align: center; margin-top: 36px; margin-bottom: 18px; font-variant: small-caps; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { margin: 24px 40px; font-style: italic; color: #4A148C; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const luxuryEditorial: StyleOption = {
|
||||
id: 'luxury-editorial',
|
||||
name: 'Luxury Editorial',
|
||||
category: 'Editorial',
|
||||
description: 'High-fashion magazine inspired design. Elegant serifs with sophisticated spacing and premium feel for upscale content.',
|
||||
vibe: 'Fashion, Premium, Sophisticated',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;700&family=Montserrat:wght@300;400;500&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cormorant", size: 36, color: "1C1C1C", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Montserrat", size: 11, color: "1C1C1C", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Montserrat", size: 10, color: "3A3A3A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "B8860B"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
h1 { font-family: 'Cormorant', serif; font-size: 36pt; font-weight: 500; color: #1C1C1C; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
|
||||
h2 { font-size: 11pt; font-weight: 500; color: #1C1C1C; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #3A3A3A; margin-bottom: 16px; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #B8860B; border-bottom: 1px solid #B8860B; padding: 24px 0; margin: 32px 0; text-align: center; font-family: 'Cormorant', serif; font-size: 14pt; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const neoGothicRevival: StyleOption = {
|
||||
id: 'neo-gothic-revival',
|
||||
name: 'Neo-Gothic Revival',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by Gothic architecture and medieval manuscripts. Dark, dramatic typography with ecclesiastical gravitas.',
|
||||
vibe: 'Medieval, Dramatic, Historic',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Spectral:wght@400;500;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Cinzel Decorative", size: 28, color: "1A1A1A", bold: true, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 },
|
||||
border: {
|
||||
top: { color: "4A0E0E", space: 12, style: "single", size: 16 },
|
||||
bottom: { color: "4A0E0E", space: 12, style: "single", size: 16 }
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
font: "Cinzel Decorative", size: 14, color: "4A0E0E", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Spectral", size: 11, color: "2C2C2C", align: 'both',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "4A0E0E"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Spectral', serif;
|
||||
h1 { font-family: 'Cinzel Decorative', cursive; font-size: 28pt; font-weight: 700; color: #1A1A1A; text-align: center; border-top: 3px solid #4A0E0E; border-bottom: 3px solid #4A0E0E; padding: 20px 0; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Cinzel Decorative', cursive; font-size: 14pt; color: #4A0E0E; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #2C2C2C; margin-bottom: 16px; text-align: justify; }
|
||||
blockquote { background: #F5F5EB; padding: 20px; border-left: 4px solid #4A0E0E; margin: 28px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const newspaperClassic: StyleOption = {
|
||||
id: 'newspaper-classic',
|
||||
name: 'Newspaper Classic',
|
||||
category: 'Editorial',
|
||||
description: 'Traditional newspaper layout with strong typographic hierarchy. Bold headlines, readable body text, and authoritative presence.',
|
||||
vibe: 'News, Authority, Information',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=PT+Serif:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 240, after: 160, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 240, after: 120, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "PT Serif", size: 10, color: "1A1A1A", align: 'both',
|
||||
spacing: { before: 0, after: 120, line: 280 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'PT Serif', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 900; color: #000000; text-align: center; border-bottom: 2px solid #000000; padding-bottom: 12px; margin-bottom: 20px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 10px; text-align: justify; }
|
||||
blockquote { font-size: 14pt; font-style: italic; text-align: center; margin: 24px 40px; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const newspaperModern: StyleOption = {
|
||||
id: 'newspaper-modern',
|
||||
name: 'Newspaper Modern',
|
||||
category: 'Editorial',
|
||||
description: 'Contemporary newspaper design balancing tradition with modern sensibilities. Clean grid-based layout.',
|
||||
vibe: 'Modern, Editorial, Informative',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "DM Serif Display", size: 36, color: "1A1A1A", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 200, line: 220 }
|
||||
},
|
||||
heading2: {
|
||||
font: "DM Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "DM Sans", size: 10, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 140, line: 280 }
|
||||
},
|
||||
accentColor: "DC2626"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
h1 { font-family: 'DM Serif Display', serif; font-size: 36pt; color: #1A1A1A; margin-bottom: 24px; }
|
||||
h2 { font-size: 12pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 12px; text-align: justify; }
|
||||
blockquote { font-size: 16pt; font-style: italic; font-family: 'DM Serif Display', serif; text-align: center; margin: 28px 20px; color: #DC2626; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const newspaperTabloid: StyleOption = {
|
||||
id: 'newspaper-tabloid',
|
||||
name: 'Newspaper Tabloid',
|
||||
category: 'Editorial',
|
||||
description: 'Sensationalist news design. Condensed, heavy headers with urgent red accents.',
|
||||
vibe: 'Urgent, Bold, Sensational',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Pathway+Extreme:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Antonio", size: 42, color: "FFFFFF", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 200 },
|
||||
shading: { fill: "D50000", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Antonio", size: 20, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 220 }
|
||||
},
|
||||
body: {
|
||||
font: "Pathway Extreme", size: 10, color: "111111", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Pathway Extreme', sans-serif;
|
||||
h1 { font-family: 'Antonio', sans-serif; font-size: 42pt; font-weight: 700; color: #FFFFFF; background: #D50000; padding: 12px 16px; margin-bottom: 24px; text-transform: uppercase; line-height: 1; }
|
||||
h2 { font-family: 'Antonio', sans-serif; font-size: 20pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
|
||||
p { font-size: 10pt; line-height: 1.5; color: #111111; margin-bottom: 14px; }
|
||||
blockquote { font-size: 14pt; font-weight: 700; font-style: italic; color: #000000; border-left: 6px solid #D50000; padding-left: 16px; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const nyEditor: StyleOption = {
|
||||
id: 'ny-editor',
|
||||
name: 'The Editorial',
|
||||
category: 'Editorial',
|
||||
description: 'High-contrast serifs, centered headers, delicate borders. Feels like a premium magazine feature.',
|
||||
vibe: 'Luxury, Fashion, Literature',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;1,400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 36, color: "111111", bold: true, italic: true, align: 'center',
|
||||
spacing: { before: 600, after: 400, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 14, color: "444444", bold: true, allCaps: true, tracking: 100, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "DDDDDD", space: 8, style: "single", size: 4 } }
|
||||
},
|
||||
body: {
|
||||
font: "Lora", size: 11, color: "333333", align: 'both',
|
||||
spacing: { before: 0, after: 200, line: 320 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lora', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 700; font-style: italic; text-align: center; margin-bottom: 30px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 14pt; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 40px; color: #444; }
|
||||
p { font-size: 11pt; line-height: 1.8; text-align: justify; margin-bottom: 20px; }
|
||||
blockquote { font-family: 'Playfair Display', serif; font-size: 18pt; font-style: italic; text-align: center; color: #555; margin: 40px 20px; border: none; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const rococoRomance: StyleOption = {
|
||||
id: 'rococo-romance',
|
||||
name: 'Rococo Romance',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by 18th-century Rococo. Light, playful, and intricate with pastel tones and swirling elegance.',
|
||||
vibe: 'Romantic, Ornate, Pastel',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Playfair+Display+SC:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Pinyon Script", size: 36, color: "D87093", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display SC", size: 14, color: "C0A080", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Playfair Display SC", size: 10, color: "555555", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 320 }
|
||||
},
|
||||
accentColor: "FFB6C1"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Playfair Display SC', serif;
|
||||
h1 { font-family: 'Pinyon Script', cursive; font-size: 36pt; color: #D87093; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #C0A080; text-align: center; margin-top: 36px; margin-bottom: 18px; letter-spacing: 2px; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #555555; margin-bottom: 16px; text-align: center; }
|
||||
blockquote { border: 1px solid #FFB6C1; padding: 20px; border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%; margin: 28px 40px; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const victorianOrnate: StyleOption = {
|
||||
id: 'victorian-ornate',
|
||||
name: 'Victorian Ornate',
|
||||
category: 'Classic',
|
||||
description: 'Inspired by the decorative exuberance of the Victorian era (1837-1901). Features rich typography with ornamental borders and jewel-tone accents.',
|
||||
vibe: 'Traditional, Formal, Heritage',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Crimson+Text:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 26, color: "2C1810", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
border: { bottom: { color: "8B4513", space: 8, style: "double", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "5D3A1A", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Crimson Text", size: 11, color: "3D2914", align: 'both',
|
||||
spacing: { before: 0, after: 160, line: 320 }
|
||||
},
|
||||
accentColor: "8B4513"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Crimson Text', serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 26pt; font-weight: 700; color: #2C1810; text-align: center; border-bottom: 4px double #8B4513; padding-bottom: 12px; margin-bottom: 24px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #5D3A1A; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 11pt; line-height: 1.8; color: #3D2914; margin-bottom: 14px; text-align: justify; }
|
||||
blockquote { background: #FDF5E6; padding: 20px; border: 1px solid #D4A574; color: #5D3A1A; margin: 24px 0; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const automotiveBold: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const constructionIndustrial: 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; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const electricVehicle: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { constructionIndustrial } from './construction-industrial';
|
||||
import { automotiveBold } from './automotive-bold';
|
||||
import { electricVehicle } from './electric-vehicle';
|
||||
import { tacticalMilitary } from './tactical-military';
|
||||
import { logisticsFreight } from './logistics-freight';
|
||||
import { industrialSafety } from './industrial-safety';
|
||||
import { nightVision } from './night-vision';
|
||||
|
||||
export const industrialStyles: StyleOption[] = [
|
||||
constructionIndustrial,
|
||||
automotiveBold,
|
||||
electricVehicle,
|
||||
tacticalMilitary,
|
||||
logisticsFreight,
|
||||
industrialSafety,
|
||||
nightVision
|
||||
];
|
||||
@@ -1,35 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const industrialSafety: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const logisticsFreight: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const nightVision: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const tacticalMilitary: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const aviationClassic: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const bistroChalkboard: StyleOption = {
|
||||
id: 'bistro-chalkboard',
|
||||
name: 'Bistro Chalkboard',
|
||||
category: 'Food',
|
||||
description: 'French cafe menu. White chalk text on slate black.',
|
||||
vibe: 'French, Food, Chalk',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Caveat:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Homemade Apple", size: 32, color: "FFFFFF", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 },
|
||||
shading: { fill: "212121", color: "auto", style: "clear" }
|
||||
},
|
||||
heading2: {
|
||||
font: "Caveat", size: 20, color: "E0E0E0", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Caveat", size: 14, color: "BDBDBD", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "263238", color: "auto", style: "clear" }
|
||||
},
|
||||
accentColor: "FFFFFF"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Caveat', cursive;
|
||||
background: #212121;
|
||||
color: #FFFFFF;
|
||||
h1 { font-family: 'Homemade Apple', cursive; font-size: 32pt; color: #FFFFFF; text-align: center; margin-bottom: 24px; border-bottom: 1px solid #757575; padding-bottom: 12px; }
|
||||
h2 { font-size: 20pt; font-weight: 700; color: #E0E0E0; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #BDBDBD; margin-bottom: 14px; text-align: center; }
|
||||
blockquote { border: 1px dashed #FFFFFF; padding: 16px; margin: 24px 0; font-style: italic; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const fineDiningMenu: StyleOption = {
|
||||
id: 'fine-dining-menu',
|
||||
name: 'Fine Dining Menu',
|
||||
category: 'Hospitality',
|
||||
description: 'High-end restaurant aesthetic. Elegant scripts, centered layouts, and luxurious gold tones.',
|
||||
vibe: 'Elegant, Expensive, Centered',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Great Vibes", size: 42, color: "C5A059", bold: false, align: 'center',
|
||||
spacing: { before: 500, after: 300, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Cormorant Garamond", size: 14, color: "212121", bold: true, align: 'center',
|
||||
spacing: { before: 360, after: 180, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Cormorant Garamond", size: 12, color: "424242", align: 'center',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "C5A059"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
background: #FFFAF0;
|
||||
h1 { font-family: 'Great Vibes', cursive; font-size: 42pt; color: #C5A059; text-align: center; margin-bottom: 30px; }
|
||||
h2 { font-size: 14pt; font-weight: 600; color: #212121; text-align: center; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; border-bottom: 1px solid #C5A059; display: inline-block; padding-bottom: 5px; }
|
||||
p { font-size: 12pt; line-height: 1.8; color: #424242; margin-bottom: 16px; text-align: center; font-style: italic; }
|
||||
blockquote { border: 1px solid #C5A059; padding: 24px; margin: 30px 60px; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const fireStation: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const foodRecipe: StyleOption = {
|
||||
id: 'food-recipe',
|
||||
name: 'Food & Recipe',
|
||||
category: 'Lifestyle',
|
||||
description: 'Warm and appetizing design for cookbooks and food content. Inviting typography with rustic charm.',
|
||||
vibe: 'Warm, Appetizing, Homestyle',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Playfair Display", size: 32, color: "6D4C41", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Playfair Display", size: 16, color: "8D6E63", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Lato", size: 10, color: "4E342E", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "D84315"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Lato', sans-serif;
|
||||
h1 { font-family: 'Playfair Display', serif; font-size: 32pt; font-weight: 600; color: #6D4C41; text-align: center; margin-bottom: 28px; }
|
||||
h2 { font-family: 'Playfair Display', serif; font-size: 16pt; color: #8D6E63; margin-top: 32px; margin-bottom: 16px; font-style: italic; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4E342E; margin-bottom: 14px; }
|
||||
blockquote { background: #FFF3E0; padding: 16px; border-left: 4px solid #D84315; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const germanAutobahn: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const hotelHospitality: StyleOption = {
|
||||
id: 'hotel-hospitality',
|
||||
name: 'Hotel Hospitality',
|
||||
category: 'Hospitality',
|
||||
description: 'Welcoming design for hotels and hospitality industry. Elegant yet approachable with warm sophistication.',
|
||||
vibe: 'Welcoming, Elegant, Warm',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Nunito+Sans:wght@300;400;600&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Tenor Sans", size: 28, color: "2C3E50", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Tenor Sans", size: 14, color: "8B7355", bold: false, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Nunito Sans", size: 10, color: "4A4A4A", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "8B7355"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
h1 { font-family: 'Tenor Sans', sans-serif; font-size: 28pt; color: #2C3E50; text-align: center; margin-bottom: 28px; letter-spacing: 2px; }
|
||||
h2 { font-family: 'Tenor Sans', sans-serif; font-size: 14pt; color: #8B7355; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 10pt; line-height: 1.6; color: #4A4A4A; margin-bottom: 14px; font-weight: 300; }
|
||||
blockquote { background: #F9F6F1; padding: 20px; border-left: 4px solid #8B7355; margin: 24px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
import { aviationClassic } from './aviation-classic';
|
||||
import { bistroChalkboard } from './bistro-chalkboard';
|
||||
import { fineDiningMenu } from './fine-dining-menu';
|
||||
import { fireStation } from './fire-station';
|
||||
import { foodRecipe } from './food-recipe';
|
||||
import { germanAutobahn } from './german-autobahn';
|
||||
import { hotelHospitality } from './hotel-hospitality';
|
||||
import { parisianChic } from './parisian-chic';
|
||||
import { realEstatePremium } from './real-estate-premium';
|
||||
import { recipeCard } from './recipe-card';
|
||||
import { retroDiner50s } from './retro-diner-50s';
|
||||
import { spaWellness } from './spa-wellness';
|
||||
import { stickyNote } from './sticky-note';
|
||||
import { supermarketReceipt } from './supermarket-receipt';
|
||||
import { surfShop } from './surf-shop';
|
||||
import { travelAdventure } from './travel-adventure';
|
||||
import { weddingElegant } from './wedding-elegant';
|
||||
import { winterHoliday } from './winter-holiday';
|
||||
|
||||
export const lifestyleStyles: StyleOption[] = [
|
||||
aviationClassic,
|
||||
bistroChalkboard,
|
||||
fineDiningMenu,
|
||||
fireStation,
|
||||
foodRecipe,
|
||||
germanAutobahn,
|
||||
hotelHospitality,
|
||||
parisianChic,
|
||||
realEstatePremium,
|
||||
recipeCard,
|
||||
retroDiner50s,
|
||||
spaWellness,
|
||||
stickyNote,
|
||||
supermarketReceipt,
|
||||
surfShop,
|
||||
travelAdventure,
|
||||
weddingElegant,
|
||||
winterHoliday
|
||||
];
|
||||
@@ -1,33 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const parisianChic: StyleOption = {
|
||||
id: 'parisian-chic',
|
||||
name: 'Parisian Chic',
|
||||
category: 'Fashion',
|
||||
description: 'Sophisticated French aesthetics. Elegant high-contrast serifs with plenty of white space.',
|
||||
vibe: 'Sophisticated, Chic, Minimal',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Jost:wght@300;400&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Bodoni Moda", size: 36, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 400, after: 240, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Bodoni Moda", size: 16, color: "333333", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 },
|
||||
italic: true
|
||||
},
|
||||
body: {
|
||||
font: "Jost", size: 10, color: "1A1A1A", align: 'center',
|
||||
spacing: { before: 0, after: 160, line: 300 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Jost', sans-serif;
|
||||
h1 { font-family: 'Bodoni Moda', serif; font-size: 36pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Bodoni Moda', serif; font-size: 16pt; font-weight: 700; color: #333333; text-align: center; margin-top: 36px; margin-bottom: 18px; font-style: italic; }
|
||||
p { font-size: 10pt; line-height: 1.8; color: #1A1A1A; margin-bottom: 16px; text-align: center; font-weight: 300; }
|
||||
blockquote { border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding: 24px; margin: 32px 40px; text-align: center; font-family: 'Bodoni Moda', serif; font-style: italic; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const realEstatePremium: StyleOption = {
|
||||
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; }
|
||||
`
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const recipeCard: StyleOption = {
|
||||
id: 'recipe-card',
|
||||
name: 'Recipe Card',
|
||||
category: 'Home',
|
||||
description: 'Grandmas index card. Typewriter fonts with red header lines.',
|
||||
vibe: 'Homey, Traditional, Cookery',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime&family=Homemade+Apple&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Courier Prime", size: 24, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 360, after: 200, line: 240 },
|
||||
border: { bottom: { color: "F44336", space: 4, style: "single", size: 12 } }
|
||||
},
|
||||
heading2: {
|
||||
font: "Courier Prime", size: 14, color: "000000", bold: true, align: 'left',
|
||||
spacing: { before: 280, after: 140, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
body: {
|
||||
font: "Courier Prime", size: 11, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "F44336"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Courier Prime', monospace;
|
||||
background: #FFF;
|
||||
border: 1px solid #E0E0E0;
|
||||
padding: 20px;
|
||||
h1 { font-size: 24pt; font-weight: 700; color: #000000; border-bottom: 2px solid #F44336; padding-bottom: 8px; margin-bottom: 20px; }
|
||||
h2 { font-size: 14pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; text-transform: uppercase; }
|
||||
p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 12px; }
|
||||
blockquote { font-family: 'Homemade Apple', cursive; color: #D32F2F; font-size: 14pt; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const retroDiner-50s: StyleOption = {
|
||||
id: 'retro-diner-50s',
|
||||
name: 'Retro Diner 50s',
|
||||
category: 'Food',
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const spaWellness: StyleOption = {
|
||||
id: 'spa-wellness',
|
||||
name: 'Spa Wellness',
|
||||
category: 'Wellness',
|
||||
description: 'Serene design for spa and wellness industries. Calm typography with soothing, natural colors.',
|
||||
vibe: 'Serene, Calming, Natural',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Questrial&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Philosopher", size: 28, color: "4A6741", bold: false, align: 'center',
|
||||
spacing: { before: 480, after: 280, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Philosopher", size: 14, color: "6B8E63", bold: false, align: 'left',
|
||||
spacing: { before: 360, after: 180, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Questrial", size: 10, color: "5D6D5A", align: 'left',
|
||||
spacing: { before: 0, after: 180, line: 300 }
|
||||
},
|
||||
accentColor: "6B8E63"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Questrial', sans-serif;
|
||||
h1 { font-family: 'Philosopher', serif; font-size: 28pt; color: #4A6741; text-align: center; margin-bottom: 32px; }
|
||||
h2 { font-family: 'Philosopher', serif; font-size: 14pt; color: #6B8E63; margin-top: 36px; margin-bottom: 18px; }
|
||||
p { font-size: 10pt; line-height: 1.7; color: #5D6D5A; margin-bottom: 16px; }
|
||||
blockquote { background: #F1F8E9; padding: 20px; border-radius: 4px; margin: 28px 0; text-align: center; }
|
||||
`
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const stickyNote: StyleOption = {
|
||||
id: 'sticky-note',
|
||||
name: 'Sticky Note',
|
||||
category: 'Casual',
|
||||
description: 'Handwritten reminder aesthetic. Marker fonts on a canary yellow background.',
|
||||
vibe: 'Casual, Handwritten, Yellow',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 32, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Kalam", size: 18, color: "D50000", bold: true, align: 'left',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Kalam", size: 14, color: "212121", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 },
|
||||
shading: { fill: "FFF9C4", color: "auto", style: "clear" } // Yellow paper
|
||||
},
|
||||
accentColor: "D50000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kalam', cursive;
|
||||
background: #FFF9C4;
|
||||
padding: 30px;
|
||||
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
|
||||
h1 { font-family: 'Permanent Marker', cursive; font-size: 32pt; color: #000000; text-align: center; margin-bottom: 24px; transform: rotate(-1deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #D50000; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 14pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
|
||||
blockquote { border-left: 4px solid #D50000; padding-left: 12px; margin: 20px 0; }
|
||||
`
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const supermarketReceipt: StyleOption = {
|
||||
id: 'supermarket-receipt',
|
||||
name: 'Supermarket Receipt',
|
||||
category: 'Everyday',
|
||||
description: 'Thermal paper aesthetic. Monospaced, slightly faded grey text with narrow alignment.',
|
||||
vibe: 'Disposable, Monospace, Grey',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inconsolata:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Fira Mono", size: 24, color: "000000", bold: true, align: 'center',
|
||||
spacing: { before: 300, after: 200, line: 240 },
|
||||
allCaps: true
|
||||
},
|
||||
heading2: {
|
||||
font: "Inconsolata", size: 14, color: "000000", bold: false, align: 'center',
|
||||
spacing: { before: 240, after: 120, line: 240 },
|
||||
border: { bottom: { color: "000000", space: 4, style: "dashed", size: 12 } }
|
||||
},
|
||||
body: {
|
||||
font: "Inconsolata", size: 11, color: "424242", align: 'left', // Dark grey for thermal look
|
||||
spacing: { before: 0, after: 120, line: 240 }
|
||||
},
|
||||
accentColor: "000000"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Inconsolata', monospace;
|
||||
background: #FAFAFA;
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
h1 { font-family: 'Fira Mono', monospace; font-size: 24pt; font-weight: 700; color: #000000; text-align: center; margin-bottom: 20px; text-transform: uppercase; }
|
||||
h2 { font-size: 14pt; font-weight: 400; color: #000000; text-align: center; margin-top: 24px; margin-bottom: 12px; border-bottom: 1px dashed #000; padding-bottom: 5px; }
|
||||
p { font-size: 11pt; line-height: 1.4; color: #424242; margin-bottom: 10px; }
|
||||
blockquote { text-align: center; margin: 20px 0; font-weight: 700; }
|
||||
`
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { StyleOption } from '../../../types';
|
||||
|
||||
export const surfShop: StyleOption = {
|
||||
id: 'surf-shop',
|
||||
name: 'Surf Shop',
|
||||
category: 'Lifestyle',
|
||||
description: 'California cool. Relaxed hand-drawn fonts with sea foam blues and sunny yellows.',
|
||||
vibe: 'Relaxed, Beach, Sunny',
|
||||
googleFontsImport: 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&display=swap',
|
||||
wordConfig: {
|
||||
heading1: {
|
||||
font: "Permanent Marker", size: 36, color: "0097A7", bold: false, align: 'center',
|
||||
spacing: { before: 400, after: 200, line: 240 }
|
||||
},
|
||||
heading2: {
|
||||
font: "Kalam", size: 18, color: "FBC02D", bold: true, align: 'center',
|
||||
spacing: { before: 320, after: 160, line: 240 }
|
||||
},
|
||||
body: {
|
||||
font: "Kalam", size: 12, color: "424242", align: 'left',
|
||||
spacing: { before: 0, after: 160, line: 280 }
|
||||
},
|
||||
accentColor: "0097A7"
|
||||
},
|
||||
previewCss: `
|
||||
font-family: 'Kalam', cursive;
|
||||
h1 { font-family: 'Permanent Marker', cursive; font-size: 36pt; color: #0097A7; text-align: center; margin-bottom: 24px; transform: rotate(-1deg); }
|
||||
h2 { font-size: 18pt; font-weight: 700; color: #FBC02D; text-align: center; margin-top: 32px; margin-bottom: 16px; }
|
||||
p { font-size: 12pt; line-height: 1.6; color: #424242; margin-bottom: 14px; }
|
||||
blockquote { background: #E0F7FA; border-radius: 16px; padding: 20px; margin: 24px 0; border: 2px solid #0097A7; }
|
||||
`
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user