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.
On this page
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 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 |
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 |
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 explains the fixes.
Colours, fonts and the rest of the basics
: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%);
}For fonts, note where each one comes from and what its licence allows. Many good typefaces are free on Google Fonts; commercial fonts often need a licence per person or per website, so write that down. How to choose 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
A brand kit folder structure that stays tidy
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)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 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 walks through it.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
