How to build a brand kit that applies itself to every template

A brand kit is a small saved record of how your brand looks and sounds. It holds a name, a tone of voice, a list of colours, your logo files, and your font files. Once it exists, you pick it in the editor, in the AI chat, or with one field in an API request, and every PDF and image that you make after that uses your colours, your logo, and your fonts. This guide shows what goes in a kit, how to make one in a few minutes, and how a template reads it.

What a kit holds

Files and uploads share one limit of 100 files and 100 MiB per account. You can keep as many kits as you like within that limit, one for each brand or each client, and making or editing a kit is free.

This event image gives you a design to use with your kit. Copy its HTML and sample data, then ask the editor chat to apply your brand colours and fonts.

HTML

HTML for this image

Step 1: make the kit

Sign in and open Brand kits. Choose New kit, give it a name, and write one or two sentences of tone guidance, such as "Plain and warm. Short sentences. No jargon." Then pick your colours with the colour picker. The order matters: the first colour is the primary, the second is the secondary, and the third is the accent, because that is how templates read them.

Every kit on this page is separate. A change to one kit never touches another, so an agency can keep one kit per client and switch between them with one click.

Step 2: add the logo and fonts

Open the kit and upload your logo. Use the largest clean file you have, and prefer PNG or WebP when the logo needs a transparent background. thirds.ai reads the whole file, not only the header, so a broken or animated file is refused with a clear message before it can reach a render.

Then add the fonts. A font must be a WOFF2 file, and thirds.ai fully checks it before it is stored. If you do not have brand fonts, choose Inter or Space Grotesk from the built-in list. Each choice goes through the same checked upload route as your own file.

The preview on the right updates as you change things, so you see the palette and the logo together before you use them anywhere.

Step 3: pick the kit where you work

There are three places to pick a kit, and all three do the same thing.

• In the editor, choose the kit for the working template. The editor saves that choice in the source, so the template remembers its default kit.
• In the AI chat, pick the kit before you send your first message. The draft comes back in your colours and fonts, and the tone guidance shapes the words. A new AI build costs 50 credits, and each later message costs 10.
• In the API, send brand_kit_id with a PDF or image request. This overrides the default that the template saved.

curl --fail-with-body --silent --show-error https://thirds.ai/v1/pdf \
  -H 'Authorization: Bearer YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -H 'Idempotency-Key: YOUR_UNIQUE_PDF_REQUEST' \
  --data '{"template_id":"tpl_00000000000000000000000000000000","version":1,"brand_kit_id":"kit_00000000000000000000000000000000","data":{"title":"Quarterly report"}}'

The same field works on POST /v1/image. A kit change applies to new requests. A job that already started keeps the colours and files it captured, so a finished file never changes under you.

How a template reads the kit

When a kit is selected, thirds.ai adds one reserved brand value to the template data before it renders. Your own data must not contain a brand key, or the request fails with brand_data_conflict. The template reads the kit like this.

A template that uses these fields looks like ordinary HTML with a few {{ }} marks in the style block and the header.

<style>
  @font-face {
    font-family: "{{ brand.fonts[0].family }}";
    src: url("{{ brand.fonts[0].src }}") format("woff2");
  }
  body {
    font-family: "{{ brand.fonts[0].family }}", sans-serif;
    color: {{ brand.colours.primary }};
  }
  .bar {
    background: {{ brand.colours.accent }};
  }
</style>
<header>
  <img src="{{ brand.logo }}" alt="{{ brand.name }}" />
</header>

Add enough colours, a logo, or a font to the kit before a template reads that value, because a missing value fails with a clear error rather than a blank space. The gallery templates already use these fields, so a copied Client invoice or Event promo takes your kit without any edits.

What happens at render time

The kit is mutable, but a render is not. When a job starts, thirds.ai captures the kit's colours, tone, and the exact logo and font files into the job. The renderer gets those bytes from a private snapshot and never fetches them from the network. That is why a kit change never alters a queued or finished file, and why every saved template version keeps working after you replace a logo. The old file stays stored, and the kit's current list shows only the new one.

Your logo and font bytes stay private. They never appear in a public URL, a log line, or an error message, and the renderer receives no account credentials.

A few tips

• Put the primary colour first, the secondary second, and the accent third, so every template agrees on which is which.
• Upload the logo that goes on a light background as the first logo, because brand.logo is the first one.
• Write the tone guidance for a person, not a machine. "Friendly, short, no exclamation marks" works better than a list of brand values.
• Keep one kit per brand. Do not add a client's colours to your own kit.
• Archive a kit you no longer use. It stays readable, but it cannot receive new files or start new renders with changed values.

Read next

• The brand kits page shows one brand applied to a document and an image.
• Design and edit a template explains the AI chat and the editor.
• Use templates with your data explains fields, schemas, and versions.
• Create branded PDFs and images from words, HTML, or a picture introduces every way to start.

Sign in to make your first brand kit. It is free, and every file you make after that comes out on brand.