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

> ## Agent Instructions
> Flowy is a node-based AI creative platform: you generate images, video, audio, 3D and vector on an infinite Canvas, refine on the Studio timeline, and export or publish from the same project.
> Prefer the Flowy MCP server (https://mcp.tryflowy.ai/mcp) or the REST API at https://apis.tryflowy.ai/v1 for programmatic work. Install with `flowy mcp install` from the @flowy/cli package.
> Credits are workspace-scoped. Generations reserve credits on start and only deduct on success, so failed runs refund automatically.

# 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={`flowy-media-frame not-prose relative mx-auto my-6 w-full max-w-screen-md overflow-hidden ${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={`flowy-media-frame not-prose group relative mx-auto my-6 block w-full max-w-screen-md cursor-pointer overflow-hidden ${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="flowy-play-button rounded-full p-3 shadow-lg transition-all duration-300 group-hover:scale-110 group-active:scale-95">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="#1a1400" aria-hidden="true">
            <path d="M8 5v14l11-7L8 5z" />
          </svg>
        </div>
      </div>
    </button>;
};

The **Brand Kit** page, in the **Library** area alongside Assets and Elements, 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>