Skip to main content
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

The Brand Guides card in Marketing

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

Northwind's guide

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

Edit, at the top of the guide

​
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

Northwind's primary logo

​
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

Northwind's main colors

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

The colors together

​
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

The heading font

Body Font with the Font Family Inter outlined and Line Height 1.5

The body font

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

Northwind's type scale

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

Save Changes

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

Saved as version 4

​
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

The export formats

​
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 sets up the words, not just the look.