@forgespace/branding-mcp 0.4.0

package/src/lib/branding-core/ai/prompts.ts

@@ -0,0 +1,93 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function buildRefinementPrompt(
+  feedback: string,
+  element: 'colors' | 'typography' | 'spacing',
+  currentBrand: BrandIdentity
+): string {
+  const brandContext = [
+    `Brand: ${currentBrand.name}`,
+    `Industry: ${currentBrand.industry}`,
+    `Style: ${currentBrand.style}`,
+    `Current primary color: ${currentBrand.colors.primary.hex}`,
+    `Current heading font: ${currentBrand.typography.headingFont}`,
+    `Current body font: ${currentBrand.typography.bodyFont}`,
+  ].join('\n');
+
+  const colorSchema = `{
+  "color": {
+    "baseColor": "#hex (optional, keep current if not changing)",
+    "harmony": "complementary|analogous|triadic|split-complementary|tetradic|monochromatic",
+    "theme": "light|dark|both",
+    "saturationShift": number (-30 to 30),
+    "lightnessShift": number (-30 to 30),
+    "hueShift": number (-180 to 180)
+  },
+  "reasoning": "1-2 sentences explaining the design decision"
+}`;
+
+  const typographySchema = `{
+  "typography": {
+    "headingCategory": "serif|sans-serif|monospace|display|handwriting",
+    "bodyCategory": "serif|sans-serif|monospace|display|handwriting",
+    "scaleRatio": "minor-second|major-second|minor-third|major-third|perfect-fourth|augmented-fourth|perfect-fifth|golden-ratio",
+    "baseSize": number (12-24)
+  },
+  "reasoning": "1-2 sentences explaining the design decision"
+}`;
+
+  const schema = element === 'colors' ? colorSchema : typographySchema;
+
+  return [
+    'You are a brand identity expert. Interpret the user feedback and output a JSON object with specific design parameters.',
+    '',
+    'Current brand context:',
+    brandContext,
+    '',
+    `User wants to refine: ${element}`,
+    `User feedback: "${feedback}"`,
+    '',
+    'Respond with ONLY valid JSON matching this schema:',
+    schema,
+    '',
+    'Design principles:',
+    '- Warm colors: shift hue toward red/orange (positive hueShift), use analogous harmony',
+    '- Cool colors: shift hue toward blue/green (negative hueShift)',
+    '- Premium feel: lower saturation, slightly darker, analogous or monochromatic',
+    '- Playful: higher saturation, lighter, triadic harmony',
+    '- Corporate: moderate saturation, complementary, clean sans-serif',
+    '- Editorial: serif headings, perfect-fourth or larger scale ratio',
+    '- Technical: monospace body, sans-serif headings, compact scale',
+    '- WCAG: ensure contrast ratios remain accessible (>= 4.5:1 on white)',
+  ].join('\n');
+}
+
+export function buildGenerationPrompt(
+  brandName: string,
+  industry: string,
+  description: string
+): string {
+  return [
+    'You are a brand identity expert. Based on the brand description, suggest specific design parameters.',
+    '',
+    `Brand name: ${brandName}`,
+    `Industry: ${industry}`,
+    `Description: "${description}"`,
+    '',
+    'Respond with ONLY valid JSON:',
+    '{',
+    '  "style": "minimal|bold|elegant|playful|corporate|tech|organic|retro",',
+    '  "color": {',
+    '    "baseColor": "#hex",',
+    '    "harmony": "complementary|analogous|triadic|split-complementary|tetradic|monochromatic",',
+    '    "theme": "light|dark|both"',
+    '  },',
+    '  "typography": {',
+    '    "headingCategory": "serif|sans-serif|monospace|display|handwriting",',
+    '    "bodyCategory": "serif|sans-serif|monospace|display|handwriting",',
+    '    "scaleRatio": "minor-second|major-second|minor-third|major-third|perfect-fourth|augmented-fourth|perfect-fifth|golden-ratio"',
+    '  },',
+    '  "reasoning": "2-3 sentences explaining why these choices fit the brand"',
+    '}',
+  ].join('\n');
+}

