# BarberFlow — Brand Guide

Everything needed to make something look like BarberFlow: logos, colour, 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. Colour

Seven colours, and that is the whole base: one brown, one cream, ink, white, and three neutral greys. No gradients as decoration (the only gradient in the system lives inside the mark and on filled buttons), no second accent colour, no second brown, no second cream.

### Core

| Name         | Hex       | Role                                                                                                                |
| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
| Barber Brown | `#533527` | The one brand colour. The badge, filled buttons, links, icons, the highlighted word in a headline. 11.0:1 on white. |
| Cream        | `#F4EDE0` | The mark's fill and the one warm surface: tags and highlight panels, with Barber Brown text on top.                 |
| 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 brown accents.                                |

### Neutrals

| Name   | Hex       | Use                                                                   |
| ------ | --------- | --------------------------------------------------------------------- |
| Grey   | `#5D626B` | Body copy, lead paragraphs, labels and eyebrows.                      |
| Border | `#ECECEC` | Hairline borders and dividers on every surface. 1px, nothing heavier. |
| Tint   | `#F7F7F6` | Tinted section bands, card fills and hover fills.                     |

Rules:

- Headings are Ink at every level. Barber Brown is an accent (one highlighted phrase per headline, filled buttons, links, icons), never a heading colour and never body text.
- Body copy is Grey `#5D626B`, never full-strength Ink.
- Text on Cream is Barber Brown. Text on Barber Brown is white.
- Anything not in the two tables above is not a BarberFlow colour. Do not invent lighter creams, warmer browns or tinted borders.

## 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 · `#5D626B`                     |
| Body            | 15px · 400 · 1.625 · `#5D626B`                                       |
| Eyebrow         | 11px · 600 · uppercase · tracking +0.14em · `#5D626B`                |
| 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. No underline or other decoration on headline words.

## 4. Shape

- Cards: 18px radius, 1px `#ECECEC` border, white or Tint `#F7F7F6` background.
- Controls: 12px radius (10px on filled brand buttons), 40px minimum height.
- Nav: a floating 16px-radius pill with `#ECECEC` border and blurred white background.
- Filled buttons: `linear-gradient(180deg, rgba(255,255,255,0.16), transparent)` over Barber Brown, with 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.
- 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 (2.8% + $0.30 per card transaction), 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. The mark is always a vertical white-to-Cream gradient on a Barber Brown badge. On dark surfaces the badge gains a thin ring in the same gradient (the reversed wordmark and the ringed badge), so it never sinks into the background — never a bare brown badge 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`      | Ringed badge + "BarberFlow" in white letters   | 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` | The circle badge inside a thin Cream ring      | 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 reversed 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:

- Recolour, 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: #5D626B;"
        >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: #5D626B; 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 #ECECEC; background: #F7F7F6; padding: 28px;"
      >
        <h3 style="font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: #111111; margin: 0 0 8px;">
          A card
        </h3>
        <p style="font-size: 15px; line-height: 1.625; color: #5D626B; margin: 0;">
          18px radius, hairline border, tinted background.
        </p>
      </div>
    </main>
  </body>
</html>
```