Sales personalization

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 returns all three in one call, so a template restyles itself the moment a user types a domain.

Preview
Code

SlideThemeSwitcher.tsx

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>
  );
}

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.

Open in Cursor

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 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.

Preview
Code

BrandedEmail.tsx

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>
  );
}

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.

Open in Cursor

Implementation

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.

Fetch the brand

One Brand API 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.

curl "https://api.brandfetch.io/v2/brands/domain/stripe.com" \
  --header "Authorization: Bearer YOUR_API_KEY"

Apply it to the template

Render logos straight from the Logo API 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.

Pricing

Logos alone are free via the Logo API. 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 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 to carry client logos across decks, proposals, and white-label apps.

Going further

Brand API reference

The full response shape: logos, colors, fonts, and company data.

Logo API

Hotlink logos and banners straight into decks and emails.

Get started

Create a free account and start building.

Use cases

Sales & ABM

Product & PLG

Finance

AI Workflows

Sales personalization

Personalize decks and presentations

Convert with branded emails

Implementation

Pricing

Measuring impact

Going further

Brand API reference

Logo API

Get started

​Personalize decks and presentations

​Convert with branded emails

​Implementation

​Pricing

​Measuring impact

​Going further

Brand API reference

Logo API

Get started

Personalize decks and presentations

Convert with branded emails

Implementation

Pricing

Measuring impact

Going further