{BRANDS.map((b, i) => )}

{brand.name}

Get started Learn more

; }; 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](/docs/brand/introduction) 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 Theme generated content (a page, slide, or email) with a company's real brand using Logo.dev. * Fetch the brand server-side from the Logo.dev Brand API: GET [https://api.logo.dev/brand/:domain](https://api.logo.dev/brand/:domain) with header Authorization: Bearer LOGO\_DEV\_SECRET\_KEY. The response includes the company name, a ready-to-render logo URL, and an ordered palette of hex colors. * Pick an accent color by skipping near-neutral palette entries (black and white often lead the list). Fall back to a sensible default when every color is neutral. * Render the output with the logo in the header and the accent on primary buttons and highlights. * The logo field is an img.logo.dev URL and accepts size, retina=true, and format=webp parameters. For logo URLs built directly in client code, use [https://img.logo.dev/:domain?token=LOGO\_DEV\_PUBLISHABLE\_KEY\&size=32\&retina=true\&format=webp](https://img.logo.dev/:domain?token=LOGO_DEV_PUBLISHABLE_KEY\&size=32\&retina=true\&format=webp) * The secret key stays on the server; the publishable key is safe in client code. * Reference implementation: [https://www.logo.dev/docs/use-cases/brand-colors](https://www.logo.dev/docs/use-cases/brand-colors) ## 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. ```ts get-brand.ts theme={null} type Brand = { name: string; domain: string; logo: string; colors: { hex: string }[]; }; export async function getBrand(domain: string): Promise { const res = await fetch(`https://api.logo.dev/brand/${domain}`, { headers: { Authorization: `Bearer ${process.env.LOGO_DEV_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"; } ``` ```tsx BrandedHero.tsx theme={null} type BrandedHeroProps = { name: string; logoUrl: string; accent: string; headline: string; }; export function BrandedHero({ name, logoUrl, accent, headline, }: BrandedHeroProps) { return (

{headline}

); } ``` ```tsx Usage theme={null} import { BrandedHero } from "./BrandedHero"; import { getBrand, pickAccent } from "./get-brand"; export async function renderWelcome() { const brand = await getBrand("spotify.com"); return ( ); } ``` Your [publishable key](/docs/platform/api-keys) 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](/docs/brand/introduction) 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](/docs/logo-images/introduction#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](/docs/use-cases/brand-assets) pattern when you need banners too. * **Pair it with onboarding.** Get the domain from the user's work email with the [onboarding autofill](/docs/use-cases/onboarding-personalization) pattern, then theme their whole workspace. ## Next steps Get the full brand profile: logo, brandmark, banners, and colors. Capture the domain at signup and theme from day one.