export type DesignTemplateCategory =
| "ad"
| "one-pager"
| "landing-page"
| "social"
| "presentation"
| "other";
export interface DesignTemplatePreset {
id: string;
title: string;
description: string;
category: DesignTemplateCategory;
width: number;
height: number;
filename: string;
content: string;
}
interface PresetCopy {
eyebrow: string;
headline: string;
body: string;
cta: string;
metric: string;
metricLabel: string;
}
function presetHtml({
title,
width,
height,
copy,
layout,
}: {
title: string;
width: number;
height: number;
copy: PresetCopy;
layout: "square" | "wide" | "page" | "landing";
}): string {
const isPage = layout === "page" || layout === "landing";
return `
${title}
Northstar
${copy.eyebrow}
${copy.headline}
${copy.body}
`;
}
export const DESIGN_TEMPLATE_PRESETS: DesignTemplatePreset[] = [
{
id: "preset-social-square",
title: "Social ad — square",
description:
"A 1080 × 1080 campaign unit with locked brand and background layers.",
category: "social",
width: 1080,
height: 1080,
filename: "social-square.html",
content: presetHtml({
title: "Social ad — square",
width: 1080,
height: 1080,
layout: "square",
copy: {
eyebrow: "New release",
headline: "Make the work feel lighter.",
body: "A flexible campaign canvas for bold product stories, offers, and launches.",
cta: "Start free",
metric: "2.4×",
metricLabel: "faster setup",
},
}),
},
{
id: "preset-display-ad",
title: "Display ad — landscape",
description:
"A 1200 × 628 ad unit with a fixed brand signature and editable offer.",
category: "ad",
width: 1200,
height: 628,
filename: "display-ad.html",
content: presetHtml({
title: "Display ad — landscape",
width: 1200,
height: 628,
layout: "wide",
copy: {
eyebrow: "Built for momentum",
headline: "Your next launch starts here.",
body: "Swap the message and offer while the delivery format stays exactly on spec.",
cta: "See what’s new",
metric: "40%",
metricLabel: "more reach",
},
}),
},
{
id: "preset-one-pager",
title: "Product one-pager",
description:
"An 816 × 1056 letter-format brief for launches, sales, and handouts.",
category: "one-pager",
width: 816,
height: 1056,
filename: "product-one-pager.html",
content: presetHtml({
title: "Product one-pager",
width: 816,
height: 1056,
layout: "page",
copy: {
eyebrow: "Product brief / 01",
headline: "One clear page. One strong idea.",
body: "Turn a complex product story into a focused narrative with room for proof, positioning, and a next step.",
cta: "Book a demo",
metric: "8.5 × 11",
metricLabel: "print ready",
},
}),
},
{
id: "preset-landing-page",
title: "Launch landing page",
description:
"A 1440 × 1024 responsive hero starter with a protected brand frame.",
category: "landing-page",
width: 1440,
height: 1024,
filename: "launch-landing-page.html",
content: presetHtml({
title: "Launch landing page",
width: 1440,
height: 1024,
layout: "landing",
copy: {
eyebrow: "Introducing Northstar",
headline: "A launch page with somewhere to go.",
body: "Start with the right proportions, hierarchy, and locked brand anchors—then prompt the rest into place.",
cta: "Explore the product",
metric: "1440px",
metricLabel: "desktop canvas",
},
}),
},
];
export function getDesignTemplatePreset(
id: string,
): DesignTemplatePreset | undefined {
return DESIGN_TEMPLATE_PRESETS.find((preset) => preset.id === id);
}