@forgespace/branding-mcp 0.4.0

package/src/lib/branding-core/generators/color-palette.ts

@@ -0,0 +1,147 @@
+import type {
+  ColorHarmony,
+  ColorPalette,
+  ColorSwatch,
+  ColorTheme,
+  ContrastResult,
+  HslColor,
+} from '../../types.js';
+
+const HARMONY_ANGLES: Record<ColorHarmony, number[]> = {
+  complementary: [180],
+  analogous: [-30, 30],
+  triadic: [120, 240],
+  'split-complementary': [150, 210],
+  tetradic: [90, 180, 270],
+  monochromatic: [0, 0],
+};
+
+function hslToHex(h: number, s: number, l: number): string {
+  const hNorm = ((h % 360) + 360) % 360;
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  const a = sNorm * Math.min(lNorm, 1 - lNorm);
+  const f = (n: number): string => {
+    const k = (n + hNorm / 30) % 12;
+    const color = lNorm - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+function hexToHsl(hex: string): HslColor {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return { h: 0, s: 0, l: 0 };
+  const r = parseInt(result[1], 16) / 255;
+  const g = parseInt(result[2], 16) / 255;
+  const b = parseInt(result[3], 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+function relativeLuminance(hex: string): number {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return 0;
+  const channels = [result[1], result[2], result[3]].map((c) => {
+    const v = parseInt(c, 16) / 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+}
+
+export function checkContrast(fg: string, bg: string): ContrastResult {
+  const l1 = relativeLuminance(fg);
+  const l2 = relativeLuminance(bg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  const ratio = (lighter + 0.05) / (darker + 0.05);
+  return {
+    ratio: Math.round(ratio * 100) / 100,
+    aa: ratio >= 4.5,
+    aaLarge: ratio >= 3,
+    aaa: ratio >= 7,
+    aaaLarge: ratio >= 4.5,
+  };
+}
+
+function generateNeutrals(baseHue: number, theme: ColorTheme): ColorSwatch[] {
+  const steps = [95, 90, 80, 60, 40, 20, 10, 5];
+  if (theme === 'dark') steps.reverse();
+  return steps.map((l, i) => ({
+    name: `neutral-${(i + 1) * 100}`,
+    hex: hslToHex(baseHue, 5, l),
+    hsl: { h: baseHue, s: 5, l },
+    usage: `Neutral shade ${i + 1}`,
+  }));
+}
+
+function makeSwatch(name: string, h: number, s: number, l: number, usage: string): ColorSwatch {
+  return {
+    name,
+    hex: hslToHex(h, s, l),
+    hsl: { h: ((h % 360) + 360) % 360, s, l },
+    usage,
+  };
+}
+
+export function generateColorPalette(
+  baseColor?: string,
+  harmony: ColorHarmony = 'complementary',
+  theme: ColorTheme = 'both'
+): ColorPalette {
+  const base = baseColor ? hexToHsl(baseColor) : { h: 250, s: 65, l: 50 };
+  const angles = HARMONY_ANGLES[harmony];
+
+  const primary = makeSwatch('primary', base.h, base.s, base.l, 'Primary brand color');
+  const secondary = makeSwatch(
+    'secondary',
+    base.h + (angles[0] ?? 180),
+    base.s - 10,
+    base.l + 5,
+    'Secondary brand color'
+  );
+  const accent = makeSwatch(
+    'accent',
+    base.h + (angles[1] ?? angles[0] ?? 120),
+    Math.min(base.s + 15, 100),
+    base.l,
+    'Accent and highlight color'
+  );
+
+  const neutrals = generateNeutrals(base.h, theme);
+
+  const semantic = {
+    success: makeSwatch('success', 142, 70, 45, 'Success states'),
+    warning: makeSwatch('warning', 38, 92, 50, 'Warning states'),
+    error: makeSwatch('error', 0, 84, 60, 'Error states'),
+    info: makeSwatch('info', 210, 79, 56, 'Informational states'),
+  };
+
+  const white = '#ffffff';
+  const dark = '#1a1a1a';
+  const contrast: Record<string, ContrastResult> = {
+    'primary-on-white': checkContrast(primary.hex, white),
+    'primary-on-dark': checkContrast(primary.hex, dark),
+    'secondary-on-white': checkContrast(secondary.hex, white),
+    'accent-on-white': checkContrast(accent.hex, white),
+  };
+
+  return { primary, secondary, accent, neutral: neutrals, semantic, contrast };
+}
+
+export { hslToHex, hexToHsl };

package/src/lib/branding-core/generators/favicon-generator.ts

@@ -0,0 +1,33 @@
+import type { FaviconSet, FaviconSize } from '../../types.js';
+
+function rescaleSvg(iconSvg: string, size: FaviconSize, brandColor: string): string {
+  const strokeScale = size <= 32 ? 2 : 1;
+  let svg = iconSvg
+    .replace(/width="[^"]*"/, `width="${size}"`)
+    .replace(/height="[^"]*"/, `height="${size}"`)
+    .replace(/viewBox="[^"]*"/, `viewBox="0 0 64 64"`);
+
+  if (strokeScale > 1) {
+    svg = svg.replace(
+      /stroke-width="(\d+)"/g,
+      (_, w) => `stroke-width="${Number(w) * strokeScale}"`
+    );
+  }
+
+  if (!svg.includes('fill=') && !svg.includes('<circle')) {
+    svg = svg.replace('<svg ', `<svg style="color:${brandColor}" `);
+  }
+
+  return svg;
+}
+
+export function generateFavicons(iconSvg: string, brandColor: string): FaviconSet {
+  const sizes: FaviconSize[] = [16, 32, 180, 512];
+  const result = {} as Record<FaviconSize, string>;
+
+  for (const size of sizes) {
+    result[size] = rescaleSvg(iconSvg, size, brandColor);
+  }
+
+  return { sizes: result };
+}

package/src/lib/branding-core/generators/gradient-system.ts

@@ -0,0 +1,120 @@
+import type {
+  BrandStyle,
+  ColorPalette,
+  Gradient,
+  GradientPresetName,
+  GradientStop,
+  GradientSystem,
+  GradientType,
+  HslColor,
+} from '../../types.js';
+import { hexToHsl, hslToHex } from './color-palette.js';
+
+interface StyleGradientConfig {
+  type: GradientType;
+  angle: number;
+  stops: number;
+  lightnessVariance: number;
+}
+
+const STYLE_GRADIENT_CONFIG: Record<BrandStyle, StyleGradientConfig> = {
+  minimal: { type: 'linear', angle: 180, stops: 2, lightnessVariance: 5 },
+  bold: { type: 'linear', angle: 45, stops: 3, lightnessVariance: 25 },
+  elegant: { type: 'linear', angle: 135, stops: 2, lightnessVariance: 10 },
+  playful: { type: 'conic', angle: 0, stops: 3, lightnessVariance: 20 },
+  corporate: { type: 'linear', angle: 180, stops: 2, lightnessVariance: 8 },
+  tech: { type: 'linear', angle: 315, stops: 2, lightnessVariance: 15 },
+  organic: { type: 'radial', angle: 0, stops: 3, lightnessVariance: 12 },
+  retro: { type: 'linear', angle: 90, stops: 3, lightnessVariance: 18 },
+};
+
+function shiftLightness(hsl: HslColor, amount: number): string {
+  const l = Math.max(0, Math.min(100, hsl.l + amount));
+  return hslToHex(hsl.h, hsl.s, l);
+}
+
+function buildStops(
+  baseHex: string,
+  endHex: string,
+  count: number,
+  variance: number
+): GradientStop[] {
+  const baseHsl = hexToHsl(baseHex);
+  const endHsl = hexToHsl(endHex);
+  if (count === 2) {
+    return [
+      { color: baseHex, position: 0 },
+      { color: endHex, position: 100 },
+    ];
+  }
+  const midHex = shiftLightness(
+    { h: (baseHsl.h + endHsl.h) / 2, s: baseHsl.s, l: baseHsl.l },
+    variance / 2
+  );
+  return [
+    { color: baseHex, position: 0 },
+    { color: midHex, position: 50 },
+    { color: endHex, position: 100 },
+  ];
+}
+
+function toCssValue(type: GradientType, angle: number, stops: GradientStop[]): string {
+  const stopStr = stops.map((s) => `${s.color} ${s.position}%`).join(', ');
+  if (type === 'radial') return `radial-gradient(circle, ${stopStr})`;
+  if (type === 'conic') return `conic-gradient(from ${angle}deg, ${stopStr})`;
+  return `linear-gradient(${angle}deg, ${stopStr})`;
+}
+
+function createGradient(type: GradientType, angle: number, stops: GradientStop[]): Gradient {
+  return {
+    type,
+    angle: type !== 'radial' ? angle : undefined,
+    stops,
+    cssValue: toCssValue(type, angle, stops),
+  };
+}
+
+function buildPreset(
+  name: GradientPresetName,
+  colors: ColorPalette,
+  config: StyleGradientConfig
+): Gradient {
+  const { type, angle, stops: count, lightnessVariance } = config;
+  const primary = colors.primary.hex;
+  const secondary = colors.secondary.hex;
+  const accent = colors.accent.hex;
+  const neutralLight = colors.neutral[0]?.hex ?? '#f5f5f5';
+  const neutralDark = colors.neutral[colors.neutral.length - 1]?.hex ?? '#1a1a1a';
+
+  const presetMap: Record<GradientPresetName, () => GradientStop[]> = {
+    hero: () => buildStops(primary, secondary, count, lightnessVariance),
+    button: () => buildStops(accent, primary, count, lightnessVariance),
+    card: () =>
+      buildStops(
+        neutralLight,
+        shiftLightness(hexToHsl(neutralLight), -lightnessVariance),
+        2,
+        lightnessVariance
+      ),
+    text: () => buildStops(primary, accent, count, lightnessVariance),
+    background: () => buildStops(neutralLight, neutralDark, 2, lightnessVariance),
+  };
+
+  const stops = presetMap[name]();
+  return createGradient(type, angle, stops);
+}
+
+export function generateGradientSystem(
+  colors: ColorPalette,
+  style: BrandStyle = 'minimal'
+): GradientSystem {
+  const config = STYLE_GRADIENT_CONFIG[style];
+  const presetNames: GradientPresetName[] = ['hero', 'button', 'card', 'text', 'background'];
+
+  const presets = {} as Record<GradientPresetName, Gradient>;
+  for (const name of presetNames) {
+    presets[name] = buildPreset(name, colors, config);
+  }
+
+  return { presets };
+}

package/src/lib/branding-core/generators/logo-generator.ts

@@ -0,0 +1,152 @@
+import type { BrandStyle, LogoConfig, LogoOutput } from '../../types.js';
+
+export function defaultLogoConfig(brandName: string, primaryColor: string): LogoConfig {
+  return {
+    text: brandName,
+    font: 'Inter',
+    fontSize: 48,
+    color: primaryColor,
+    backgroundColor: 'transparent',
+    width: 400,
+    height: 120,
+  };
+}
+
+function generateWordmark(config: LogoConfig): string {
+  const { text, font, fontSize, color, backgroundColor, width, height } = config;
+  const initial = text.charAt(0).toUpperCase();
+  const circleR = height * 0.35;
+  const circleX = circleR + 20;
+  const circleY = height / 2;
+  const textX = circleX + circleR + 16;
+  const textY = height / 2;
+  const fontFamily = `'${font}', sans-serif`;
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120" viewBox="0 0 400 120">`,
+    backgroundColor !== 'transparent'
+      ? `  <rect width="${width}" height="${height}" fill="${backgroundColor}" rx="8"/>`
+      : '',
+    `  <circle cx="${circleX}" cy="${circleY}" r="${circleR}" fill="${color}"/>`,
+    `  <text x="${circleX}" y="${circleY}" fill="white" font-size="${fontSize * 0.7}" font-family="${fontFamily}" font-weight="700" text-anchor="middle" dominant-baseline="central">${initial}</text>`,
+    `  <text x="${textX}" y="${textY}" fill="${color}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="600" dominant-baseline="central">${text}</text>`,
+    '</svg>',
+  ]
+    .filter(Boolean)
+    .join('\n');
+}
+
+const MONOGRAM_SHAPES: Record<BrandStyle, string> = {
+  minimal: 'roundedSquare',
+  bold: 'hexagon',
+  elegant: 'thinCircle',
+  playful: 'blob',
+  corporate: 'rectangle',
+  tech: 'diamond',
+  organic: 'ellipse',
+  retro: 'octagon',
+};
+
+function monogramContainer(style: BrandStyle, color: string): string {
+  const shape = MONOGRAM_SHAPES[style] ?? 'thinCircle';
+  const containers: Record<string, string> = {
+    roundedSquare: `<rect x="10" y="10" width="100" height="100" rx="16" fill="${color}"/>`,
+    hexagon: `<polygon points="60,5 110,30 110,90 60,115 10,90 10,30" fill="${color}"/>`,
+    thinCircle: `<circle cx="60" cy="60" r="50" fill="none" stroke="${color}" stroke-width="3"/>`,
+    blob: `<ellipse cx="60" cy="60" rx="52" ry="48" fill="${color}"/>`,
+    rectangle: `<rect x="10" y="15" width="100" height="90" rx="4" fill="${color}"/>`,
+    diamond: `<polygon points="60,5 115,60 60,115 5,60" fill="${color}"/>`,
+    ellipse: `<ellipse cx="60" cy="60" rx="55" ry="45" fill="${color}"/>`,
+    octagon: `<polygon points="35,5 85,5 115,35 115,85 85,115 35,115 5,85 5,35" fill="${color}"/>`,
+  };
+  return containers[shape] ?? containers.thinCircle;
+}
+
+function generateMonogram(config: LogoConfig): string {
+  const { text, font, color } = config;
+  const initial = text.charAt(0).toUpperCase();
+  const style = config.style ?? 'minimal';
+  const fontFamily = `'${font}', sans-serif`;
+  const isThinCircle = MONOGRAM_SHAPES[style] === 'thinCircle';
+  const textColor = isThinCircle ? color : 'white';
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">`,
+    `  ${monogramContainer(style, color)}`,
+    `  <text x="60" y="60" fill="${textColor}" font-size="56" font-family="${fontFamily}" font-weight="700" text-anchor="middle" dominant-baseline="central">${initial}</text>`,
+    '</svg>',
+  ].join('\n');
+}
+
+const ABSTRACT_BUILDERS: Record<BrandStyle, (c: string) => string> = {
+  minimal: (c) =>
+    `  <circle cx="40" cy="60" r="30" fill="${c}" opacity="0.8"/>` +
+    `\n  <circle cx="60" cy="40" r="30" fill="${c}" opacity="0.5"/>` +
+    `\n  <circle cx="80" cy="60" r="30" fill="${c}" opacity="0.3"/>`,
+  bold: (c) =>
+    `  <rect x="10" y="10" width="50" height="50" fill="${c}" opacity="0.9"/>` +
+    `\n  <rect x="40" y="40" width="50" height="50" fill="${c}" opacity="0.6"/>` +
+    `\n  <rect x="60" y="20" width="40" height="40" fill="${c}" opacity="0.3"/>`,
+  elegant: (c) =>
+    `  <path d="M60,10 A50,50 0 0,1 110,60" fill="none" stroke="${c}" stroke-width="2"/>` +
+    `\n  <path d="M60,25 A35,35 0 0,1 95,60" fill="none" stroke="${c}" stroke-width="2"/>` +
+    `\n  <path d="M60,40 A20,20 0 0,1 80,60" fill="none" stroke="${c}" stroke-width="2"/>`,
+  playful: (c) =>
+    `  <circle cx="30" cy="40" r="8" fill="${c}"/>` +
+    `\n  <circle cx="60" cy="25" r="12" fill="${c}" opacity="0.7"/>` +
+    `\n  <circle cx="90" cy="50" r="10" fill="${c}" opacity="0.5"/>` +
+    `\n  <circle cx="50" cy="80" r="14" fill="${c}" opacity="0.6"/>`,
+  corporate: (c) =>
+    `  <rect x="10" y="10" width="30" height="100" fill="${c}" opacity="0.3"/>` +
+    `\n  <rect x="45" y="10" width="30" height="100" fill="${c}" opacity="0.5"/>` +
+    `\n  <rect x="80" y="10" width="30" height="100" fill="${c}" opacity="0.7"/>`,
+  tech: (c) =>
+    `  <line x1="10" y1="60" x2="50" y2="30" stroke="${c}" stroke-width="2"/>` +
+    `\n  <line x1="50" y1="30" x2="90" y2="50" stroke="${c}" stroke-width="2"/>` +
+    `\n  <line x1="90" y1="50" x2="110" y2="20" stroke="${c}" stroke-width="2"/>` +
+    `\n  <circle cx="50" cy="30" r="4" fill="${c}"/>` +
+    `\n  <circle cx="90" cy="50" r="4" fill="${c}"/>`,
+  organic: (c) =>
+    `  <path d="M10,60 Q30,20 60,60 Q90,100 110,60" fill="none" stroke="${c}" stroke-width="3"/>` +
+    `\n  <path d="M10,80 Q30,40 60,80 Q90,120 110,80" fill="none" stroke="${c}" stroke-width="2" opacity="0.5"/>`,
+  retro: (c) =>
+    `  <polygon points="60,10 75,35 110,35 82,55 93,85 60,67 27,85 38,55 10,35 45,35" fill="${c}"/>` +
+    `\n  <polygon points="60,25 70,42 90,42 74,53 80,70 60,60 40,70 46,53 30,42 50,42" fill="white" opacity="0.3"/>`,
+};
+
+function generateAbstract(config: LogoConfig): string {
+  const { color } = config;
+  const style = config.style ?? 'minimal';
+  const builder = ABSTRACT_BUILDERS[style] ?? ABSTRACT_BUILDERS.minimal;
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">`,
+    builder(color),
+    '</svg>',
+  ].join('\n');
+}
+
+function generateIcon(config: LogoConfig): string {
+  const { text, font, color } = config;
+  const initial = text.charAt(0).toUpperCase();
+  const fontFamily = `'${font}', sans-serif`;
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">`,
+    `  <circle cx="32" cy="32" r="28" fill="${color}"/>`,
+    `  <text x="32" y="32" fill="white" font-size="32" font-family="${fontFamily}" font-weight="700" text-anchor="middle" dominant-baseline="central">${initial}</text>`,
+    '</svg>',
+  ].join('\n');
+}
+
+export function generateSvgLogo(config: LogoConfig): LogoOutput {
+  const wordmark = generateWordmark(config);
+  const monogram = generateMonogram(config);
+  const abstract = generateAbstract(config);
+  const icon = generateIcon(config);
+
+  return {
+    svg: wordmark,
+    variants: { wordmark, monogram, abstract, icon },
+  };
+}

package/src/lib/branding-core/generators/motion-system.ts

@@ -0,0 +1,98 @@
+import type { BrandStyle, DurationName, EasingName, MotionSystem } from '../../types.js';
+
+const STYLE_DURATIONS: Record<BrandStyle, Record<DurationName, number>> = {
+  minimal: { instant: 0, fast: 100, normal: 200, slow: 300, slower: 400 },
+  bold: { instant: 0, fast: 100, normal: 200, slow: 300, slower: 450 },
+  elegant: { instant: 0, fast: 200, normal: 350, slow: 500, slower: 700 },
+  playful: { instant: 0, fast: 150, normal: 250, slow: 400, slower: 600 },
+  corporate: { instant: 0, fast: 120, normal: 200, slow: 300, slower: 400 },
+  tech: { instant: 0, fast: 80, normal: 150, slow: 250, slower: 350 },
+  organic: { instant: 0, fast: 180, normal: 300, slow: 450, slower: 650 },
+  retro: { instant: 0, fast: 150, normal: 250, slow: 350, slower: 500 },
+};
+
+const STYLE_EASINGS: Record<BrandStyle, Record<EasingName, string>> = {
+  minimal: {
+    'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    bounce: 'cubic-bezier(0.34, 1.2, 0.64, 1)',
+  },
+  bold: {
+    'ease-in': 'cubic-bezier(0.5, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.15, 1)',
+    'ease-in-out': 'cubic-bezier(0.5, 0, 0.15, 1)',
+    spring: 'cubic-bezier(0.22, 1.8, 0.36, 1)',
+    bounce: 'cubic-bezier(0.22, 1.5, 0.36, 1)',
+  },
+  elegant: {
+    'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
+    'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)',
+    spring: 'cubic-bezier(0.25, 1.2, 0.5, 1)',
+    bounce: 'cubic-bezier(0.25, 1.1, 0.5, 1)',
+  },
+  playful: {
+    'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    spring: 'cubic-bezier(0.18, 2.0, 0.4, 1)',
+    bounce: 'cubic-bezier(0.18, 1.8, 0.4, 1)',
+  },
+  corporate: {
+    'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    spring: 'cubic-bezier(0.3, 1.3, 0.6, 1)',
+    bounce: 'cubic-bezier(0.3, 1.15, 0.6, 1)',
+  },
+  tech: {
+    'ease-in': 'cubic-bezier(0.55, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.1, 1)',
+    'ease-in-out': 'cubic-bezier(0.55, 0, 0.1, 1)',
+    spring: 'cubic-bezier(0.2, 1.6, 0.4, 1)',
+    bounce: 'cubic-bezier(0.2, 1.4, 0.4, 1)',
+  },
+  organic: {
+    'ease-in': 'cubic-bezier(0.35, 0, 0.9, 1)',
+    'ease-out': 'cubic-bezier(0.1, 0, 0.3, 1)',
+    'ease-in-out': 'cubic-bezier(0.35, 0, 0.3, 1)',
+    spring: 'cubic-bezier(0.28, 1.4, 0.5, 1)',
+    bounce: 'cubic-bezier(0.28, 1.25, 0.5, 1)',
+  },
+  retro: {
+    'ease-in': 'cubic-bezier(0.5, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.3, 1)',
+    'ease-in-out': 'cubic-bezier(0.5, 0, 0.3, 1)',
+    spring: 'cubic-bezier(0.3, 1.5, 0.5, 1)',
+    bounce: 'cubic-bezier(0.3, 1.3, 0.5, 1)',
+  },
+};
+
+function buildTransitions(
+  durations: Record<DurationName, number>,
+  defaultEasing: string
+): Record<string, string> {
+  return {
+    fade: `opacity ${durations.normal}ms ${defaultEasing}`,
+    slide: `transform ${durations.normal}ms ${defaultEasing}`,
+    scale: `transform ${durations.fast}ms ${defaultEasing}`,
+    color: `color ${durations.slow}ms ${defaultEasing}, background-color ${durations.slow}ms ${defaultEasing}`,
+    all: `all ${durations.normal}ms ${defaultEasing}`,
+  };
+}
+
+export function generateMotionSystem(style: BrandStyle = 'minimal'): MotionSystem {
+  const durationValues = STYLE_DURATIONS[style];
+  const easingValues = STYLE_EASINGS[style];
+  const durations = {} as Record<DurationName, string>;
+  for (const [name, ms] of Object.entries(durationValues)) {
+    durations[name as DurationName] = `${ms}ms`;
+  }
+  return {
+    durations,
+    easings: easingValues,
+    transitions: buildTransitions(durationValues, easingValues['ease-out']),
+  };
+}

package/src/lib/branding-core/generators/og-image-generator.ts

@@ -0,0 +1,97 @@
+import type { BrandIdentity, OgImageOutput, OgTemplate } from '../../types.js';
+
+function getGradientColors(brand: BrandIdentity): [string, string] {
+  return [brand.colors.primary.hex, brand.colors.secondary.hex];
+}
+
+function stripSvgWrapper(svg: string): string {
+  return svg.replace(/<svg[^>]*>/, '').replace(/<\/svg>/, '');
+}
+
+function buildSvg(
+  w: number,
+  h: number,
+  colors: [string, string],
+  font: string,
+  title: string,
+  subtitle: string,
+  logoSection: string
+): string {
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`,
+    `  <defs>`,
+    `    <style>@import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(font)}');</style>`,
+    `    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">`,
+    `      <stop offset="0%" style="stop-color:${colors[0]}"/>`,
+    `      <stop offset="100%" style="stop-color:${colors[1]}"/>`,
+    `    </linearGradient>`,
+    `  </defs>`,
+    `  <rect width="${w}" height="${h}" fill="url(#bg)"/>`,
+    logoSection,
+    `  <text x="${w / 2}" y="${h / 2 - 20}" fill="white" font-size="56" font-family="'${font}', sans-serif" font-weight="700" text-anchor="middle" dominant-baseline="central">${title}</text>`,
+    subtitle
+      ? `  <text x="${w / 2}" y="${h / 2 + 40}" fill="white" font-size="28" font-family="'${font}', sans-serif" font-weight="400" text-anchor="middle" dominant-baseline="central" opacity="0.8">${subtitle}</text>`
+      : '',
+    '</svg>',
+  ]
+    .filter(Boolean)
+    .join('\n');
+}
+
+function buildDefaultTemplate(brand: BrandIdentity, title?: string, subtitle?: string): string {
+  const displayTitle = title ?? brand.name;
+  const displaySub = subtitle ?? brand.tagline ?? '';
+  const font = brand.typography.headingFont;
+  const logoSvg = brand.logo?.variants?.icon ?? '';
+  const logoSection = logoSvg
+    ? `<g transform="translate(540, 80) scale(1.5)">${stripSvgWrapper(logoSvg)}</g>`
+    : '';
+
+  return buildSvg(1200, 630, getGradientColors(brand), font, displayTitle, displaySub, logoSection);
+}
+
+function buildArticleTemplate(brand: BrandIdentity, title?: string, subtitle?: string): string {
+  const displayTitle = title ?? 'Untitled Article';
+  const displaySub = subtitle ?? '';
+  const font = brand.typography.headingFont;
+  const logoSvg = brand.logo?.variants?.icon ?? '';
+  const logoSection = logoSvg
+    ? `<g transform="translate(1080, 30) scale(0.8)">${stripSvgWrapper(logoSvg)}</g>`
+    : '';
+
+  return buildSvg(1200, 630, getGradientColors(brand), font, displayTitle, displaySub, logoSection);
+}
+
+function buildSocialTemplate(brand: BrandIdentity, title?: string): string {
+  const displayTitle = title ?? brand.name;
+  const font = brand.typography.headingFont;
+  const colors = getGradientColors(brand);
+  const logoSvg = brand.logo?.variants?.icon ?? '';
+  const logoSection = logoSvg
+    ? `<g transform="translate(536, 300) scale(2)">${stripSvgWrapper(logoSvg)}</g>`
+    : '';
+
+  return buildSvg(1200, 1200, colors, font, displayTitle, '', logoSection);
+}
+
+export function generateOgImage(
+  brand: BrandIdentity,
+  template: OgTemplate = 'default',
+  title?: string,
+  subtitle?: string
+): OgImageOutput {
+  const builders: Record<OgTemplate, () => string> = {
+    default: () => buildDefaultTemplate(brand, title, subtitle),
+    article: () => buildArticleTemplate(brand, title, subtitle),
+    social: () => buildSocialTemplate(brand, title),
+  };
+
+  const svg = builders[template]();
+  const dimensions: Record<OgTemplate, { width: number; height: number }> = {
+    default: { width: 1200, height: 630 },
+    article: { width: 1200, height: 630 },
+    social: { width: 1200, height: 1200 },
+  };
+
+  return { template, svg, ...dimensions[template] };
+}