package/src/lib/branding-core/ai/types.ts

@@ -0,0 +1,36 @@
+import type {
+  BrandStyle,
+  ColorHarmony,
+  ColorTheme,
+  FontCategory,
+  TypeScaleRatio,
+} from '../../types.js';
+
+export interface ColorIntent {
+  baseColor?: string;
+  harmony?: ColorHarmony;
+  theme?: ColorTheme;
+  saturationShift?: number;
+  lightnessShift?: number;
+  hueShift?: number;
+}
+
+export interface TypographyIntent {
+  headingCategory?: FontCategory;
+  bodyCategory?: FontCategory;
+  scaleRatio?: TypeScaleRatio;
+  baseSize?: number;
+}
+
+export interface BrandIntent {
+  color?: ColorIntent;
+  typography?: TypographyIntent;
+  style?: BrandStyle;
+  reasoning?: string;
+}
+
+export interface InterpreterOptions {
+  anthropicApiKey?: string;
+  model?: string;
+  maxTokens?: number;
+}

package/src/lib/branding-core/documents/html-generator.ts

@@ -0,0 +1,32 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function generateBrandHtml(brand: BrandIdentity): string {
+  const { colors, typography, spacing } = brand;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>${brand.name} Brand Book</title>
+</head>
+<body>
+  <h1>${brand.name}</h1>
+  ${brand.tagline ? `<p>${brand.tagline}</p>` : ''}
+  <section>
+    <h2>Colors</h2>
+    <p>Primary: ${colors.primary.hex}</p>
+    <p>Secondary: ${colors.secondary.hex}</p>
+    <p>Accent: ${colors.accent.hex}</p>
+  </section>
+  <section>
+    <h2>Typography</h2>
+    <p>Heading: ${typography.headingFont}</p>
+    <p>Body: ${typography.bodyFont}</p>
+    <p>Scale: ${typography.scaleRatio}</p>
+  </section>
+  <section>
+    <h2>Spacing</h2>
+    <p>Base unit: ${spacing.unit}px</p>
+  </section>
+</body>
+</html>`;
+}

package/src/lib/branding-core/documents/pdf-generator.ts

@@ -0,0 +1,21 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function generateBrandPdfContent(brand: BrandIdentity): string {
+  return [
+    `${brand.name} Brand Guidelines`,
+    brand.tagline ?? '',
+    '',
+    'Colors',
+    `  Primary: ${brand.colors.primary.hex}`,
+    `  Secondary: ${brand.colors.secondary.hex}`,
+    `  Accent: ${brand.colors.accent.hex}`,
+    '',
+    'Typography',
+    `  Heading: ${brand.typography.headingFont}`,
+    `  Body: ${brand.typography.bodyFont}`,
+    `  Base size: ${brand.typography.baseSize}px`,
+    '',
+    'Spacing',
+    `  Base unit: ${brand.spacing.unit}px`,
+  ].join('\n');
+}

package/src/lib/branding-core/exporters/css-variables.ts

@@ -0,0 +1,71 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function exportCssVariables(brand: BrandIdentity): string {
+  const { colors, typography, spacing } = brand;
+  const lines: string[] = [':root {'];
+
+  lines.push(`  --color-primary: ${colors.primary.hex};`);
+  lines.push(`  --color-secondary: ${colors.secondary.hex};`);
+  lines.push(`  --color-accent: ${colors.accent.hex};`);
+  for (const n of colors.neutral) {
+    lines.push(`  --color-${n.name}: ${n.hex};`);
+  }
+  lines.push(`  --color-success: ${colors.semantic.success.hex};`);
+  lines.push(`  --color-warning: ${colors.semantic.warning.hex};`);
+  lines.push(`  --color-error: ${colors.semantic.error.hex};`);
+  lines.push(`  --color-info: ${colors.semantic.info.hex};`);
+  lines.push('');
+
+  lines.push(`  --font-heading: '${typography.headingFont}', sans-serif;`);
+  lines.push(`  --font-body: '${typography.bodyFont}', sans-serif;`);
+  lines.push(`  --font-mono: '${typography.monoFont}', monospace;`);
+  for (const step of typography.steps) {
+    lines.push(`  --text-${step.name}: ${step.size};`);
+    lines.push(`  --leading-${step.name}: ${step.lineHeight};`);
+  }
+  lines.push('');
+
+  for (const [key, value] of Object.entries(spacing.values)) {
+    lines.push(`  --spacing-${key}: ${value};`);
+  }
+
+  if (brand.shadows) {
+    lines.push('');
+    for (const [name, level] of Object.entries(brand.shadows.levels)) {
+      lines.push(`  --shadow-${name}: ${level.cssValue};`);
+    }
+  }
+
+  if (brand.borders) {
+    lines.push('');
+    for (const [name, value] of Object.entries(brand.borders.radii)) {
+      lines.push(`  --radius-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(brand.borders.widths)) {
+      lines.push(`  --border-${name}: ${value};`);
+    }
+  }
+
+  if (brand.motion) {
+    lines.push('');
+    for (const [name, value] of Object.entries(brand.motion.durations)) {
+      lines.push(`  --duration-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(brand.motion.easings)) {
+      lines.push(`  --ease-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(brand.motion.transitions)) {
+      lines.push(`  --transition-${name}: ${value};`);
+    }
+  }
+
+  if (brand.gradients) {
+    lines.push('');
+    for (const [name, gradient] of Object.entries(brand.gradients.presets)) {
+      lines.push(`  --gradient-${name}: ${gradient.cssValue};`);
+    }
+  }
+
+  lines.push('}');
+  return lines.join('\n');
+}

