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

# Brand Kit

> Capture your brand's logos, colors, and fonts in one kit and apply it across your canvases.

export const VideoPlayer = ({src, poster, aspectRatio = "16 / 9", title, className = ""}) => {
  const [playing, setPlaying] = useState(false);
  if (playing) {
    return <div className={`not-prose relative mx-auto my-6 w-full max-w-screen-md overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 ${className}`} style={{
      aspectRatio
    }}>
        <video src={src} controls autoPlay playsInline className="h-full w-full object-contain" />
      </div>;
  }
  return <button type="button" aria-label={title ? `Play video: ${title}` : "Play video"} style={{
    aspectRatio
  }} className={`not-prose group relative mx-auto my-6 block w-full max-w-screen-md cursor-pointer overflow-hidden rounded-2xl border border-gray-950/10 bg-gray-100 dark:border-white/10 dark:bg-white/5 ${className}`} onClick={() => setPlaying(true)}>
      <img src={poster} alt={title || "Video thumbnail"} className="h-full w-full cursor-pointer object-cover" />
      <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/80 to-transparent sm:h-28" />
      <div className="absolute bottom-6 flex w-full items-center justify-between px-6">
        <p className="max-w-sm text-left text-lg font-semibold leading-tight text-white">
          {title}
        </p>
        <div className="rounded-full p-3 shadow-lg transition-all duration-300 group-hover:scale-110 group-active:scale-95" style={{
    backgroundColor: "#5C9987"
  }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">
            <path d="M8 5v14l11-7L8 5z" />
          </svg>
        </div>
      </div>
    </button>;
};

A brand kit packages your brand's identity — logos, colors, fonts, and brand imagery — so every generation in the workspace can draw from the same source. Build the kit once, then apply it wherever you create.

<VideoPlayer src="/videos/dashboard/brand-kit.mp4" poster="/images/posters/dashboard/brand-kit.jpg" title="Watch: build a brand kit and apply it on the canvas" />

## What's in a kit

Each kit holds:

* **Logos** — your marks in the formats you use.
* **Colors** — the brand palette as hex values.
* **Fonts** — the typefaces your brand sets its type in.
* **Brand images** — reference imagery that captures the brand's look.

Kits also carry a name and industry, which helps keep multiple kits organized when you work across brands.

## Create a kit from a website

The fastest way to build a kit is to extract one. Paste a brand's website URL into the Brand Kit page and Flowy pulls the logos, colors, fonts, and imagery from the site automatically. Extraction runs in the background — the kit shows as processing while it works, and you can keep using the dashboard in the meantime. If an extraction fails, retry it from the same card.

## Review and edit

Open any kit to review what was captured. You can adjust the colors, fonts, and logos — add what the extraction missed, remove what doesn't belong — then save your changes. Kits display in a grid or list, and deleting one asks for confirmation first.

<Note>
  How many brand kits you can keep depends on your plan. See [Plans](/billing/plans) for what each tier includes.
</Note>

## Apply a kit on the canvas

Brand kits do their real work in the editor. Add a **Brand Kit node** to your canvas and connect it into your workflow so generations inherit your brand's look. See [Utility Nodes](/canvas/nodes/utility-nodes) for how the node fits into a graph.

<Tip>
  Kits are workspace-scoped: build one per brand, and every project in that workspace can use it.
</Tip>