# BarberFlow — Brand Guide

Everything needed to make something look like BarberFlow: logos, color, type, and the rules for using them. Written to be read straight through by a person or an AI agent.

BarberFlow is the all-in-one booking, POS, payroll, and retention platform built exclusively for Canadian barbershops. It is built and backed by May Inc. (may.inc). The brand should feel like the product: warm, direct, and about money — a barbershop, not a bank.

## 1. The name

- **BarberFlow** — one word, two capitals. Capital B, capital F, everything else lowercase.
- Wrong: "Barberflow", "Barber Flow", "barber flow", "BARBERFLOW", "BarberFlo".
- In URLs and code it is lowercase: `barberflow.com`, `barberflow.cdn-may.com`, `@barberflow/*`.
- The social handle is **@barberflowca** — instagram.com/barberflowca.
- Possessive is "BarberFlow's". Plural does not exist.
- Credit the parent company as "Backed by May Inc." where relevant.

## 2. Color

One brown. Everything else is warm surface, ink, and neutral grey. No gradients as decoration (the only gradient in the system lives inside the mark and on filled buttons), no second accent color.

### Core

| Name | Hex | Role |
| --- | --- | --- |
| Barber Brown | `#533527` | Primary. The badge, filled buttons, the highlighted word in a headline. 11.0:1 on white. |
| Cream | `#F4EDE0` | The mark's fill and the warm surface — highlight panels, tags, warm sections. |
| Ink | `#111111` | Every heading. The wordmark's letters are pure `#000000`; UI headings sit at `#111111`. |
| White | `#FFFFFF` | The default page and card background. BarberFlow pages are white with warm accents. |

### Support

| Name | Hex | Use |
| --- | --- | --- |
| Deep Brown | `#462D22` | Pressed states and dark-mode fills for anything filled with Barber Brown. |
| Brown Border | `#80695F` | The 1.4px border around filled brown buttons. |
| Warm Brown | `#884619` | Text and icons on Cream surfaces. Never on white — use Barber Brown there. |
| Cream Muted | `#FBF5EA` | The lightest warm tint — backgrounds inside Cream panels, warm hover fills. |
| Cream Border | `#EAE3D4` | Borders on Cream surfaces. |
| Sand | `#D4C5B5` | The hand-drawn underline behind a highlighted headline word. Decorative strokes only. |

### Neutrals

| Hex | Use |
| --- | --- |
| `#3C3C3C` | Navigation links and emphasized body copy. |
| `#6B6B6B` | Body copy and lead paragraphs. |
| `#8A7B6F` | Eyebrow labels, footer column titles, warm secondary text. |
| `#EBEBEB` | Hairline borders on white — 1px, nothing heavier. |
| `#ECE7DF` | Borders on warm cards and section dividers. |
| `#FAF8F4` | Warm card backgrounds (`#FAF7F4` is the hover tint for white controls). |

Rules:

- Headings are Ink at every level. Barber Brown is an accent — one highlighted phrase per headline, filled buttons, links on hover — never a heading color and never body text.
- Body copy is `#6B6B6B`, never full-strength Ink.
- Warm Brown text belongs on Cream; Barber Brown text belongs on white. Don't swap them.

## 3. Type

**Manrope** — and nothing else. Headlines, UI, body copy, labels. Google Fonts, SIL Open Font License 1.1.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
```

| Style | Spec |
| --- | --- |
| h1 | clamp(40px, 5.5vw, 76px) · 700 · line-height 1.03 · tracking -0.02em |
| h2 | clamp(30px, 3vw, 40px) · 700 · 1.15 · -0.02em |
| h3 (card title) | 21px · 700 · 1.2 · -0.01em |
| Lead | clamp(16px, 2vw, 18px) · 400 · 1.625 · `#6B6B6B` |
| Body | 15px · 400 · 1.625 · `#6B6B6B` |
| Eyebrow | 11px · 600 · uppercase · tracking +0.14em · `#8A7B6F` |
| Small | 12.5px · 500 · 1.5 |

Rules:

- 700 for headlines and card titles, 600 for buttons and labels, 500 for emphasized body.
- Uppercase only for the 11px eyebrow. Never all-caps headings.
- One highlighted phrase per h1, set in Barber Brown, optionally underlined with a Sand stroke.

## 4. Shape