package/src/lib/branding-core/exporters/design-tokens.ts

@@ -0,0 +1,86 @@
+import type { BrandIdentity, DesignTokens } from '../../types.js';
+
+export function exportDesignTokens(brand: BrandIdentity): DesignTokens {
+  const { colors, typography, spacing } = brand;
+
+  const colorTokens: DesignTokens['color'] = {
+    primary: { value: { $value: colors.primary.hex, $type: 'color' } },
+    secondary: { value: { $value: colors.secondary.hex, $type: 'color' } },
+    accent: { value: { $value: colors.accent.hex, $type: 'color' } },
+    success: { value: { $value: colors.semantic.success.hex, $type: 'color' } },
+    warning: { value: { $value: colors.semantic.warning.hex, $type: 'color' } },
+    error: { value: { $value: colors.semantic.error.hex, $type: 'color' } },
+    info: { value: { $value: colors.semantic.info.hex, $type: 'color' } },
+  };
+
+  for (const neutral of colors.neutral) {
+    colorTokens[neutral.name] = { value: { $value: neutral.hex, $type: 'color' } };
+  }
+
+  const typographyTokens: DesignTokens['typography'] = {};
+  for (const step of typography.steps) {
+    typographyTokens[step.name] = {
+      fontSize: { $value: step.size, $type: 'dimension' },
+      lineHeight: { $value: step.lineHeight, $type: 'number' },
+      letterSpacing: { $value: step.letterSpacing, $type: 'dimension' },
+      fontWeight: { $value: step.weight, $type: 'number' },
+    };
+  }
+  typographyTokens['font-heading'] = {
+    value: { $value: typography.headingFont, $type: 'fontFamily' },
+  };
+  typographyTokens['font-body'] = {
+    value: { $value: typography.bodyFont, $type: 'fontFamily' },
+  };
+  typographyTokens['font-mono'] = {
+    value: { $value: typography.monoFont, $type: 'fontFamily' },
+  };
+
+  const spacingTokens: DesignTokens['spacing'] = {};
+  for (const [key, value] of Object.entries(spacing.values)) {
+    spacingTokens[key] = { $value: value, $type: 'dimension' };
+  }
+
+  const result: DesignTokens = {
+    $schema: 'https://design-tokens.github.io/community-group/format/',
+    color: colorTokens,
+    typography: typographyTokens,
+    spacing: spacingTokens,
+  };
+
+  if (brand.shadows) {
+    result.shadow = {};
+    for (const [name, level] of Object.entries(brand.shadows.levels)) {
+      result.shadow[name] = { $value: level.cssValue, $type: 'shadow' };
+    }
+  }
+
+  if (brand.borders) {
+    result.border = {};
+    for (const [name, value] of Object.entries(brand.borders.radii)) {
+      result.border[`radius-${name}`] = { $value: value, $type: 'dimension' };
+    }
+    for (const [name, value] of Object.entries(brand.borders.widths)) {
+      result.border[`width-${name}`] = { $value: value, $type: 'dimension' };
+    }
+  }
+
+  if (brand.motion) {
+    result.motion = {};
+    for (const [name, value] of Object.entries(brand.motion.durations)) {
+      result.motion[`duration-${name}`] = { $value: value, $type: 'duration' };
+    }
+    for (const [name, value] of Object.entries(brand.motion.easings)) {
+      result.motion[`easing-${name}`] = { $value: value, $type: 'cubicBezier' };
+    }
+  }
+
+  if (brand.gradients) {
+    result.gradient = {};
+    for (const [name, gradient] of Object.entries(brand.gradients.presets)) {
+      result.gradient[name] = { $value: gradient.cssValue, $type: 'gradient' };
+    }
+  }
+
+  return result;
+}

