> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brandfetch.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sales personalization

> Auto-brand decks, proposals, and emails with your prospect's logo and colors

export const BrandedEmailDemo = () => {
  const brands = [{
    name: "Claude",
    domain: "claude.ai",
    color: "#D97757"
  }, {
    name: "Linear",
    domain: "linear.app",
    color: "#5E6AD2"
  }, {
    name: "Dropbox",
    domain: "dropbox.com",
    color: "#0061FF"
  }, {
    name: "Shopify",
    domain: "shopify.com",
    color: "#95C049"
  }];
  const [active, setActive] = useState(brands[0]);
  const logo = theme => `https://cdn.brandfetch.io/domain/${active.domain}/h/52/theme/${theme}/type/logo/fallback/lettermark?c=1bfwsmEH20zzEfSNTed`;
  return <div className="w-full max-w-[480px]">
      <div className="flex gap-2 mb-3 flex-wrap">
        {brands.map(b => <button key={b.domain} onClick={() => setActive(b)} className={`px-3 py-1 rounded-full text-[13px] font-medium border transition-colors ${active.domain === b.domain ? "text-white" : "text-inherit"}`} style={active.domain === b.domain ? {
    background: b.color,
    borderColor: b.color
  } : {
    borderColor: "#63636333"
  }}>
            {b.name}
          </button>)}
      </div>
      <div className="rounded-xl border border-[#63636333] overflow-hidden bg-white dark:bg-[#1c1d1f]">
        <div className="h-1.5" style={{
    background: active.color
  }} />
        <div className="px-6 pt-5 pb-4 border-b border-[#0000000d] dark:border-[#ffffff14]">
          <img noZoom src={logo("dark")} alt={`${active.name} logo`} className="h-[26px] w-auto block dark:hidden" />
          <img noZoom src={logo("light")} alt={`${active.name} logo`} className="h-[26px] w-auto hidden dark:block" />
        </div>
        <div className="px-6 py-5">
          <div className="text-lg font-semibold">
            Welcome to {active.name} 👋
          </div>
          <div className="text-sm text-[#6b7280] mt-2 leading-relaxed">
            Thanks for signing up. Let's get your account set up, it only
            takes a minute to send your first request.
          </div>
          <button className="mt-4 px-4 py-2 rounded-lg text-white text-sm font-medium" style={{
    background: active.color
  }}>
            Get started
          </button>
        </div>
        <div className="px-6 py-4 border-t border-[#0000000d] dark:border-[#ffffff14] text-[11px] text-[#9ca3af]">
          Sent by {active.name} · You can unsubscribe at any time.
        </div>
      </div>
    </div>;
};

export const SlideThemeSwitcherDemo = () => {
  const brands = [{
    name: "Claude",
    domain: "claude.ai",
    palette: ["#D97757", "#191919", "#F0EEE6"]
  }, {
    name: "Airbnb",
    domain: "airbnb.com",
    palette: ["#FF385C", "#222222", "#FFFFFF"]
  }, {
    name: "Linear",
    domain: "linear.app",
    palette: ["#5E6AD2", "#08090A", "#8A8F98"]
  }, {
    name: "Attio",
    domain: "attio.com",
    palette: ["#266DF0", "#232529", "#5C5E63"]
  }];
  const [active, setActive] = useState(brands[0]);
  const [accent, second, third] = active.palette;
  const logo = theme => `https://cdn.brandfetch.io/domain/${active.domain}/h/48/theme/${theme}/type/logo/fallback/lettermark?c=1bfwsmEH20zzEfSNTed`;
  return <div className="w-full max-w-[480px]">
      <div className="flex gap-2 mb-3 flex-wrap">
        {brands.map(b => <button key={b.domain} onClick={() => setActive(b)} className={`px-3 py-1 rounded-full text-[13px] font-medium border transition-colors ${active.domain === b.domain ? "text-white" : "text-inherit"}`} style={active.domain === b.domain ? {
    background: b.palette[0],
    borderColor: b.palette[0]
  } : {
    borderColor: "#63636333"
  }}>
            {b.name}
          </button>)}
      </div>
      <div style={{
    aspectRatio: "16 / 9"
  }} className="relative rounded-xl border border-[#63636333] overflow-hidden flex flex-col bg-white dark:bg-[#1c1d1f]">
        <span className="absolute rounded-full" style={{
    width: 190,
    height: 190,
    top: -95,
    right: -55,
    background: `${accent}1A`
  }} />
        <span className="absolute rounded-full" style={{
    width: 110,
    height: 110,
    top: 40,
    right: -70,
    border: `1.5px solid ${accent}4D`
  }} />
        <div className="relative flex-1 px-6 pt-5 pb-4 flex flex-col">
          <div className="flex items-start justify-between">
            <img noZoom src={logo("dark")} alt={`${active.name} logo`} className="h-5 w-auto block dark:hidden" />
            <img noZoom src={logo("light")} alt={`${active.name} logo`} className="h-5 w-auto hidden dark:block" />
            <span className="text-[11px] text-[#9ca3af]">01</span>
          </div>
          <div className="mt-auto">
            <div className="text-[10px] font-semibold uppercase tracking-[0.14em]" style={{
    color: accent
  }}>
              2026 · All hands
            </div>
            <div className="mt-1 text-2xl font-bold leading-tight">
              Q3 Business Review
            </div>
            <div className="mt-1 text-[13px] text-[#6b7280] dark:text-[#9ca3af]">
              {active.name} · Confidential
            </div>
          </div>
          <div className="mt-4 pt-2.5 border-t border-[#63636326] flex items-center justify-between text-[11px] text-[#9ca3af]">
            <span>{active.domain}</span>
            <span className="flex gap-1.5">
              {active.palette.map(c => <span key={c} className="w-2.5 h-2.5 rounded-full outline outline-1 outline-[#0000000d] dark:outline-[#ffffff14]" style={{
    background: c
  }} />)}
            </span>
          </div>
        </div>
        <div className="flex h-1.5 shrink-0">
          <span className="flex-[3]" style={{
    background: accent
  }} />
          <span className="flex-[1]" style={{
    background: second
  }} />
          <span className="flex-[1]" style={{
    background: third
  }} />
        </div>
      </div>
    </div>;
};

