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

# Brand kits

> Your brand's colors, fonts, logo, and voice, extracted from your website in one click.

A **brand kit** is the brand your agent builds with: name, colors, fonts, corner radius, logo, voice, and tagline. Kits are attached to domains, and your agent reads the kit before generating any page, so everything it ships looks and sounds like you.

Manage kits under **Settings → Brand Kits**.

<Frame caption="New brand kit: paste your website URL and granvl extracts the brand">
  <img src="https://mintcdn.com/granvl/0qlHX0uI9PHH2UJI/images/guides/brand-kit-new.png?fit=max&auto=format&n=0qlHX0uI9PHH2UJI&q=85&s=52912b8b6b81b93545754fe2f3f17dde" alt="New brand kit: paste your website URL and granvl extracts the brand" width="4258" height="917" data-path="images/guides/brand-kit-new.png" />
</Frame>

## Extract from your website

The fastest path: paste your website URL and granvl builds the kit for you.

<Steps>
  <Step title="Paste your URL">
    In **Settings → Brand Kits → New brand kit**, enter your site's URL (onboarding offers the same step). granvl visits the site, screenshots it, and reads its styles.
  </Step>

  <Step title="granvl extracts the brand">
    The palette comes from the pixels of your hero section, not from stylesheet color counts, so the primary color is the one that actually dominates your site. Fonts, logo, and legal-page links are detected too.
  </Step>

  <Step title="Review and tweak">
    The kit opens in the editor: adjust any color, swap fonts, upload a different logo, and write the voice line your agent should copy.
  </Step>
</Steps>

<Note>
  Extraction also saves screenshots of your site with the kit. Agents use them as a look-and-feel reference when generating pages, so new pages resemble the site they came from.
</Note>

## What's in a kit

| Field                                          | What it drives                                                           |
| ---------------------------------------------- | ------------------------------------------------------------------------ |
| **Colors** (primary, accent, background, text) | Buttons, links, section backgrounds on generated pages                   |
| **Fonts** (heading, body)                      | Typography, loaded with performance-safe patterns                        |
| **Radius** (sharp / medium / pill)             | Corner rounding on buttons and cards                                     |
| **Logo**                                       | Page headers and footers                                                 |
| **Voice**                                      | The tone your agent writes copy in (e.g. "confident, punchy, no jargon") |
| **Tagline**                                    | Available to the agent for heroes and footers                            |

## Brand Mode

Each kit has a **Brand Mode** toggle:

* **Off (default)**: the kit is a strong default. If you ask your agent for a red CTA, you get a red CTA.
* **On**: the brand is locked. Every variant must use the kit's palette and fonts; agents will ask before overriding.

## Agencies: one kit per domain

Kits attach to domains, so a workspace serving several brands carries several kits. Each domain's pages pull that domain's kit, and agents are instructed never to ship one brand's pages on another brand's palette.

## For your agent

Agents read and write kits over MCP: `get_brand_kit` returns the tokens, logo, voice, and extraction screenshots; `update_brand_kit` saves changes as your agent learns your brand. Values are baked into page HTML at generation time, so a kit change doesn't restyle existing pages automatically; ask your agent to re-skin them when you rebrand.