# Brand Guide — system & framework

A brand guide is a system, not a mood board. It answers one question for anyone who
touches your brand (you, a designer, a dev, an AI agent): *what's allowed, and why.*
Build yours section by section. Decide each rule, write it down, and never guess again.

Fill in everything in [[ brackets ]]. Keep every rule short and declarative.

---

## 1. Foundation — why the brand exists
- **One-line positioning:** [[ what you do, for whom, why it's different ]]
- **The belief:** [[ the point of view your brand argues for ]]
- **Tone in one word:** [[ e.g. clipped / warm / clinical / playful ]]
Everything below should ladder back to this. If a choice doesn't serve it, cut it.

## 2. Logo
- **Wordmark:** your name set in your display face. Define a **recede rule** — which letters/words
  sit at lower opacity so one part reads first. [[ e.g. first + last word at 18%, middle at 100% ]]
- **Mark / monogram:** a compact symbol for tight spaces (favicon, avatar). [[ describe ]]
- **Clear space:** minimum padding around the logo = [[ e.g. the height of one letter ]]
- **Minimum size:** wordmark never below [[ e.g. 120px wide ]]; mark never below [[ e.g. 24px ]]
- **Never:** stretch, recolor, rotate, add effects, or place on low-contrast backgrounds.

## 3. Color
- **Keep it to 5–6 colors.** More than that and nothing is recognizable.
- Name each one and give a hex. Assign a **role** to each (background / ink / surface / accent).
  - [[ Dark #______ ]] · [[ Ink #______ ]] · [[ Surface #______ ]] · [[ Page #______ ]] · [[ Signal #______ ]]
- **One signal color.** It means "look here." Use it sparingly with a **usage ratio** —
  e.g. **90 / 8 / 2** (neutral / secondary / signal). The signal is never body text.
- Store colors as **tokens** (a `tokens.json`) so the values have one source of truth.

## 4. Typography
- **Two families max:** one display/headline, one for everything else (and optionally one mono).
  - Display: [[ ____ ]] · Text: [[ ____ ]] · Mono: [[ ____ ]]
- **A fixed size scale** (e.g. 8 steps) — don't invent sizes per screen.
- **A minimum size floor.** Nothing renders below [[ e.g. 11px ]], ever. Enforce it.
- **One emphasis move** (e.g. italic on a single word per headline). Pick one, not five.

## 5. Spacing & shape
- **Grid:** everything snaps to an [[ 8pt ]] grid.
- **Radius:** pick one and hold it — [[ e.g. zero radius, one exception ]].
- Consistency here is what makes a brand feel "designed" vs. assembled.

## 6. Components
Define your handful of repeatable blocks once, then reuse them. Name them. [[ examples:
a stat/receipt block, a session/event card, a CTA row, a community strip ]]. List each
component's parts and its one rule.

## 7. Voice
- Write the way the brand talks: [[ declarative, short, admit what broke — your call ]].
- A few do/don'ts: [[ no corporate verbs ("leverage", "unlock") · no em dashes · etc. ]]
- One example line in-voice: [[ ____ ]]

## 8. Applications
Show the brand on the surfaces you actually ship: site, social, slides, email, video/stream
lower-thirds, business docs (invoice / receipt / SOW). One example each beats a page of rules.

## 9. Accessibility
- Every text/background pair meets **WCAG AA** contrast. Check them; don't eyeball.
- The signal color is **signal, not text** — never set body copy in it.

## 10. Asset checklist
The files someone needs to actually use the brand. Tick them off:
- [ ] Logo: wordmark + mark, in SVG + PNG, on each background (dark / light / accent / transparent)
- [ ] Favicons (16–512) + app icons (iOS / Android / maskable)
- [ ] Social: OG image, profile/header images
- [ ] Video/stream chrome (background, lower-third) if you go live
- [ ] `tokens.json` (colors, type, spacing)
- [ ] Doc templates (invoice / receipt / SOW)

---

**Rule of thumb:** a good brand guide is *decisions, written down.* Make the call, justify it
in one line, and move on. The point is to never have to decide twice.