Part 2: Brand-Aware Styles + Export Hooks.

This is the glue that makes your saved kits flow into PDF/DOCX exports and charts.
It’s small enough for Replit, and builds right on top of Part 1.

src/lib/exportStyles.ts
import type { BrandKit } from "../types/brand";

export interface ExportStyleMap {
  h1Color: string; h2Color: string; h3Color: string; bodyColor: string;
  hFont: string; bFont: string;
  tableHeaderBg: string; tableHeaderColor: string;
}

export function buildExportStyles(brand: BrandKit): ExportStyleMap {
  return {
    h1Color: brand.primary || "#111827",
    h2Color: brand.primary || "#111827",
    h3Color: brand.accent || brand.primary || "#111827",
    bodyColor: "#111827",
    hFont: brand.fontHead || "Inter, ui-sans-serif",
    bFont: brand.fontBody || "Inter, ui-sans-serif",
    tableHeaderBg: brand.primary || "#111827",
    tableHeaderColor: "#ffffff",
  };
}

src/services/ai/planExportPdf.ts
import { buildExportStyles } from "../../lib/exportStyles";
import { useBrandKitStore } from "../../state/useBrandKitStore";

export async function exportPlanPdfBrandAware(plan: any, filename: string){
  const brand = useBrandKitStore.getState().getCurrentKit();
  const styles = buildExportStyles(brand || {} as any);

  // pseudo-code depending on your PDF engine:
  // markdownToPdf(plan.markdown, { styles })

  console.log("PDF export (brand-aware)", { filename, styles });
}

src/services/ai/planExportDocx.ts
import { buildExportStyles } from "../../lib/exportStyles";
import { useBrandKitStore } from "../../state/useBrandKitStore";

export async function exportPlanDocxBrandAware(plan: any, filename: string){
  const brand = useBrandKitStore.getState().getCurrentKit();
  const styles = buildExportStyles(brand || {} as any);

  // pseudo-code depending on your DOCX engine:
  // markdownToDocx(plan.markdown, { styles })

  console.log("DOCX export (brand-aware)", { filename, styles });
}

Chart Brand Hook (patch for FinanceCharts.tsx + CustomChartBuilder.tsx)
import { useBrandKitStore } from "../state/useBrandKitStore";
import { getBrandPalette } from "../lib/brand";

// inside component:
const brand = useBrandKitStore((s)=> s.current);
const palette = getBrandPalette(brand);

// wrap chart container so labels/legends inherit brand font:
<div style={{ fontFamily: brand.fontBody }}>
  <ResponsiveContainer> ... </ResponsiveContainer>
</div>


✅ With this in, every export and chart now auto-skins itself to the active Brand Kit.
No manual styling needed.