Make it look like BarberFlow.
Logos, color, and type for anyone writing about, partnering with, or building on BarberFlow. Take the whole thing as one file, or copy any logo below — don't stretch, recolor, or add effects.
Everything, one file
Every lockup in SVG, PNG, and JPG, the color and type values as CSS variables and a Tailwind theme, and a written guide to using all of it.
Six lockups, every context.
Wordmark
The default logo. Nav bars, documents, invoices, and anything on a white or Cream background.
Wordmark — dark
On Barber Brown, dark UI, or a solid dark backing over photography.
Circle badge
Avatars and profile pictures — Instagram, Google Business, Slack, favicons.
Circle badge — white
Avatars on dark or brown surfaces where the standard badge would sink in.
Rounded square (app icon)
App icons, iOS/macOS tiles, and anywhere a rounded app tile is expected.
Square
Platforms that apply their own crop or corner radius — Android adaptive icons, OG images, ad units.
One brown. Everything else is warmth.
Barber Brown
Primary. The badge, filled buttons, highlighted words.
Cream
The mark's fill, warm sections and tags.
Ink
Headlines. Wordmark letters are pure black.
White
Default page background.
Pressed states and dark-mode fills for anything filled with Barber Brown. Not a standalone brand color.
The 1.4px border around filled brown buttons — it makes the gradient fill read as a pressable object.
Text and icons sitting on Cream surfaces. Never on white — use Barber Brown there.
The lightest warm tint. Backgrounds inside Cream panels, and hover fills on warm controls.
Borders on Cream surfaces.
The hand-drawn underline behind the highlighted word in a headline. Decorative strokes only — never text, never fills.
Manrope, and nothing else.
Headlines, UI, and body copy — BarberFlow is a one-typeface brand. 700 for headlines and card titles, 600 for buttons and labels, 400 for paragraphs. Headlines track at -0.02em.
Eyebrows: 11px, semibold, uppercase, tracked +0.14em, in warm grey. That is the only all-caps text in the system.
Dos and don'ts.
- DoUse the wordmark on white or Cream, and the dark wordmark on Barber Brown or dark surfaces.
- DoUse the circle badge for avatars, favicons, and app icons — it is the unit the mark was designed for.
- DoLeave clear space around the wordmark equal to the badge's width on all sides.
- Don'tRecolor, stretch, rotate, outline, or add shadows and effects to the mark.
- Don'tPlace the wordmark on busy photography without a solid white or Cream backing.
- Don'tWrite it "Barberflow", "Barber Flow", or "BARBERFLOW" — it's BarberFlow, one word, two capitals.
Questions or something custom? support@barberflow.com