> ## 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 Your Logo, Colors and Fonts

> Put your logos, brand colors and fonts in your brand guide, so the pictures, posts and pages the AI makes for you use them

Your brand guide keeps your logos, colors and fonts in one place. The AI reads it when it makes pictures, writes posts and builds pages for you, so set it up once and keep it up to date.

This guide goes through Northwind's guide: its round logo, its burnt orange, forest green and cream, and its two fonts.

## Open your brand guide

**1. Open Brand Guides**

In the left rail, click **Marketing**, then the **Brand Guides** card.

![The Marketing page cards, with the Brand Guides card outlined](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-01-open-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=16192a67bc5d02102b0f20b9f4b00d8f)

**2. Pick your guide**

**All Brands** lists your guides. Click yours. (No guide yet? Click **New Brand**.)

![Brand Guides with the Northwind Coffee Roasters guide card, marked Default and Active, and the New Brand button outlined](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-02-all-brands-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=b8c5381aaff58f51e14a1e3bb094da29)

**3. Click Edit**

The guide opens with its tabs. Click **Edit** at the top right.

![The Northwind Coffee Roasters guide, Version 3, Active and Default Brand, with the Edit button outlined and the Colors, Typography and Brand Voice tabs below](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-03-edit-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=04cafa2beb17f1d509a18c47e8179606)

## Add your logos

Click the **Logos** tab. Each kind of logo has its own space: **Primary Logo**, **Primary Logo (Dark)** for dark backgrounds, **Secondary Logo**, **Icon/Mark** (the symbol on its own), **Monochrome** and **Favicon** (the small picture in the browser tab). Click the upload link under a space, for example **Upload Primary Logo**, and pick the file: PNG, JPEG, GIF, WebP or SVG (the **Favicon** also takes ICO), up to 5 MB.

![The Logos tab with the Northwind logo as the Primary Logo, the other five spaces reading No logo, and Upload Primary Logo outlined](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-04-logos-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=6e49af97f42a8a71807921cc71ed9249)

## Set your colors

**1. Type your color codes**

On the **Colors** tab, type each color's code (for example #C4622A) in the box next to it. Start with **Primary**, **Secondary** and **Accent**. Their lighter and darker shades sit next to them, and the background, text, message and border colors further down.

![Primary Colors and Secondary and Accent Colors, with the Primary C4622A, Secondary 2D5A3D and Accent F5EDD6 boxes outlined](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-05-colors-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=a1fc032d63bcaadf9d3e261b7cc1af6c)

**2. Check the Color Preview**

Scroll down to **Color Preview** to see your colors side by side.

![Color Preview with seven swatches: burnt orange, forest green, cream, green, amber, red and forest green](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-06-color-preview-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=2136e7bffd0663bf26488ddc01d9f35f)

## Choose your fonts

**1. Pick the heading and body fonts**

On the **Typography** tab, pick the **Font Family** under **Heading Font** (titles) and under **Body Font** (everything else). **Line Height** sets the space between lines.

![Heading Font with the Font Family Playfair Display outlined and Line Height 1.2](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-07-heading-font-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=5ca058ecf4929556a568f8ffaec5e38d)

![Body Font with the Font Family Inter outlined and Line Height 1.5](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-08-body-font-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=430bd099e9ae8db6ce5d29d366dc7d7d)

**2. Check the Type Scale**

Under **Type Scale**, the **Scale Ratio** sets how much bigger each heading size is than the one below, and **Base Font Size** sets the size of ordinary text.

![Type Scale with the Scale Ratio Perfect Fourth (1.333) outlined and Base Font Size 16px](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-09-type-scale-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=9f073f884b72a22b325f0c75e49c52ea)

Your brand uses a font that is not in the list? Under **Custom fonts**, drop in the font files (.woff2, .woff, .ttf or .otf, up to 10 MB each). They are added as soon as they upload and show in every font list; **Save Changes** and **Cancel** don't affect them.

## Save your changes

Click **Save Changes** at the top right.

![The top of the guide in edit mode with Cancel and the Save Changes button outlined](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-10-save-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=4f957d2958ef16d6087f79f388a9743e)

The page says **Brand saved successfully**, and the guide's version number goes up by one.

![The Northwind Coffee Roasters guide with Specialty Coffee, Version 4 outlined](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-11-saved-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=ffe7c124982988601967eba380e4f6eb)

## Hand it to a developer

The **Export** tab downloads your brand as **CSS Variables**, a **Tailwind Config**, **SCSS Variables** or **JSON**, ready for someone building a site or an app outside Hiveku.

![The Export tab with CSS Variables and Tailwind Config outlined, and SCSS Variables and JSON below](https://mintcdn.com/locusdigital/ySIXV0mU_PFKnBAx/images/how-tos/content/brand-12-export-closeup.webp?fit=max\&auto=format\&n=ySIXV0mU_PFKnBAx\&q=85\&s=fe1b06b2bd8d7c3aced5ee87e4375c9a)

## Good to know

* **Your website does not change on its own.** Its look is part of its code. To bring new colors or fonts to your site, ask the AI in the site builder, for example "Use the colors and fonts from my brand guide on every page."
* **More than one guide?** The AI uses your default guide, marked **Default** and with a star. On **All Brands**, click **Make default** on another guide to switch.
* **Logos in helpdesk emails.** Email apps can't show some image types, such as SVG and WebP. If your **Primary Logo** is one of them, the **Logos** tab says so, and helpdesk emails use the logo in **Settings > General** instead.
* **Next:** [Tell the AI How Your Brand Sounds](/how-tos/content/brand-voice) sets up the words, not just the look.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.