# 5. Brand Kits & Projects

Before you build your first page, set up a brand kit and a project. Both are reusable — you do this once and every page generation afterwards inherits from them.

## Brand kits

A brand kit is the reusable identity for your business or your client's business: logo, hero image, colours, fonts, voice, and word preferences. When you attach a brand kit to a project, every page generated in that project automatically uses that identity.

You can have **unlimited brand kits** on any paid plan. Most agencies create one kit per client.

### What's in a brand kit

Each kit holds the following fields. All of them are optional except **Name**, but the more you fill in, the better the AI can match your brand.

**Identity**

* **Name** — Internal label for the kit (e.g. "Acme Corp", "Coaching Brand").
* **Business name** — The brand name that appears on the generated page.

**Visuals**

* **Logo URL** — A direct URL to your logo image (SVG or PNG with transparency works best).
* **Hero product image URL** — A hero image used in the page's first section.
* **Primary colour** — The dominant brand colour, used for headlines and primary buttons.
* **Secondary colour** — Backgrounds and supporting surfaces.
* **Accent colour** — Highlights and secondary CTAs.
* **Font pairing** — A heading + body font pairing (you'll see a dropdown of curated pairings).

**Voice**

* **Voice tags** — Tags that describe how your brand sounds (e.g. "punchy, authoritative, witty").
* **Include phrases** — Words or short phrases you want the AI to use (e.g. your tagline).
* **Avoid phrases** — Words or phrases the AI should never use (e.g. "synergy", competitor names).
* **Footer content** — Custom footer text, links, or boilerplate that goes on every page.

If you leave colour fields blank, the AI uses HypaSites' defaults (electric orange primary, ink-dark secondary, amber accent).

### Creating a brand kit

1. Go to **Dashboard → Brand Kits**.
2. Click **New Brand Kit**.
3. Fill in the fields. You can leave any of them blank and edit later.
4. Click **Save**.

The kit is created immediately and is now available to attach to any project.

### Editing a brand kit

From the brand kits list, click any kit to open the edit screen. Make your changes and click **Save**. Changes apply to **future** generations — pages you've already built keep the identity they were generated with.

### Brand kit limit

On any active paid plan, you get unlimited brand kits. The brand kits list shows the count at the top of the page (e.g. *"4 of unlimited brand kits"*).

## Projects

A project is a container for related pages. Most users create one project per client, product, or campaign.

### What a project gives you

* A folder for grouping pages together
* An optional attached **brand kit** that all pages in the project inherit
* An optional **custom domain** (e.g. `landing.acme.com`) used across all pages in the project
* A **colour tag** for visual organisation in the projects list

### Creating a project

1. Go to **Dashboard → Projects**.
2. Click **New Project** (top right).
3. Fill in:
   * **Project Name** (required) — e.g. "Acme Q3 Launch".
   * **Description** (optional) — A short note for yourself or your team.
   * **Colour Tag** — Pick a colour from the swatches. Used to make the project card distinct in the list.
   * **Brand Kit** — Pick from the dropdown of brand kits you've created. Leave blank if you don't have one yet.
4. Click **Create project**.

You'll land on the project detail page. A default **"General"** campaign is created inside the project automatically — you don't need to interact with this unless you want to organise pages into sub-groups later.

### Attaching or changing the brand kit

If you skipped the brand kit when creating the project, or you want to change it later:

1. Open the project from the projects list.
2. Find the **Brand Kit** section in the project settings.
3. Use the picker to select a different kit.
4. Save.

Future generations in this project will use the new kit. Existing pages keep the kit they were generated with.

### Attaching a custom domain

You can connect a custom domain (like `landing.yourbusiness.com`) to a project so every page published from that project uses your domain instead of `hypasites.com`.

1. Open the project.
2. Find the **Domain Settings** section.
3. Enter your custom domain.
4. Follow the DNS instructions shown on screen.
5. Wait for verification (usually a few minutes; can take up to 24 hours depending on your DNS provider).

Once verified, all pages in this project will publish to `https://[subdomain].yourbusiness.com` instead of `https://[subdomain].hypasites.com`. SSL is provisioned automatically.

Domain setup is covered in detail in Chapter 8.

### Archiving a project

You can archive projects you no longer need. Archived projects are hidden from the main list but their pages stay published. To archive, open the project and click **Archive project** in the settings. You can restore an archived project at any time.

## Organising your work

A typical setup looks like this:

```
Workspace: "My Agency"
├── Brand Kit: Acme Corp
├── Brand Kit: Beta Coaching
│
├── Project: Acme Q3 Launch (brand kit: Acme Corp)
│   ├── Page: Lead magnet — Free guide
│   ├── Page: Webinar registration
│   └── Page: Main sales page
│
└── Project: Beta Coaching offer (brand kit: Beta Coaching)
    ├── Page: Application form
    └── Page: Discovery call booking
```

If you only have one brand, one brand kit and one project is enough. The structure scales with you.

The next chapter covers actually building a page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hypasites.gitbook.io/hypasites-docs/user-guide/05-brand-kits-and-projects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.