- Cards: 18px radius, 1px `#ECE7DF` border, `#FAF8F4` background.
- Controls: 12px radius (10px on filled brand buttons), 40px minimum height.
- Nav: a floating 16px-radius pill with `#EBEBEB` border and blurred white background.
- Filled buttons: `linear-gradient(180deg, rgba(255,255,255,0.16), transparent)` over Barber Brown, 1.4px Brown Border, and a 1px Barber Brown ring shadow.
- Focus: a 2px ring in Barber Brown at 30% opacity, offset 2px.
- Borders are 1px. Shadows are reserved for buttons and floating layers.

## 5. Motion

- Easing `cubic-bezier(0.22, 1, 0.36, 1)`, 550ms.
- Elements fade in and rise 14px on scroll into view, staggered 80ms between siblings. Once, on the way in.
- The Sand underline draws in over 700ms after the headline settles.
- Respect `prefers-reduced-motion: reduce` — disable transforms and animations entirely.
- Nothing loops, bounces, or parallaxes.

## 6. Voice

- Lead with money. "The numbers that actually pay the rent", not "powerful analytics".
- Concrete over aspirational: name the price (interchange + 5¢), the feature, the outcome.
- Canadian by name: GST/HST, CRA, Interac, booth rentals. Never genericized.
- Short sentences. No exclamation marks. No emoji in product UI.
- Plain-spoken confidence: "No subscriptions, ever. If it ever changes, we're not BarberFlow anymore."

## 7. Logos

The scissors mark is designed to bleed off its badge — it does not exist as a standalone cropped shape. Always use it inside the circle, rounded square, or square badge. On brown badges the mark is a vertical white-to-Cream gradient; on solid white badges (the white circle and the dark wordmark's badge) it is solid Barber Brown. On dark surfaces the badge itself goes solid white — never brown-on-brown.

| File | What it is | When |
| --- | --- | --- |
| `wordmark` | Badge + "BarberFlow" in black letters | The default. Nav bars, documents, anything on white or Cream. |
| `wordmark-dark` | Solid white badge with the brown mark, letters in white | On Barber Brown, dark UI, or a solid dark backing. |
| `badge-circle` | Cream-gradient mark on a Barber Brown circle | Avatars — Instagram, Google Business, Slack, favicons. |
| `badge-circle-white` | Barber Brown mark on a solid white circle | Avatars on dark or brown surfaces. |
| `icon-rounded` | The badge on a rounded square (rx 228 at 1024) | App icons and OS tiles. |
| `icon-square` | The badge on a hard-edged square | Platforms that apply their own crop or radius. |

Do:

- Use the wordmark on white or Cream, and the dark wordmark on Barber Brown or dark surfaces.
- Use the circle badge for avatars, favicons, and app icons.
- Leave clear space around the wordmark equal to the badge's width on all sides.

Don't:

- Recolor, stretch, rotate, outline, or add shadows and effects to the mark.
- Place the wordmark on busy photography without a solid white or Cream backing.
- Rebuild the wordmark by typing "BarberFlow" next to the badge — the letterforms are custom outlines; use the files.

## 8. Starter page

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BarberFlow</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="tokens/barberflow-tokens.css">
</head>
<body>
  <main style="max-width: 920px; margin: 0 auto; padding: 96px 24px;">
    <span style="font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8A7B6F;">Eyebrow</span>
    <h1 style="font-size: clamp(40px, 5.5vw, 76px); font-weight: 700; line-height: 1.03; letter-spacing: -0.02em; color: #111111; margin: 16px 0 20px;">
      A headline with <span style="color: #533527;">one highlight</span>.
    </h1>
    <p style="font-size: 18px; line-height: 1.625; color: #6B6B6B; max-width: 680px;">
      Lead paragraph in Manrope regular. Body copy is grey, headings are Ink, and Barber Brown is saved for the things that matter.
    </p>
    <div style="margin-top: 32px; border-radius: 18px; border: 1px solid #ECE7DF; background: #FAF8F4; padding: 28px;">
      <h3 style="font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: #111111; margin: 0 0 8px;">A warm card</h3>
      <p style="font-size: 15px; line-height: 1.625; color: #6B6B6B; margin: 0;">18px radius, warm border, warm background.</p>
    </div>
  </main>
</body>
</html>
```
