Skip to main content
AI builders, slide tools, and email generators all hit the same wall: the output looks like a template until it carries the customer’s brand. The fix is the customer’s real logo and accent color, applied automatically. A user types a domain, and the generated page comes back wearing their logo and their colors. The Brand API returns both in one request, so theming costs your pipeline a single fetch.

​
Demo

Pick a brand and watch the page mockup re-theme: The accent colors above are real GET /brand/:domain responses, fetched once and inlined because the Brand API takes a secret key.

​
Build it with AI

Want on-brand output in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

​
Code

This example is in React, but you can get the same result in any frontend framework: the pattern is one fetch, one accent pick, and inline styles. Fetch the brand with get-brand.ts, then hand the logo and accent to whatever renders your output. 
type Brand = {
  name: string;
  domain: string;
  logo: string;
  colors: { hex: string }[];
};

export async function getBrand(domain: string): Promise<Brand> {
  const res = await fetch(`https://api.logo.dev/brand/${domain}`, {
    headers: { Authorization: `Bearer ${process.env.LOGODEV_SECRET_KEY}` },
  });
  if (!res.ok) {
    throw new Error(`Brand lookup failed: ${res.status}`);
  }
  return res.json();
}

// The palette is ordered, but black and white often lead it.
// Take the first color saturated enough to work as an accent.
export function pickAccent(colors: { hex: string }[]) {
  const isNeutral = (hex: string) => {
    const [r, g, b] = [1, 3, 5].map((i) =>
      parseInt(hex.slice(i, i + 2), 16)
    );
    return Math.max(r, g, b) - Math.min(r, g, b) < 30;
  };
  return colors.find((c) => !isNeutral(c.hex))?.hex ?? "#18181b";
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is. Your secret key powers the get-brand.ts fetch and stays on the server.

​
How it works

  • Each brand is one request. GET /brand/:domain from the Brand API returns the name, logo URL, and an ordered color palette together, so a generation pipeline adds exactly one fetch.
  • The logo URL is ready to use. The logo field is an img.logo.dev URL that accepts the usual size, format, and theme image parameters, so the same response themes a thumbnail or a hero.
  • Neutrals need filtering. Palettes often lead with black or white, so pickAccent skips low-saturation colors and buttons never render in #000.

​
Make it your own

  • Reuse the theme for slides and emails. The same logo and accent pair drives a slide master, an email header, or a PDF cover. Import the full kit with the brand asset import pattern when you need banners too.
  • Pair it with onboarding. Get the domain from the user’s work email with the onboarding autofill pattern, then theme their whole workspace.

​
Next steps

Brand API

Get the full brand profile: logo, brandmark, banners, and colors.

Onboarding personalization

Capture the domain at signup and theme from day one.