2. Display Branded Content in Your App

Fetch a customer's brand data and dynamically theme your UI with their colors and fonts using CSS custom properties.

What you'll build

A React component that applies a customer's brand colors and fonts as CSS variables, making any child component automatically brand-themed.

Step 1: Fetch brand data

Assuming you've already parsed the brand and stored the brandId, fetch the brand data:

const API_KEY = process.env.BRANDPARSER_API_KEY!;
const BASE_URL = "https://api.brandparser.com";

async function getBrand(brandId: string) {
  const res = await fetch(`${BASE_URL}/v1/api/brands/${brandId}`, {
    headers: { Authorization: `Bearer ${API_KEY}` },
  });
  const { data } = await res.json();
  return data;
}

Step 2: Map brand data to CSS variables

Extract the colors and fonts you need and convert them to CSS custom properties:

type BrandTheme = {
  "--brand-primary": string;
  "--brand-primary-hover": string;
  "--brand-text": string;
  "--brand-text-on-primary": string;
  "--brand-background": string;
  "--brand-font-family": string;
  "--brand-font-url"?: string;
};

function brandToTheme(brand: any): BrandTheme {
  const colors = brand.analysis.colors;
  const fonts = brand.analysis.typography.font_families;
  const buttons = colors.button_colors?.[0];
  const primaryColor = colors.primary_palette[0];
  const mainFont = fonts[0];

  return {
    "--brand-primary": primaryColor.hex,
    "--brand-primary-hover": buttons?.hover_background_hex ?? primaryColor.hex,
    "--brand-text": colors.primary_palette.find(
      (c: any) => c.category === "text" || c.usage?.includes("text")
    )?.hex ?? "#0F172A",
    "--brand-text-on-primary": buttons?.text_hex ?? "#FFFFFF",
    "--brand-background": colors.supporting_colors?.[0]?.hex ?? "#FFFFFF",
    "--brand-font-family": `"${mainFont.name}", system-ui, sans-serif`,
    ...(mainFont.availability?.google_fonts_css_url && {
      "--brand-font-url": mainFont.availability.google_fonts_css_url,
    }),
  };
}

Step 3: Build the BrandProvider component

A React component that loads the brand font and applies CSS variables to all children:

// components/brand-provider.tsx
import { type CSSProperties, type ReactNode } from "react";

type BrandProviderProps = {
  theme: Record<string, string>;
  children: ReactNode;
};

export function BrandProvider({ theme, children }: BrandProviderProps) {
  const fontUrl = theme["--brand-font-url"];

  // Filter out non-CSS properties before passing to style
  const cssVars = Object.fromEntries(
    Object.entries(theme).filter(([key]) => key.startsWith("--"))
  );

  return (
    <>
      {fontUrl && (
        <link rel="stylesheet" href={fontUrl} />
      )}
      <div style={cssVars as CSSProperties}>
        {children}
      </div>
    </>
  );
}

Step 4: Use the brand variables in your components

Any component inside BrandProvider can reference the CSS variables:

// components/branded-card.tsx
export function BrandedCard({
  title,
  description,
  ctaText,
}: {
  title: string;
  description: string;
  ctaText: string;
}) {
  return (
    <div
      style={{
        backgroundColor: "var(--brand-background)",
        fontFamily: "var(--brand-font-family)",
        padding: "2rem",
        borderRadius: "12px",
        border: "1px solid #e2e8f0",
      }}
    >
      <h2 style={{ color: "var(--brand-primary)", margin: "0 0 0.5rem" }}>
        {title}
      </h2>
      <p style={{ color: "var(--brand-text)", margin: "0 0 1.5rem" }}>
        {description}
      </p>
      <button
        style={{
          backgroundColor: "var(--brand-primary)",
          color: "var(--brand-text-on-primary)",
          border: "none",
          padding: "0.75rem 1.5rem",
          borderRadius: "8px",
          fontFamily: "var(--brand-font-family)",
          fontWeight: 600,
          cursor: "pointer",
        }}
      >
        {ctaText}
      </button>
    </div>
  );
}

Step 5: Wire it together in Next.js

Fetch the brand on the server and pass the theme to the client:

// app/customer/[customerId]/page.tsx
import { BrandProvider } from "@/components/brand-provider";
import { BrandedCard } from "@/components/branded-card";

const API_KEY = process.env.BRANDPARSER_API_KEY!;
const BASE_URL = "https://api.brandparser.com";

async function getBrandTheme(brandId: string) {
  const res = await fetch(`${BASE_URL}/v1/api/brands/${brandId}`, {
    headers: { Authorization: `Bearer ${API_KEY}` },
    next: { revalidate: 3600 }, // Cache for 1 hour
  });
  const { data } = await res.json();

  const colors = data.analysis.colors;
  const fonts = data.analysis.typography.font_families;
  const buttons = colors.button_colors?.[0];
  const primaryColor = colors.primary_palette[0];
  const mainFont = fonts[0];

  return {
    "--brand-primary": primaryColor.hex,
    "--brand-primary-hover": buttons?.hover_background_hex ?? primaryColor.hex,
    "--brand-text": "#0F172A",
    "--brand-text-on-primary": buttons?.text_hex ?? "#FFFFFF",
    "--brand-background": colors.supporting_colors?.[0]?.hex ?? "#FFFFFF",
    "--brand-font-family": `"${mainFont.name}", system-ui, sans-serif`,
    "--brand-font-url":
      mainFont.availability?.google_fonts_css_url ?? "",
  };
}

export default async function CustomerPage({
  params,
}: {
  params: { customerId: string };
}) {
  // Look up the brandId for this customer from your database
  const brandId = await getBrandIdForCustomer(params.customerId);
  const theme = await getBrandTheme(brandId);

  return (
    <BrandProvider theme={theme}>
      <BrandedCard
        title="Welcome back"
        description="Here's your latest report."
        ctaText="View Report"
      />
    </BrandProvider>
  );
}

Tips

Cache aggressively -brand data changes rarely. Use next: { revalidate: 3600 } or store the theme in your database after first fetch.
CSS variables cascade -any nested component automatically inherits the brand theme. No prop drilling needed.
Tailwind integration -you can reference CSS variables in Tailwind classes: className="bg-[var(--brand-primary)]".

Next steps

Generate branded emails -use the same brand data to build email templates
White-label your SaaS -scale this pattern to multi-tenant theming
Colors schema -full color response reference
Typography schema -full typography response reference

2. Display Branded Content in Your App

On this page