package/src/lib/branding-core/exporters/figma-tokens.ts

@@ -0,0 +1,87 @@
+import type { BrandIdentity } from '../../types.js';
+
+interface FigmaToken {
+  value: string | number;
+  type: string;
+  description?: string;
+}
+
+export function exportFigmaTokens(
+  brand: BrandIdentity
+): Record<string, Record<string, FigmaToken>> {
+  const { colors, typography, spacing } = brand;
+
+  const colorGroup: Record<string, FigmaToken> = {
+    primary: { value: colors.primary.hex, type: 'color', description: 'Primary brand color' },
+    secondary: { value: colors.secondary.hex, type: 'color' },
+    accent: { value: colors.accent.hex, type: 'color' },
+    success: { value: colors.semantic.success.hex, type: 'color' },
+    warning: { value: colors.semantic.warning.hex, type: 'color' },
+    error: { value: colors.semantic.error.hex, type: 'color' },
+    info: { value: colors.semantic.info.hex, type: 'color' },
+  };
+  for (const n of colors.neutral) {
+    colorGroup[n.name] = { value: n.hex, type: 'color' };
+  }
+
+  const typographyGroup: Record<string, FigmaToken> = {};
+  for (const step of typography.steps) {
+    typographyGroup[`${step.name}-size`] = { value: step.size, type: 'fontSizes' };
+    typographyGroup[`${step.name}-weight`] = { value: step.weight, type: 'fontWeights' };
+    typographyGroup[`${step.name}-lineHeight`] = { value: step.lineHeight, type: 'lineHeights' };
+  }
+  typographyGroup['font-heading'] = { value: typography.headingFont, type: 'fontFamilies' };
+  typographyGroup['font-body'] = { value: typography.bodyFont, type: 'fontFamilies' };
+  typographyGroup['font-mono'] = { value: typography.monoFont, type: 'fontFamilies' };
+
+  const spacingGroup: Record<string, FigmaToken> = {};
+  for (const [key, value] of Object.entries(spacing.values)) {
+    spacingGroup[key] = { value, type: 'spacing' };
+  }
+
+  const result: Record<string, Record<string, FigmaToken>> = {
+    color: colorGroup,
+    typography: typographyGroup,
+    spacing: spacingGroup,
+  };
+
+  if (brand.shadows) {
+    const shadowGroup: Record<string, FigmaToken> = {};
+    for (const [name, level] of Object.entries(brand.shadows.levels)) {
+      shadowGroup[name] = { value: level.cssValue, type: 'boxShadow' };
+    }
+    result.shadow = shadowGroup;
+  }
+
+  if (brand.borders) {
+    const borderGroup: Record<string, FigmaToken> = {};
+    for (const [name, value] of Object.entries(brand.borders.radii)) {
+      borderGroup[`radius-${name}`] = { value, type: 'borderRadius' };
+    }
+    for (const [name, value] of Object.entries(brand.borders.widths)) {
+      borderGroup[`width-${name}`] = { value, type: 'borderWidth' };
+    }
+    result.border = borderGroup;
+  }
+
+  if (brand.motion) {
+    const motionGroup: Record<string, FigmaToken> = {};
+    for (const [name, value] of Object.entries(brand.motion.durations)) {
+      motionGroup[`duration-${name}`] = { value, type: 'duration' };
+    }
+    for (const [name, value] of Object.entries(brand.motion.easings)) {
+      motionGroup[`easing-${name}`] = { value, type: 'other' };
+    }
+    result.motion = motionGroup;
+  }
+
+  if (brand.gradients) {
+    const gradientGroup: Record<string, FigmaToken> = {};
+    for (const [name, gradient] of Object.entries(brand.gradients.presets)) {
+      gradientGroup[name] = { value: gradient.cssValue, type: 'gradient' };
+    }
+    result.gradient = gradientGroup;
+  }
+
+  return result;
+}

