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

# Set Up a Brand Guide

> Centralize your logo, colors, fonts, and voice guidelines for consistent design

Your brand guide is a single source of truth for colors, fonts, logo variants, and voice. The AI uses it when generating designs and copy, so everything you ship stays on-brand — without someone manually checking every page.

<Info>
  Before you start: have your logo files and color hex codes handy. If you don't have them yet, don't worry — the AI can extract them from an existing site.
</Info>

## Where to Find It

**Marketing > Branding** — account-level guide shared across projects

Or

**Project > Settings > Brand** — project-level override for a single site

Account-level is usually what you want. Use project-level only when one project needs its own distinct brand (a subsidiary, a client project, etc.).

## What You Can Configure

### Logo

Upload variants:

* **Primary** — full-color, for light backgrounds
* **Dark mode** — inverted or monochrome white, for dark backgrounds
* **Monochrome** — single-color, for restricted applications (embroidery, stamping)
* **Icon-only** — the mark without wordmark, for favicons and avatars

Use SVG where possible — vector scales crisply. PNG is fine as a fallback; provide 2x and 3x for retina displays.

### Color Palette

Standard roles:

* **Primary** — the main brand color
* **Secondary** — a complement
* **Accent** — pops on CTAs, alerts, highlights
* **Success / Warning / Error** — semantic colors for UI states
* **Neutrals** — greys from background to body text

Enter hex values (`#F9A825`). The guide computes dark/light variations automatically so the AI has a full scale to work with.

### Typography

* **Heading font** — usually a display or semi-bold sans-serif
* **Body font** — optimized for reading at small sizes
* **Monospace** — for code blocks, tabular data

Pull from Google Fonts (auto-loaded) or upload custom webfonts (`.woff2`). Pair rarely needs more than 2–3 fonts — more leads to inconsistency.

### Voice and Tone

Short, opinionated guidelines the AI uses when writing. Example:

```
Tone: friendly, never stuffy.
Sentences: short. No run-ons.
POV: second person (you).
Avoid: corporate jargon, buzzwords, exclamation points, emoji.
Favor: concrete nouns over abstract ones.
```

The AI actually uses this. Vague guidelines ("professional but approachable") produce vague copy. Specific ones ("second person, short sentences, zero exclamation points") produce on-brand copy.

### Visual Style

Reference images, mood boards, or style screenshots. The AI picks up on visual cues (gradient treatments, photo style, illustration direction) when generating designs. Upload 5–10 reference images — more is overkill.

## Three Paths

<Tabs>
  <Tab title="AI Chat (Fastest)">
    In the project AI:

    ```
    Set up my brand guide.
    Primary color: #F9A825 (warm amber)
    Body font: Inter
    Heading font: Inter Tight
    Logo: /assets/logo.svg (already uploaded)
    Voice: conversational, concise, a little dry humor.
    Avoid exclamation points.
    ```

    The AI fills in the guide and offers to generate secondary/accent colors that work with your primary.
  </Tab>

  <Tab title="Manual UI">
    **Marketing > Branding > Edit**. Fill in each section directly. Good if you want precise control.
  </Tab>

  <Tab title="Extract from Existing Site">
    ```
    Extract my brand guide from https://acmeco.com
    ```

    The AI fetches the site, pulls computed styles, identifies the logo, and makes a first pass at colors, fonts, and voice (inferred from copy). Review and tweak before saving.
  </Tab>
</Tabs>

## How the AI Uses It

When you ask the AI to design a page, generate a social post, or draft copy, it automatically pulls:

* Colors for buttons, backgrounds, accents
* Fonts for headings and body text
* The current logo variant (light/dark based on page background)
* Voice guidelines for any generated copy

You can reference the brand guide explicitly in a prompt too:

```
Design a pricing page using my brand guide — match the voice
and don't deviate from the primary/accent color pair.
```

<Tip>
  If a design the AI produces doesn't feel on-brand, it's usually because the brand guide is vague. Tighten the voice section first (add 3 specific do/don'ts), then tighten the color section (specify which colors to use where — "primary for CTAs only, neutral-900 for body text"). Regenerate.
</Tip>

## Scope: Account vs. Project

<Steps>
  <Step title="Account-level (default)">
    Set in **Marketing > Branding**. All projects in the account use this guide by default.
  </Step>

  <Step title="Project-level override">
    In a specific project, go to **Settings > Brand** and flip **Override account brand guide**. Now this project uses its own guide.
  </Step>

  <Step title="When to override">
    Use the override when one project legitimately has different branding — a subsidiary, a client site, a microsite for a campaign. Don't override just to make one-off tweaks; edit the account guide if the change applies everywhere.
  </Step>
</Steps>

## Test It

<Steps>
  <Step title="Save the brand guide">
    After filling it in, click **Save**.
  </Step>

  <Step title="Ask the AI to design something">
    In the project AI: *"Design a hero section for a landing page"*. Review the output.
  </Step>

  <Step title="Check the colors">
    The primary/accent colors should match what you configured. If they don't, open browser DevTools on the rendered page and check computed styles — the CSS variables (`--primary`, `--accent`) should be your hex values.
  </Step>

  <Step title="Check the fonts">
    Headings should use your heading font; body should use body font. If fonts render as system fallbacks, see the troubleshooting below.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Colors look off on the live site">
    Usually caching. Hard refresh (Cmd+Shift+R / Ctrl+Shift+R). If that doesn't fix it, redeploy the site — brand guide changes don't automatically propagate to already-built pages. You may also need to clear the CDN cache in **Publishing > Hosting**.
  </Accordion>

  <Accordion title="Custom font isn't loading">
    Three things to check: (1) the font file uploaded successfully (check **Branding > Typography**); (2) the `@font-face` declaration references the right file path; (3) the font format is supported (`.woff2` is most compatible). For Google Fonts, just entering the family name should be enough — Hiveku injects the `<link>` automatically.
  </Accordion>

  <Accordion title="Logo looks pixelated or wrongly sized">
    Upload an SVG if you can — it scales perfectly at any size. For raster formats, upload at 2x and 3x the max display size. The browser picks the right one. A 200px logo should have a 400px @2x and 600px @3x variant.
  </Accordion>

  <Accordion title="AI-generated copy doesn't match the voice">
    Your voice guidelines are probably too vague. "Friendly, professional" is generic. Instead: "Start sentences with verbs where you can. No exclamation points. Use second person. Avoid jargon like 'leverage' and 'synergy'." Specific rules produce on-brand output.
  </Accordion>

  <Accordion title="AI ignores the brand guide entirely">
    Confirm the guide is enabled for the project — **Settings > Brand > Enabled**. Also try referencing it explicitly in prompts: *"Using my brand guide, design X"*. If still ignored, one common cause is a project-level override set to empty — check that the override isn't silently blanking out your account-level guide.
  </Accordion>
</AccordionGroup>

## What's Next?

<CardGroup cols={2}>
  <Card title="Customer Journey" icon="route" href="/how-tos/customer-journey">
    Apply the brand consistently across journey touchpoints
  </Card>

  <Card title="Content Pillars" icon="layer-group" href="/how-tos/content-pillars">
    Organize social content and keep the voice consistent
  </Card>

  <Card title="Build with AI" icon="wand-magic-sparkles" href="/how-tos/build-with-ai">
    Let the AI design on-brand pages for you
  </Card>
</CardGroup>