# What goes in a brand kit, and how to keep it tidy

[Canonical HTML page](https://gradiently.design/guide/brand-kit)

The style guide says what to do. The brand kit is what people actually reach for. Get the files, formats and folders right and everyone makes on-brand work without asking.

## The short version

- A brand kit is the collection of ready-to-use files that lets anyone make on-brand work: logos, colour codes, fonts, backgrounds, templates, approved imagery and the style guide.
- Logos belong in the kit as an SVG for screens, a transparent PNG for everyday tools, and one-colour versions in black and white.
- Colour codes should appear in every notation people will need, usually hex and RGB for screens and CMYK for print.
- Backgrounds and templates are the most used and most often forgotten parts of a brand kit.
- A brand kit stays tidy when it has one home, one owner, clear file names and an archive folder for anything retired.

A **brand kit** is the set of ready-to-use files anyone needs to make something on-brand: logo files, colour codes, fonts, backgrounds, templates, approved images and a short style guide. Where the [brand style guide](https://gradiently.design/guide/brand-style-guide) explains the rules, the kit hands over the materials. A good kit means a freelancer, a new colleague or an AI assistant can start work in minutes without sending you a single question.

## The brand kit checklist

| Item | What to include | Why it matters |
| --- | --- | --- |
| Logo | SVG, transparent PNG, one-colour black and white, square avatar version | Every tool and background needs a different file |
| Colours | Names, hex, RGB and CMYK codes, with each colour's job | Stops people sampling colours from screenshots |
| Fonts | Font names with download links or files, plus licence notes | Avoids substitutes that change the whole feel |
| Backgrounds | Signature background at common sizes, CSS code, flat fallback colour | Fills the largest area of most designs |
| Templates | Your most common posts, stories, slides and email header | The fastest way to keep work consistent |
| Imagery | Approved photos, illustration or icon sets | Keeps stock images from creeping in |
| Style guide | The one-page rules as a PDF or link | Explains when to use each file |

Seven items. Most kits have the first three; the next three are where consistency actually comes from.

It helps to think about who opens the kit and what each person reaches for first:

- **A social media manager** wants templates and backgrounds at the right sizes
- **A web developer** wants the SVG logo, the colour codes as CSS and the font sources
- **A printer** wants the print logo, CMYK values and any spot colours
- **A new colleague** wants the one-page guide and one good example of each format
- **An AI assistant** wants the rules as plain text and the colours as codes

## Logo files: which formats you need

One logo, several files. Each format solves a different problem, and the wrong one is the usual cause of fuzzy, boxed or badly coloured logos.

| Format | Use it for | Watch out for |
| --- | --- | --- |
| SVG | Websites, apps and anything that scales | Some office and social tools won't accept it |
| PNG, transparent | Slides, documents, social tools, email | Export large, such as 2,000 px wide, so it stays sharp |
| PDF or EPS | Print, signage and merchandise | Send to printers, not to social media |
| JPEG | Almost never for logos | No transparency, so it arrives in a white box |

At minimum: SVG and transparent PNG of the main logo, plus white and black one-colour versions for photos and gradients.

Include a version that works on your signature background too. A logo that disappears on your own gradient is a common and avoidable problem; [putting a logo on a gradient](https://gradiently.design/guide/logo-on-gradient-background) explains the fixes.

## Colours, fonts and the rest of the basics

- Night blue: #0e1424
- Flour: #f3e6d0
- Oven glow: #e0823d
- Crust: #6b4a2f

Colours in a kit need names as well as codes. People remember "oven glow"; nobody remembers #e0823d.

```css
:root {
  --night-blue: #0e1424; /* rgb(14 20 36) grounds, 60% */
  --flour: #f3e6d0;      /* rgb(243 230 208) text and panels, 30% */
  --oven-glow: #e0823d;  /* rgb(224 130 61) accents only, 10% */
  --crust: #6b4a2f;      /* rgb(107 74 47) support */

  /* Signature background, with the flat fallback first */
  --ground: #0e1424;
  --ground-gradient: radial-gradient(90% 70% at 50% 110%, #e0823d 0%, #6b4a2f 25%, #1b2238 55%, #0e1424 100%);
}
```

Put a colours file in the kit for whoever builds your website. It saves a round of guessing from screenshots.

For fonts, note where each one comes from and what its licence allows. Many good typefaces are free on [Google Fonts](https://fonts.google.com); commercial fonts often need a licence per person or per website, so write that down. [How to choose brand fonts](https://gradiently.design/guide/brand-fonts) helps with the choice itself.

## Backgrounds and templates: the files people use most

Logos get the attention, but backgrounds and templates get the use. Prepare your signature background at the sizes you publish most, so nobody stretches a square image into a banner. Then build templates on top of it.

- Post 4:5: 1080 × 1350
- Story 9:16: 1080 × 1920
- Slide 16:9: 1920 × 1080
- Link preview: 1200 × 630
- Email header: 1200 × 600
- LinkedIn banner: 1584 × 396

Six sizes that cover most small brands. Render the background for each shape rather than cropping one image.

## A brand kit folder structure that stays tidy

```text
brand-kit/
  00-read-me-first.pdf          (the one-page style guide)
  01-logo/
    cornerloaf-logo-primary.svg
    cornerloaf-logo-primary.png
    cornerloaf-logo-white.png
    cornerloaf-logo-black.png
    cornerloaf-avatar-square.png
    print/cornerloaf-logo-primary.pdf
  02-colour/
    colours.css
    colours.pdf                 (hex, RGB, CMYK, names, jobs)
  03-type/
    fonts.txt                   (names, links, licence notes)
  04-backgrounds/
    ground-1080x1350.png
    ground-1080x1920.png
    ground-1920x1080.png
  05-templates/
  06-imagery/
  _archive/                     (retired files, never deleted)
```

Numbered folders keep the order, one read-me sits on top, and old files move to an archive rather than lingering beside new ones.

### Messy kit

- logo-final-v3-NEW-use-this.png
- Five copies of the kit in different drives
- Old and new colours side by side
- Fonts named but not linked

### Tidy kit

- brand-logo-white.png, named by what it is
- One home, linked from everywhere else
- Retired files moved to _archive
- Every font with its source and licence

## How to keep a brand kit up to date

1. **One home, one owner** Keep a single master copy and name one person who can change it. Everyone else links to it rather than downloading copies.
2. **Name files by what they are** Brand, item, variant, format. Never "final" or "new": they stop being true the next week.
3. **Archive, don't delete** When something is retired, move it to an archive folder. Old files next to new ones are how old colours come back.
4. **Review after every change** New template, new colour, new logo lock-up: update the kit the same day, then the style guide. See [brand consistency](https://gradiently.design/guide/brand-consistency) for why drift starts here.

Gradiently keeps a brand kit inside the Studio, with your logos, colours and fonts one click from every design, and the Designer applies it when it makes or edits work. If you run more than one brand, each gets its own kit and Marks. [Setting up your brand kit in Gradiently](https://gradiently.design/guide/brand-kit-setup) walks through it.

## FAQ

### What is a brand kit?

A brand kit is a collection of ready-to-use brand files: logos, colour codes, fonts, backgrounds, templates, approved imagery and a short style guide.

### What logo files should be in a brand kit?

An SVG and a transparent PNG of the main logo, white and black one-colour versions, a square avatar version, and a PDF or EPS for print.

### What is the difference between a brand kit and a style guide?

The style guide is the rules; the brand kit is the files. The kit should include the guide, and the guide should say where the kit lives.

### How do I share a brand kit with a freelancer?

Share a link to the one master folder, with the style guide on top. Avoid sending copies, which drift out of date.