package/src/lib/branding-core/exporters/react-theme.ts

@@ -0,0 +1,69 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function exportReactTheme(brand: BrandIdentity): string {
+  const { colors, typography, spacing } = brand;
+
+  const neutralObj: Record<string, string> = {};
+  for (const n of colors.neutral) {
+    neutralObj[n.name] = n.hex;
+  }
+
+  const theme = {
+    colors: {
+      primary: colors.primary.hex,
+      secondary: colors.secondary.hex,
+      accent: colors.accent.hex,
+      ...neutralObj,
+      success: colors.semantic.success.hex,
+      warning: colors.semantic.warning.hex,
+      error: colors.semantic.error.hex,
+      info: colors.semantic.info.hex,
+    },
+    fonts: {
+      heading: `'${typography.headingFont}', sans-serif`,
+      body: `'${typography.bodyFont}', sans-serif`,
+      mono: `'${typography.monoFont}', monospace`,
+    },
+    fontSizes: Object.fromEntries(typography.steps.map((s) => [s.name, s.size])),
+    lineHeights: Object.fromEntries(typography.steps.map((s) => [s.name, s.lineHeight])),
+    space: spacing.values,
+  } as Record<string, unknown>;
+
+  if (brand.shadows) {
+    const shadowObj: Record<string, string> = {};
+    for (const [name, level] of Object.entries(brand.shadows.levels)) {
+      shadowObj[name] = level.cssValue;
+    }
+    theme.shadows = shadowObj;
+  }
+
+  if (brand.borders) {
+    theme.radii = brand.borders.radii;
+    theme.borderWidths = brand.borders.widths;
+  }
+
+  if (brand.motion) {
+    theme.motion = {
+      durations: brand.motion.durations,
+      easings: brand.motion.easings,
+      transitions: brand.motion.transitions,
+    };
+  }
+
+  if (brand.gradients) {
+    const gradientObj: Record<string, string> = {};
+    for (const [name, gradient] of Object.entries(brand.gradients.presets)) {
+      gradientObj[name] = gradient.cssValue;
+    }
+    theme.gradients = gradientObj;
+  }
+
+  return [
+    "import type { CSSProperties } from 'react';",
+    '',
+    `export const theme = ${JSON.stringify(theme, null, 2)} as const;`,
+    '',
+    'export type Theme = typeof theme;',
+    '',
+  ].join('\n');
+}

package/src/lib/branding-core/exporters/sass-variables.ts