export const Preview = ({children}) => <div className="relative rounded-xl border border-[#63636333] bg-[#6363630d] pt-12 px-8 pb-8 mt-4 mb-4 overflow-hidden">
    <style>{`
      .bf-preview-body img { margin: 0 !important; max-width: none; }
      .bf-preview-body ul, .bf-preview-body ol { margin: 0; padding: 0; }
      .bf-preview-body li { margin: 0 !important; padding-left: 0 !important; }
      .bf-preview-body li::before, .bf-preview-body li::marker { content: none !important; display: none !important; }
      .bf-preview-body p { margin: 0; }
    `}</style>
    <span className="absolute top-3.5 left-[18px] text-[11px] font-semibold tracking-[0.06em] uppercase text-[#636363b3]">
      Preview
    </span>
    <div className="bf-preview-body flex justify-center">{children}</div>
  </div>;

Generic sales collateral gets generic attention. A deck that opens in the prospect's colors, an email header carrying their mark, that's collateral that feels made for them, because it was.

All of it hangs off a single lookup: resolve the prospect's domain, fetch the brand, apply it to the template.

## Personalize decks and presentations

Presentation tools can make any deck instantly on-brand by pulling a company's logo, colors, and fonts from its domain. The [Brand API](/brand-api/overview) returns all three in one call, so a template restyles itself the moment a user types a domain.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <SlideThemeSwitcherDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx SlideThemeSwitcher.tsx theme={null}
    import { useState } from "react";

    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    // Palettes come from the Brand API in production (brand.colors); hardcoded here.
    const BRANDS = [
      { name: "Claude", domain: "claude.ai", palette: ["#D97757", "#191919", "#F0EEE6"] },
      { name: "Airbnb", domain: "airbnb.com", palette: ["#FF385C", "#222222", "#FFFFFF"] },
      { name: "Linear", domain: "linear.app", palette: ["#5E6AD2", "#08090A", "#8A8F98"] },
      { name: "Attio", domain: "attio.com", palette: ["#266DF0", "#232529", "#5C5E63"] },
    ];

    export function SlideThemeSwitcher() {
      const [active, setActive] = useState(BRANDS[0]);
      const [accent, second, third] = active.palette;
      const logo = (theme: "light" | "dark") =>
        `https://cdn.brandfetch.io/domain/${active.domain}/h/48/theme/${theme}/type/logo/fallback/lettermark?c=${CLIENT_ID}`;

      return (
        <div className="w-full max-w-[480px]">
          <div className="mb-3 flex flex-wrap gap-2">
            {BRANDS.map((b) => (
              <button
                key={b.domain}
                onClick={() => setActive(b)}
                className={`rounded-full border px-3 py-1 text-[13px] font-medium transition-colors ${
                  active.domain === b.domain ? "text-white" : "text-inherit"
                }`}
                style={
                  active.domain === b.domain
                    ? { background: b.palette[0], borderColor: b.palette[0] }
                    : { borderColor: "#63636333" }
                }
              >
                {b.name}
              </button>
            ))}
          </div>
          <div
            style={{ aspectRatio: "16 / 9" }}
            className="relative flex flex-col overflow-hidden rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f]"
          >
            <span className="absolute rounded-full" style={{ width: 190, height: 190, top: -95, right: -55, background: `${accent}1A` }} />
            <span className="absolute rounded-full" style={{ width: 110, height: 110, top: 40, right: -70, border: `1.5px solid ${accent}4D` }} />
            <div className="relative flex flex-1 flex-col px-6 pb-4 pt-5">
              <div className="flex items-start justify-between">
                <img src={logo("dark")} alt={`${active.name} logo`} className="block h-5 w-auto dark:hidden" />
                <img src={logo("light")} alt={`${active.name} logo`} className="hidden h-5 w-auto dark:block" />
                <span className="text-[11px] text-[#9ca3af]">01</span>
              </div>
              <div className="mt-auto">
                <div className="text-[10px] font-semibold uppercase tracking-[0.14em]" style={{ color: accent }}>
                  2026 · All hands
                </div>
                <div className="mt-1 text-2xl font-bold leading-tight">Q3 Business Review</div>
                <div className="mt-1 text-[13px] text-[#6b7280] dark:text-[#9ca3af]">{active.name} · Confidential</div>
              </div>
              <div className="mt-4 flex items-center justify-between border-t border-[#63636326] pt-2.5 text-[11px] text-[#9ca3af]">
                <span>{active.domain}</span>
                <span className="flex gap-1.5">
                  {active.palette.map((c) => (
                    <span key={c} className="h-2.5 w-2.5 rounded-full outline outline-1 outline-[#0000000d] dark:outline-[#ffffff14]" style={{ background: c }} />
                  ))}
                </span>
              </div>
            </div>
            <div className="flex h-1.5 shrink-0">
              <span className="flex-[3]" style={{ background: accent }} />
              <span className="flex-[1]" style={{ background: second }} />
              <span className="flex-[1]" style={{ background: third }} />
            </div>
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want slide templates that auto-style to any company's brand? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a presentation title slide (16:9) that themes itself from a company's brand. Show a brand picker; when a brand is selected, restyle the slide. Make it look like a real deck slide: the company logo top-left with a page number top-right, an uppercase kicker line in the brand's accent color, a large bold title with a muted subtitle, and a footer rule with the domain on the left and the brand's palette as small dots on the right.

  Use the brand's full color palette, not just one color: the accent leads (kicker, main bar), and the secondary colors drive the bottom edge strip split into palette-colored segments. For the decorative circles bleeding off the slide corners, use only the accent color (palettes often carry near-white or near-black secondaries that wash out): one soft filled circle at low opacity and one thin outlined ring, so the corner reads as a pattern rather than flat blobs.

  Fetch the brand record from Brandfetch's Brand API (server-side, so the API key stays secret; get one at `https://developers.brandfetch.com/register`):

  ```
  GET https://api.brandfetch.io/v2/brands/domain/{domain}
  Authorization: Bearer YOUR_API_KEY
  ```

  From the response use: the full `brand.colors` array for the palette (the accent is `brand.colors.find(c => c.type === "accent").hex`), and `brand.fonts[0].name` for the heading font. Render the logo with the Logo API: `https://cdn.brandfetch.io/domain/{domain}/type/logo?c=YOUR_CLIENT_ID`

  Use the Logo API the intended way: hotlink the CDN URL directly in the image `src`, don't download, cache, or re-host the file. Requests are free with a client ID and always return the brand's current logo.
</Prompt>

## Convert with branded emails

Email builders and transactional-email systems can theme every message to the sender's brand, logo in the header, accent color on the call-to-action, without designers hand-editing templates. The [Brand API](/brand-api/overview) supplies the logo and colors from a single domain.

Pick a brand and the whole email retheme, header logo, accent bar, and the call-to-action button all update from one brand record.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <BrandedEmailDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx BrandedEmail.tsx theme={null}
    import { useState } from "react";

    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    // Accent colors come from the Brand API (brand.colors) in production.
    const BRANDS = [
      { name: "Claude", domain: "claude.ai", color: "#D97757" },
      { name: "Linear", domain: "linear.app", color: "#5E6AD2" },
      { name: "Dropbox", domain: "dropbox.com", color: "#0061FF" },
      { name: "Shopify", domain: "shopify.com", color: "#95C049" },
    ];

    export function BrandedEmail() {
      const [active, setActive] = useState(BRANDS[0]);
      const logo = (theme: "light" | "dark") =>
        `https://cdn.brandfetch.io/domain/${active.domain}/h/52/theme/${theme}/type/logo/fallback/lettermark?c=${CLIENT_ID}`;

      return (
        <div className="w-full max-w-[480px]">
          <div className="mb-3 flex flex-wrap gap-2">
            {BRANDS.map((b) => (
              <button
                key={b.domain}
                onClick={() => setActive(b)}
                className={`rounded-full border px-3 py-1 text-[13px] font-medium transition-colors ${
                  active.domain === b.domain ? "text-white" : "text-inherit"
                }`}
                style={active.domain === b.domain ? { background: b.color, borderColor: b.color } : { borderColor: "#63636333" }}
              >
                {b.name}
              </button>
            ))}
          </div>
          <div className="overflow-hidden rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f]">
            <div className="h-1.5" style={{ background: active.color }} />
            <div className="border-b border-[#0000000d] px-6 pb-4 pt-5 dark:border-[#ffffff14]">
              <img src={logo("dark")} alt={`${active.name} logo`} className="block h-[26px] w-auto dark:hidden" />
              <img src={logo("light")} alt={`${active.name} logo`} className="hidden h-[26px] w-auto dark:block" />
            </div>
            <div className="px-6 py-5">
              <div className="text-lg font-semibold">Welcome to {active.name} 👋</div>
              <div className="mt-2 text-sm leading-relaxed text-[#6b7280]">
                Thanks for signing up. Let&apos;s get your account set up, it only takes a minute to send your first request.
              </div>
              <button className="mt-4 rounded-lg px-4 py-2 text-sm font-medium text-white" style={{ background: active.color }}>
                Get started
              </button>
            </div>
            <div className="border-t border-[#0000000d] px-6 py-4 text-[11px] text-[#9ca3af] dark:border-[#ffffff14]">
              Sent by {active.name} · You can unsubscribe at any time.
            </div>
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want email templates that auto-theme to the sender's brand? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a responsive HTML email template that themes itself from a company's brand: a thin accent-color bar at the very top, a white header containing the company logo, a body with a heading and paragraph, a call-to-action button filled with the brand's accent color, and a muted footer.

  Fetch the brand record from Brandfetch's Brand API (server-side so the key stays secret; get one at `https://developers.brandfetch.com/register`):

  ```
  GET https://api.brandfetch.io/v2/brands/domain/{domain}
  Authorization: Bearer YOUR_API_KEY
  ```

  Use `brand.colors.find(c => c.type === "accent").hex` for the accent bar and button, and render the header logo with the Logo API so it hotlinks and stays current: `https://cdn.brandfetch.io/domain/{domain}/type/logo?c=YOUR_CLIENT_ID`

  Keep the markup email-client-safe (table-based layout, inline styles).

  Use the Logo API the intended way: hotlink the CDN URL directly in the image `src`, don't download, cache, or re-host the file. Requests are free with a client ID and always return the brand's current logo.
</Prompt>

## Implementation

<Steps>
  <Step title="Resolve the prospect's domain">
    You usually have it already, the website on the CRM record, or the domain of a contact's email. If reps only have a company name, resolve it with [company autocomplete](/use-cases/company-autocomplete).
  </Step>

  <Step title="Fetch the brand">
    One [Brand API](/brand-api/overview) call returns the logos, colors, and fonts for the domain. Keep the call on your server so the API key stays secret, and cache the response by domain, the same account gets pitched more than once.

    ```bash theme={null}
    curl "https://api.brandfetch.io/v2/brands/domain/stripe.com" \
      --header "Authorization: Bearer YOUR_API_KEY"
    ```
  </Step>

  <Step title="Apply it to the template">
    Render logos straight from the [Logo API](/logo-api/overview) in an `<img>` tag, and use the accent color for headers, buttons, and highlights. If a domain can't be resolved, fall back to your default template, personalization is a layer, never a blocker.
  </Step>
</Steps>

## Pricing

Logos alone are free via the [Logo API](/logo-api/overview). Pulling colors and fonts costs one Brand API brand fetch per company, cached by domain, so a pipeline of hundreds of accounts means hundreds of requests, not thousands. See [plans](https://brandfetch.com/developers/pricing) for quotas.

## Measuring impact

Personalization is a conversion play, so measure branded collateral against generic templates: reply and meeting-booked rates on outreach, and engagement on decks and proposals that open in the prospect's brand.

Teams like [CyberRisk use this](https://brandfetch.com/developers/customers/cyberrisk) to carry client logos across decks, proposals, and white-label apps.

## Going further

<CardGroup cols={3}>
  <Card title="Brand API reference" icon="code" href="/reference/brand-api-domain">
    The full response shape: logos, colors, fonts, and company data.
  </Card>

  <Card title="Logo API" icon="image" href="/logo-api/overview">
    Hotlink logos and banners straight into decks and emails.
  </Card>

  <Card title="Get started" icon="rocket" href="https://developers.brandfetch.com/register">
    Create a free account and start building.
  </Card>
</CardGroup>