Brand kit

Make it look like BarberFlow.

Logos, colour and type for anyone writing about, partnering with or building on BarberFlow. The kit has every logo in SVG, PNG and JPG, the colours as CSS variables and a Tailwind theme, and a written guide.

Download brand kit

Logos

Copy any logo to your clipboard or download it. Leave clear space the width of the badge on every side, and never recolour, stretch or rebuild the wordmark.

BarberFlow wordmark

Wordmark

The default logo. Nav bars, documents, invoices, and anything on a white or Cream background.

wordmark.svg
BarberFlow wordmark, reversed

Wordmark, reversed

On Barber Brown, dark UI, or a solid dark backing over photography. The ring keeps the badge from sinking in.

wordmark-dark.svg
BarberFlow circle badge

Circle badge

Avatars and profile pictures — Instagram, Google Business, Slack, favicons.

badge-circle.svg
BarberFlow circle badge, ringed

Circle badge, ringed

Avatars on dark or brown surfaces where the standard badge would sink in.

badge-circle-white.svg
BarberFlow rounded square (app icon)

Rounded square (app icon)

App icons, iOS/macOS tiles, and anywhere a rounded app tile is expected.

icon-rounded.svg
BarberFlow square

Square

Platforms that apply their own crop or corner radius — Android adaptive icons, OG images, ad units.

icon-square.svg

Colour

Seven colours: one brown, one cream, Ink, white and three neutral greys. Headings stay Ink; Barber Brown is the accent for the badge, filled buttons, links and one highlighted phrase per headline. Click a colour to copy its hex.

Neutrals

Type

Manrope for everything. Bold headlines tracked at -0.02em, relaxed body copy, and one uppercase eyebrow for structure. There is no second typeface.

Page titleManrope 700 · clamp(40px, 5.5vw, 76px) · 1.03 · -0.02em
Fill more chairs.
Section headingManrope 700 · clamp(30px, 3vw, 40px) · 1.15 · -0.02em
The numbers that actually pay the rent.
Card titleManrope 700 · 21px · 1.2 · -0.01em
No subscriptions, ever.
LeadManrope 400 · clamp(16px, 2vw, 18px) · 1.625
Booking, point of sale, payroll and retention, built for Canadian barbershops.
BodyManrope 400 · 15px · 1.625
2.8% + $0.30 per card transaction. No monthly fees, no setup costs, no per-booking fees.
EyebrowManrope 600 · 11px · 1.2 · 0.14em
Built for Canadian barbershops
SmallManrope 500 · 12.5px · 1.5
Backed by May Inc.
Free to embed under the SIL Open Font License 1.1.Get Manrope on Google Fonts

Name

One word, two capitals. In any sentence, heading or button it is BarberFlow. Lowercase only in URLs, handles and code.

WriteBarberFlowbarberflow.com@barberflowca
NotBarberflowBarber Flowbarber flowBARBERFLOWBarberFlo
  • One word, two capitals: BarberFlow. Capital B, capital F, everything else lowercase.
  • In URLs and code identifiers it is lowercase: barberflow.com, barberflow.cdn-may.com, @barberflow/*.
  • The social handle is @barberflowca — instagram.com/barberflowca.
  • BarberFlow is built and backed by May Inc. (may.inc). Credit it as "Backed by May Inc." where relevant.
  • Possessive is "BarberFlow's". Plural does not exist.

Usage

Warm, direct and about money. Name the price, the feature and the outcome. Short sentences, no exclamation marks.

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 — it is the unit the mark was designed for.
  • 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.
  • Write it "Barberflow", "Barber Flow", or "BARBERFLOW" — it's BarberFlow, one word, two capitals.
Write

Booking software that fills more chairs.

Avoid

Revolutionize your barbershop today!

Write

The numbers that actually pay the rent.

Avoid

Powerful Analytics Suite

Write

2.8% + $0.30 per card transaction.

Avoid

Affordable pricing

For AI agents

Building something that should look like BarberFlow? Point your agent at one of these. The guide has every value on this page in plain text.

barberflow.cdn-may.com/brand/BRAND.mdbarberflow.cdn-may.com/brand/brand.jsonbarberflow.cdn-may.com/brand/barberflow-brand-kit.zip

Questions or a custom request? support@barberflow.com