# BarberFlow — Brand Kit

Everything needed to make something look like BarberFlow: logos, color, type, and the rules for using them.

**Start with [`BRAND.md`](./BRAND.md).** It is written to be read straight through by a person or an AI agent, and it is self-contained — colors, fonts, spacing, voice, logo rules, and a copy-paste starter page.

## Using this with an AI agent

Drop this whole folder (or the `.zip`) into Claude, Cursor, ChatGPT, or whatever you're using, and say:

> Read BRAND.md from the BarberFlow brand kit, then build me **\<what you want\>**, on brand.

That's it. The agent has the hex values, the font name and embed snippets, the type scale, the logo files for every context, and how to write the name.

## What's in here

| Path | What it is |
| --- | --- |
| `BRAND.md` | The guide. Color, type, shape, motion, voice, logo rules, starter page. |
| `brand.json` | The same thing machine-readable — tokens, logo metadata, usage rules. |
| `tokens/barberflow-tokens.css` | CSS custom properties for every color, radius, and the font stack. |
| `tokens/tailwind.theme.js` | A Tailwind `theme.extend` fragment. Drop it into `tailwind.config.js`. |
| `logos/svg/` | All six lockups as vector SVG. Use these wherever you can. |
| `logos/png/` | The same six at 512 / 1024 / 2048 px wide, transparent. |
| `logos/jpg/` | The same six flattened, for platforms that reject transparency. |

## The 30-second version

- **Color:** one brown — `#533527`. White page, `#F4EDE0` Cream for warm surfaces, `#111111` Ink for headings, `#6B6B6B` for body copy. No second accent color.
- **Headings are Ink,** not brown. Barber Brown is for the badge, filled buttons, and one highlighted phrase per headline.
- **Type:** Manrope for everything — 700 headlines, 600 labels, 400 body. There is no second typeface.
- **Shape:** 18px-radius warm cards on `#FAF8F4`, 1px hairline borders, 40px controls.
- **Logo:** `logos/svg/wordmark.svg` on light, `logos/svg/wordmark-dark.svg` on brown. The mark always lives inside its badge — never crop it out.
- **Name:** BarberFlow — one word, two capitals. Never "Barberflow" or "Barber Flow".
- **Links:** barberflow.com · instagram.com/barberflowca · backed by May Inc. (may.inc).
- **Voice:** lead with money, name Canadian specifics (GST/HST, CRA, Interac), no exclamation marks.

## Licence

The logos and the BarberFlow name are trademarks. Use them to refer to, write about, partner with, or build on BarberFlow — not to imply endorsement or to brand something as ours. Manrope is SIL Open Font License 1.1 and free to embed.

## Always-current copies

- `https://barberflow.cdn-may.com/brand/barberflow-brand-kit.zip` — this kit
- `https://barberflow.cdn-may.com/brand/BRAND.md` — the guide on its own
- `https://barberflow.cdn-may.com/brand/brand.json` — the tokens on their own
- `https://barberflow.com/brand-kit` — the web page
