Generate branded decks, proposals, and reports

Apply a company’s identity to a reusable report, proposal, or slide template. Context.dev provides logos and observed website styles; your application supplies the content model, renderer, and PDF or presentation export. ChatSlide uses brand data for generated decks, and Kyndir creates branded client deliverables. The workflow below uses a two-section React report that you can print to PDF.

Gather a small source bundle

Start with an API key from the Quickstart and a verified company domain. On your server, retrieve the Brand profile and, optionally, its Styleguide. Those guides include requests for every SDK.

Source	Keep for the document
`brand.title` and `brand.domain`	Suggested display name and lookup provenance
`brand.logos[]`	Reviewed asset, dimensions, and preferred background
`brand.colors[]`	Palette candidates; distinguish `source: "site"` from `source: "logo"`
Styleguide	Typography and layout references for an editor
Selected website Markdown, if needed	Sourced descriptions or claims that a reviewer approves

Treat each call independently. An unavailable Styleguide can use the template’s default typography. A missing Brand profile can use a user-entered name and neutral theme. Gather website copy only when the document needs it; the client’s website does not supply your proposal’s pricing, commitments, or project results. Save the domain, retrieval time, and an application version for the bundle. A retrieval timestamp describes when you received the response, not necessarily when the source website last changed.

Approve the document theme

Keep the template contract smaller than the upstream response. The following application model is deliberately independent of the API schema:

document-theme.ts

export type DocumentTheme = {
  clientName: string;
  accent: string;
  accentText: string;
  fontStack: string;
  logo: { url: string; width: number; height: number } | null;
  sourceDomain: string;
  sourceVersion: string;
};

export function accentText(hex: string) {
  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error("Use a six-digit hex color");
  const rgb = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16) / 255);
  const [r, g, b] = rgb.map((c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  const blackContrast = (luminance + 0.05) / 0.05;
  const whiteContrast = 1.05 / (luminance + 0.05);
  return blackContrast >= whiteContrast ? "#000000" : "#ffffff";
}

export function approveTheme(input: {
  clientName: string;
  accent?: string;
  logo?: DocumentTheme["logo"];
  sourceDomain: string;
  sourceVersion: string;
}): DocumentTheme {
  const accent = input.accent ?? "#334155";
  const logo = input.logo ?? null;
  if (logo && (
    new URL(logo.url).protocol !== "https:" ||
    !Number.isFinite(logo.width) || !Number.isFinite(logo.height) ||
    logo.width <= 0 || logo.height <= 0
  )) throw new Error("Approve a valid HTTPS logo with dimensions");

  return {
    ...input,
    accent,
    accentText: accentText(accent),
    logo,
    fontStack: "Arial, Helvetica, sans-serif",
  };
}

Call approveTheme with an editor’s chosen color and logo. Keep headings and body text on a neutral surface; use the accent in bounded elements such as a label or rule. If you enable custom fonts, approve a loadable, licensed font and retain a tested fallback stack. Use Brand assets for this workflow. Logo Link is for direct image embedding and does not allow downloading, persisting, or rehosting its returned image files.

Render approved content

Keep author and client identities separate. In a proposal, Prepared by names the sender and Prepared for names the recipient; client styling does not imply that the client authored or approved the document. The following React component imports the theme type from the previous example. Supply approved text and HTTPS source URLs. React escapes the text instead of accepting model-generated HTML.

ClientReport.tsx

import type { DocumentTheme } from "./document-theme";

type Report = {
  title: string;
  author: string;
  date: string;
  summary: string;
  findings: Array<{ heading: string; text: string; sourceUrl: string | null }>;
};

export function ClientReport({ theme, report }: {
  theme: DocumentTheme;
  report: Report;
}) {
  const logo = theme.logo;
  const width = logo ? Math.min(160, 48 * logo.width / logo.height) : 0;
  const height = logo ? width * logo.height / logo.width : 0;

  return (
    <article className="client-report" style={{ fontFamily: theme.fontStack }}>
      <section className="report-page">
        <header>
          {logo && <img src={logo.url} alt={`${theme.clientName} logo`}
            width={width} height={height} style={{ objectFit: "contain" }} />}
          <p>Prepared for {theme.clientName}</p>
          <p>Prepared by {report.author} · {report.date}</p>
        </header>
        <span style={{ background: theme.accent, color: theme.accentText,
          display: "inline-block", padding: "6px 12px" }}>Client report</span>
        <h1>{report.title}</h1>
        <p>{report.summary}</p>
      </section>
      <section className="report-page">
        <h2>Findings</h2>
        {report.findings.map((finding, index) => (
          <section className="report-finding" key={index}>
            <h3>{finding.heading}</h3>
            <p>{finding.text}</p>
            {finding.sourceUrl && <p><a href={finding.sourceUrl}>Source</a></p>}
          </section>
        ))}
        <footer>Theme version: {theme.sourceVersion}</footer>
      </section>
    </article>
  );
}

report.css

@page { size: A4; margin: 16mm; }
.client-report { color: #171717; background: #fff; line-height: 1.5; }
.report-page { max-width: 178mm; margin: 0 auto 32px; overflow-wrap: anywhere; }
.report-page img { max-width: 100%; }
.report-finding { break-inside: avoid; }
.client-report footer { margin-top: 24px; font-size: 12px; }
@media print {
  .report-page { margin: 0; break-after: page; }
  .report-page:last-child { break-after: auto; }
  .client-report { print-color-adjust: exact; }
}

For an editable slide deck, map the same approved theme and content fields to your slide renderer’s master, text boxes, and image placements. That renderer creates the presentation file; Context.dev does not export a PDF or slide deck from the Brand response.

Inspect the exported artifact

Before printing or running an export worker, wait for fonts and images to finish loading. If an asset fails, show the missing-asset state and let the user choose a replacement or the neutral theme. A preview that loaded an image earlier is not proof that a separate export worker can access it. Render the same short report for two companies and a neutral fallback. Check long client names, very wide wordmarks, long findings, missing images, and the actual exported pages. Avoid clipping overflow to force a two-page count; shorten approved copy or allow another page instead. Save the output with the content version, template version, approved theme, source-bundle version, and export time. Store manual logo and color choices separately from automatic candidates so a refresh creates a reviewable revision.

Personalized sales demos

Combine prospect branding with sourced meeting context.

Generate branded websites

Map the same brand context into editable website tokens.

Brand experiences

Sales and content

Web research

Generate branded decks, proposals, and reports

Gather a small source bundle

Approve the document theme

Render approved content

Inspect the exported artifact

Personalized sales demos

Generate branded websites

​Gather a small source bundle

​Approve the document theme

​Render approved content

​Inspect the exported artifact

Personalized sales demos

Generate branded websites

Gather a small source bundle

Approve the document theme

Render approved content

Inspect the exported artifact