The Brand Identity Template Kit: Build Yours in 7 Files (Copy-Paste Ready)
Here's the moment every brand needs one: you open your website, your Instagram, and your pitch deck side by side — and they look like three different companies. Different blues. Two logos. A font you don't remember choosing. That drift happens because your brand lives in your head instead of in a file.
A brand identity template kit fixes that. It's a small, portable set of files that says "this is the exact blue, this is the type scale, this is how the logo breathes" — so anyone (including future you) can stay on-brand without guessing. Below is the whole thing, broken into 7 files you can assemble in about an hour, with two copy-paste blocks and a checklist you can save right now.
What's inside a brand identity template kit
Skip the 90-page brand bible. A working kit is 7 files:
01-brand-brief.md— one page: mission, audience, personality, tagline02-logo/— primary, secondary, and mark (favicon) + clear-space rules03-color.md— palette with HEX / RGB / CMYK and usage roles04-type.md— heading + body fonts and a fixed size scale05-voice.md— tone, do/don't phrases, sample sentences06-tokens.css— the whole system as code (the tools-audience power move)07-imagery.md— photo/illustration style + 3 reference links
Real brands run on exactly this compression. Airbnb's identity centers on one custom font (Cereal) and one red — "Rausch," #FF5A5F, named after the street of their first apartment. Stripe is essentially one "blurple," #635BFF, plus disciplined spacing. You don't need more surface area than the world's most recognizable brands — you need decisions written down.
Step 1 — Write the one-page brand brief
Before color or type, answer who this is for and how it should feel. Constraints make every later choice fast. Fill this in (it's your 01-brand-brief.md):
```markdown
Brand Brief — [Brand Name]
One-line mission: We help [audience] [do what] so they can [outcome]. Audience: [who, specifically — "freelance designers," not "everyone"] Personality (3 traits): [e.g. warm, precise, a little playful] We sound like: [a knowledgeable friend / a calm expert / a witty peer] We are NOT: [corporate, jargon-y, hype-driven] Tagline candidates: 1) ___ 2) ___ 3) ___ One competitor we refuse to look like: [name] — because [reason] ```
That last line does more work than it looks. "We refuse to look like [X]" forces contrast, which is the entire point of identity.
Step 2 — Lock your color palette
Pick one primary, one or two secondaries, and a neutral ramp. Document every color in three formats so it survives the jump from screen (RGB/HEX) to print (CMYK). Copy this spec into 03-color.md and replace the values:
```markdown
Color Palette
| Role | Name | HEX | RGB | CMYK | Use for | |--------------|--------------|----------|----------------|----------------|---------| | Primary | Brand Blue | #2B59FF | 43, 89, 255 | 83,65,0,0 | CTAs, links, logo | | Secondary | Signal Coral | #FF5A5F | 255, 90, 95 | 0,65,63,0 | Accents, highlights | | Ink | Near Black | #16181D | 22, 24, 29 | 24,17,0,89 | Body text | | Surface | Cloud | #F6F7F9 | 246, 247, 249 | 2,1,0,2 | Backgrounds | | Success | Go Green | #1DB954 | 29, 185, 84 | 84,0,55,27 | Positive states | ```
Real reference points to calibrate against: Spotify green is #1DB954, Slack's aubergine is #4A154B, Mailchimp's Cavendish Yellow is #FFE01B. Notice each brand owns one saturated color and surrounds it with restraint. Two rules that keep you out of trouble:
- 60/30/10 — 60% neutral, 30% secondary, 10% primary. Your bright color is a spice, not the meal.
- Check contrast. Text on a background should hit at least 4.5:1 (WCAG AA). Paste any two hex codes into a contrast checker before you commit — a coral button with white text often fails.
Step 3 — Choose and scale typography
Two typefaces, maximum: one for headings, one for body. If in doubt, use one superfamily (e.g. Inter for both) — that's what Netflix effectively did with the custom "Netflix Sans," and what Mailchimp does pairing its Cooper Light display face with a clean sans for text.
Then fix a modular scale so sizes are never arbitrary. This is the major-third (1.250) ratio on a 16px base — a real, widely used typographic scale. Drop it into 04-type.md:
```markdown
Type Scale (base 16px, ratio 1.250)
| Token | px | rem | Use | |-----------|-------|---------|-----------------| | xs | 12.8 | 0.80 | Captions, labels | | base | 16 | 1.00 | Body text | | lg | 20 | 1.25 | Lead paragraph | | xl | 25 | 1.563 | H3 | | 2xl | 31.25 | 1.953 | H2 | | 3xl | 39 | 2.441 | H1 | | 4xl | 48.8 | 3.052 | Hero |
Headings: [Font], weight 700, line-height 1.1 Body: [Font], weight 400, line-height 1.6 ```
Line-height matters as much as size: 1.1–1.2 for headlines, 1.5–1.6 for body. Tight headers, roomy paragraphs.
Step 4 — Set logo rules (the part people skip)
Your logo file isn't the rule — the usage is. In 02-logo/, add a short note:
- Clear space: keep empty margin equal to the height of your logo's key letter (e.g. the "x-height") on all sides.
- Minimum size: never smaller than 24px tall on screen / 15mm in print, so the mark stays legible.
- The mark: a square, simplified version for favicons and app icons.
- Three misuses to ban explicitly: don't stretch it, don't recolor it, don't put it on a low-contrast photo. Writing the "don'ts" prevents 90% of brand damage.
Step 5 — Write the voice & tone one-pager
Color and type are half your identity; the words are the other half. 05-voice.md:
```markdown
Voice & Tone
We sound: [clear, warm, confident — pick 3] Reading level: aim for grade 7–9 (short sentences, plain words)
| Instead of… | We say… | |--------------------------|----------------------------| | "Utilize the platform" | "Use it" | | "We apologize for the inconvenience" | "Sorry about that — here's the fix" | | "Best-in-class solution" | "[the specific thing it does]" |
Sample sentence (on-brand): "Pick a color. We'll handle the contrast math." ```
Turn your brand identity template kit into design tokens
This is where a brand identity template kit stops being a PDF nobody opens and becomes something your website, app, and Figma file all read from. Export every decision as design tokens — named variables. Save this as 06-tokens.css:
```css :root { / ---- Color ---- / --color-primary: #2B59FF; --color-secondary: #FF5A5F; --color-ink: #16181D; --color-surface: #F6F7F9; --color-success: #1DB954;
/ ---- Type ---- / --font-heading: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --text-base: 1rem; / 16px / --text-lg: 1.25rem; / 20px / --text-2xl: 1.953rem; / 31px — H2 / --text-3xl: 2.441rem; / 39px — H1 / --leading-tight: 1.1; --leading-body: 1.6;
/ ---- Spacing (8px grid) ---- / --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
/ ---- Radius & shadow ---- / --radius: 10px; --shadow: 0 4px 16px rgba(22,24,29,0.08); }
/ Usage / .button { background: var(--color-primary); font-family: var(--font-heading); padding: var(--space-1) var(--space-3); border-radius: var(--radius); } ```
Now a color change is one line, and it propagates everywhere. The same names (color-primary, space-2) map cleanly to Figma variables or a tokens.json — so designers and developers finally speak one language. That's the difference between a brand that drifts and a brand that scales.
Your quick-start brand identity template kit checklist
Save this. Tick every box and you have a real, shippable kit — no gaps.
```text BRAND IDENTITY TEMPLATE KIT — LAUNCH CHECKLIST
FOUNDATION [ ] One-page brief written (mission, audience, 3 personality traits) [ ] Tagline chosen from 3 candidates [ ] One competitor I refuse to look like — named
COLOR [ ] 1 primary + 1–2 secondary + neutral ramp defined [ ] Every color in HEX, RGB, and CMYK [ ] Text/background pairs pass 4.5:1 contrast [ ] 60/30/10 balance rule noted
TYPE [ ] Max 2 typefaces (heading + body) [ ] Modular size scale locked (e.g. 1.250 ratio) [ ] Line-heights set: 1.1 headers / 1.6 body