# Brand guidelines — [Company]

> Template by Funky Rabbit — https://funky-rabbit.com/resources/saas-brand-guidelines-template/
> Free to copy, edit and ship under your own name. No attribution required.
> Replace every [bracket]. Delete every section you cannot fill in honestly —
> a short document people follow beats a long one they skim once.

**Owner:** [name, role — one person, not "marketing"]
**Version:** [1.0] · **Last updated:** [YYYY-MM-DD]
**Source of truth:** [link to the Figma file / token repo]
**Ask for an exception:** [channel or person]

---

## 1. How to use this document

This is a decision cache. Everything here was decided once so that nobody has
to re-decide it in a Slack thread on a Friday.

- If you are making something and the answer is here, follow it.
- If the answer is not here, make the call, ship, and tell [owner] — the gap
  gets written down the same week.
- If the answer is here and it is wrong for your case, ask for an exception.
  Exceptions are fine; silent divergence is not.

**Reviewed:** [cadence — quarterly is enough for most teams].

---

## 2. What we are

**One sentence:** [What you do, for whom, and what changes for them.]

**Who it is for:** [The buyer and the user, if they are different people.]

**What we are not:** [The two or three adjacent things people mistake you for.]

**Proof we can use in public:** [Named customers, numbers you are allowed to
print, awards. If a number is not on this list, it does not go on a slide.]

---

## 3. Voice

**Three traits:** [e.g. direct · concrete · unhurried]

For each trait, one line on what it means here and one on what it is not.

| We sound | We do not sound |
|---|---|
| [Direct — the verb comes early, the claim comes first] | [Breathless — "revolutionary", "game-changing"] |
| [Concrete — nouns a customer would use] | [Abstract — "solutions", "synergies", "leverage"] |
| [Unhurried — we can say "it depends" and then say what it depends on] | [Salesy — urgency we have not earned] |

**Five real sentences** — copy from shipped work, not written for this page:

1. [sentence]
2. [sentence]
3. [sentence]
4. [sentence]
5. [sentence]

**Rules that settle arguments:** [product name capitalisation · sentence case
vs title case for headings · Oxford comma yes/no · how you write dates,
currency, ranges · the words nobody may use].

**Error messages and empty states:** [Say what happened, then what to do. No
apologies, no blame, no jokes in a failure state.]

---

## 4. Logo

**The mark:** [What it is, and the one-line reason it looks like that.]

**Lockups and when to use each:** [horizontal · stacked · symbol only · with
tagline]. Symbol only is allowed when [context — app icon, favicon, avatar].

**Clear space:** [x] — measured as [the height of the symbol / the counter of
the first letter].

**Minimum sizes:** [24 px on screen / 12 mm in print] for the full lockup,
[16 px] for the symbol. Check the 16 px case yourself — a mark that only works
at 200 px is a logo for a slide deck, not for a product.

**On backgrounds:** [which versions on light, dark, photography, brand colour].

**Never:** stretch, rotate, recolour outside the approved versions, add a drop
shadow, place on a busy photo without the plate, re-typeset the wordmark in a
different font, or rebuild it from the display font.

**Files:** [link]. SVG for anything on a screen; the PNG exists only for tools
that refuse SVG.

---

## 5. Colour

Colours are named by **role**, not by hue — so that swapping a value does not
break the meaning.

| Role | Token | Value | Where it is used |
|---|---|---|---|
| Surface | `--surface` | [#] | page and card backgrounds |
| Ink | `--ink` | [#] | body text |
| Ink muted | `--ink-muted` | [#] | secondary text, ≥ 4.5:1 on surface |
| Accent | `--accent` | [#] | the one thing you want clicked |
| Accent ink | `--accent-ink` | [#] | the accent, darkened to pass 4.5:1 for small text |
| Success / warning / danger | `--success` … | [#] | state only, never decoration |

**Contrast rule:** body text ≥ 4.5:1, text over 24 px (or 19 px bold) ≥ 3:1,
UI borders and icons ≥ 3:1. A brand colour that fails at body size gets a
darker sibling token — it does not get an exception.

**Dark mode:** [every token above, redefined — not "invert the page"].

**Accent budget:** [one accent per screen. If everything is accent, nothing is.]

---

## 6. Typography

| Role | Family | Weights | Fallback chain |
|---|---|---|---|
| Display | [name] | [700/800] | [stack] |
| Body | [name] | [400/600] | [stack] |
| Mono | [name] | [400] | [stack] |

**Licences:** [what you own, for how many seats, and whether the web licence
covers the app]. Check this before launch, not after the invoice.

**Scale** — write the numbers, not "large/medium/small":

| Token | Size / line-height | Used for |
|---|---|---|
| `--text-display` | [48/1.05] | page titles |
| `--text-h2` | [32/1.15] | section headings |
| `--text-body` | [16/1.6] | everything else |
| `--text-small` | [14/1.5] | captions, labels |

**Rules:** [max line length ~70 characters · headings in sentence case ·
never centre more than two lines · no font smaller than 14 px in the product].

---

## 7. Space, radius, elevation, motion

The section that decides whether your product looks designed or assembled.

- **Spacing scale:** [4 · 8 · 12 · 16 · 24 · 32 · 48 · 64]. Nothing off-scale.
- **Radius:** [--radius-sm/md/lg values, and which component uses which].
- **Elevation:** [two or three levels, each with its shadow value and meaning].
- **Motion:** [durations — 120 ms for state, 240 ms for entrance] with
  [easing]. Everything respects `prefers-reduced-motion`.

---

## 8. Imagery and illustration

**What qualifies:** [subject, treatment, crop, whether people appear].

**What is off-limits:** [stock clichés, competitor screenshots, anything you do
not have a licence or a release for].

**Product screenshots:** [which theme, which data set — fake data that looks
real, never a customer's real account].

**Alt text:** written for everything, describing what the image shows, not
"image of".

---

## 9. Applications

For each surface: who owns it, where the template lives, and the one rule that
breaks most often.

| Surface | Owner | Template | The rule |
|---|---|---|---|
| Marketing site | [ ] | [ ] | [ ] |
| Product UI | [ ] | [ ] | [tokens only — no hex in components] |
| Sales deck | [ ] | [ ] | [ ] |
| Social + OG cards | [ ] | [ ] | [one template per page type] |
| Email (marketing + transactional) | [ ] | [ ] | [transactional lives in another system — check it] |
| App stores | [ ] | [ ] | [screenshot sizes change yearly] |

---

## 10. Tokens and handoff

The guidelines are the explanation; **the tokens are the contract**.

- Tokens live in [Figma variables / a JSON file / the repo] at [link].
- Naming: [`--<role>-<variant>`], stable across light and dark.
- A change to a value is a [pull request / version bump], announced in
  [channel].
- Nothing in the product hard-codes a hex, a radius or a duration. If a value
  is not a token yet, that is a bug in this document.

---

## 11. Governance

- **Approves brand-level changes:** [name].
- **Approves an exception:** [name], in [channel], in writing.
- **Adding to this document:** [how — PR, doc comment, whatever you will
  actually use].
- **Review cadence:** [quarterly], and always after [a positioning change, a
  new surface, a rebrand].

---

*Template: https://funky-rabbit.com/resources/saas-brand-guidelines-template/*