@@ -0,0 +1,74 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function exportSassVariables(brand: BrandIdentity): string {
+  const { colors, typography, spacing } = brand;
+  const lines: string[] = ['// Brand Identity - Generated by @forgespace/branding-mcp', ''];
+
+  lines.push('// Colors');
+  lines.push(`$color-primary: ${colors.primary.hex};`);
+  lines.push(`$color-secondary: ${colors.secondary.hex};`);
+  lines.push(`$color-accent: ${colors.accent.hex};`);
+  for (const n of colors.neutral) {
+    lines.push(`$color-${n.name}: ${n.hex};`);
+  }
+  lines.push(`$color-success: ${colors.semantic.success.hex};`);
+  lines.push(`$color-warning: ${colors.semantic.warning.hex};`);
+  lines.push(`$color-error: ${colors.semantic.error.hex};`);
+  lines.push(`$color-info: ${colors.semantic.info.hex};`);
+  lines.push('');
+
+  lines.push('// Typography');
+  lines.push(`$font-heading: '${typography.headingFont}', sans-serif;`);
+  lines.push(`$font-body: '${typography.bodyFont}', sans-serif;`);
+  lines.push(`$font-mono: '${typography.monoFont}', monospace;`);
+  for (const step of typography.steps) {
+    lines.push(`$text-${step.name}: ${step.size};`);
+    lines.push(`$leading-${step.name}: ${step.lineHeight};`);
+  }
+  lines.push('');
+
+  lines.push('// Spacing');
+  for (const [key, value] of Object.entries(spacing.values)) {
+    lines.push(`$spacing-${key}: ${value};`);
+  }
+
+  if (brand.shadows) {
+    lines.push('');
+    lines.push('// Shadows');
+    for (const [name, level] of Object.entries(brand.shadows.levels)) {
+      lines.push(`$shadow-${name}: ${level.cssValue};`);
+    }
+  }
+
+  if (brand.borders) {
+    lines.push('');
+    lines.push('// Borders');
+    for (const [name, value] of Object.entries(brand.borders.radii)) {
+      lines.push(`$radius-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(brand.borders.widths)) {
+      lines.push(`$border-${name}: ${value};`);
+    }
+  }
+
+  if (brand.motion) {
+    lines.push('');
+    lines.push('// Motion');
+    for (const [name, value] of Object.entries(brand.motion.durations)) {
+      lines.push(`$duration-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(brand.motion.easings)) {
+      lines.push(`$ease-${name}: ${value};`);
+    }
+  }
+
+  if (brand.gradients) {
+    lines.push('');
+    lines.push('// Gradients');
+    for (const [name, gradient] of Object.entries(brand.gradients.presets)) {
+      lines.push(`$gradient-${name}: ${gradient.cssValue};`);
+    }
+  }
+
+  return lines.join('\n') + '\n';
+}

package/src/lib/branding-core/exporters/tailwind-preset.ts

@@ -0,0 +1,67 @@
+import type { BrandIdentity } from '../../types.js';
+
+export function exportTailwindPreset(brand: BrandIdentity): string {
+  const { colors, typography, spacing } = brand;
+
+  const neutralObj: Record<string, string> = {};
+  for (const n of colors.neutral) {
+    neutralObj[n.name.replace('neutral-', '')] = n.hex;
+  }
+
+  const spacingObj: Record<string, string> = {};
+  for (const [key, value] of Object.entries(spacing.values)) {
+    spacingObj[key] = value;
+  }
+
+  const extend: Record<string, unknown> = {
+    colors: {
+      primary: colors.primary.hex,
+      secondary: colors.secondary.hex,
+      accent: colors.accent.hex,
+      neutral: neutralObj,
+      success: colors.semantic.success.hex,
+      warning: colors.semantic.warning.hex,
+      error: colors.semantic.error.hex,
+      info: colors.semantic.info.hex,
+    },
+    fontFamily: {
+      heading: [typography.headingFont, 'sans-serif'],
+      body: [typography.bodyFont, 'sans-serif'],
+      mono: [typography.monoFont, 'monospace'],
+    },
+    fontSize: Object.fromEntries(
+      typography.steps.map((s) => [s.name, [s.size, { lineHeight: s.lineHeight }]])
+    ),
+    spacing: spacingObj,
+  };
+
+  if (brand.shadows) {
+    const shadowObj: Record<string, string> = {};
+    for (const [name, level] of Object.entries(brand.shadows.levels)) {
+      shadowObj[name] = level.cssValue;
+    }
+    extend.boxShadow = shadowObj;
+  }
+
+  if (brand.borders) {
+    extend.borderRadius = brand.borders.radii;
+    extend.borderWidth = brand.borders.widths;
+  }
+
+  if (brand.motion) {
+    extend.transitionDuration = brand.motion.durations;
+    extend.transitionTimingFunction = brand.motion.easings;
+  }
+
+  if (brand.gradients) {
+    const bgImage: Record<string, string> = {};
+    for (const [name, gradient] of Object.entries(brand.gradients.presets)) {
+      bgImage[name] = gradient.cssValue;
+    }
+    extend.backgroundImage = bgImage;
+  }
+
+  const preset = { theme: { extend } };
+
+  return `/** @type {import('tailwindcss').Config} */\nexport default ${JSON.stringify(preset, null, 2)};\n`;
+}

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

@@ -0,0 +1,41 @@
+import type { BorderRadiusName, BorderSystem, BrandStyle } from '../../types.js';
+
+const STYLE_RADII: Record<BrandStyle, Record<BorderRadiusName, number>> = {
+  minimal: { none: 0, sm: 2, md: 4, lg: 6, xl: 8, full: 9999, circle: 9999 },
+  bold: { none: 0, sm: 4, md: 8, lg: 12, xl: 16, full: 9999, circle: 9999 },
+  elegant: { none: 0, sm: 1, md: 2, lg: 4, xl: 6, full: 9999, circle: 9999 },
+  playful: { none: 0, sm: 8, md: 12, lg: 16, xl: 24, full: 9999, circle: 9999 },
+  corporate: { none: 0, sm: 2, md: 4, lg: 6, xl: 8, full: 9999, circle: 9999 },
+  tech: { none: 0, sm: 2, md: 4, lg: 8, xl: 12, full: 9999, circle: 9999 },
+  organic: { none: 0, sm: 6, md: 12, lg: 20, xl: 28, full: 9999, circle: 9999 },
+  retro: { none: 0, sm: 0, md: 2, lg: 4, xl: 8, full: 9999, circle: 9999 },
+};
+
+const STYLE_BORDERS: Record<BrandStyle, { thin: number; medium: number; thick: number }> = {
+  minimal: { thin: 1, medium: 1, thick: 2 },
+  bold: { thin: 2, medium: 3, thick: 4 },
+  elegant: { thin: 1, medium: 1, thick: 2 },
+  playful: { thin: 2, medium: 3, thick: 4 },
+  corporate: { thin: 1, medium: 2, thick: 3 },
+  tech: { thin: 1, medium: 2, thick: 3 },
+  organic: { thin: 1, medium: 2, thick: 3 },
+  retro: { thin: 2, medium: 3, thick: 4 },
+};
+
+export function generateBorderSystem(style: BrandStyle = 'minimal'): BorderSystem {
+  const radiusMap = STYLE_RADII[style];
+  const radii = {} as Record<BorderRadiusName, string>;
+  for (const [name, value] of Object.entries(radiusMap)) {
+    radii[name as BorderRadiusName] = value === 9999 ? '9999px' : `${value}px`;
+  }
+
+  const borderWidths = STYLE_BORDERS[style];
+  return {
+    radii,
+    widths: {
+      thin: `${borderWidths.thin}px`,
+      medium: `${borderWidths.medium}px`,
+      thick: `${borderWidths.thick}px`,
+    },
+  };
+}