{
"version": "1.0",
"brand": {
"name": "BarberFlow",
"tagline": "The booking platform that makes barbers more money.",
"url": "https://barberflow.com",
"cdn": "https://barberflow.cdn-may.com",
"email": "support@barberflow.com",
"instagram": "https://www.instagram.com/barberflowca/",
"handle": "@barberflowca",
"parent": "Backed by May Inc. — may.inc",
"description": "BarberFlow is the all-in-one booking, POS, payroll, and retention platform built exclusively for Canadian barbershops. 2.8% + $0.30 per card transaction — no monthly fees, no setup costs, no per-booking fees."
},
"naming": {
"correct": ["BarberFlow", "barberflow.com", "@barberflowca"],
"wrong": ["Barberflow", "Barber Flow", "barber flow", "BARBERFLOW", "BarberFlo"],
"rules": [
"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."
]
},
"colors": {
"core": [
{
"id": "barber-brown",
"name": "Barber Brown",
"hex": "#533527",
"rgb": "rgb(83, 53, 39)",
"cssVar": "--bf-brown",
"role": "Primary",
"note": "Primary. The badge, filled buttons, highlighted words.",
"usage": "The one brand colour, and the only brown. The badge behind the mark, filled buttons, links, icons, the highlighted word in a headline, and the theme colour. Headings stay Ink: brown is an accent, not a heading colour.",
"textOn": "#FFFFFF",
"contrastOnWhite": "11.0:1"
},
{
"id": "cream",
"name": "Cream",
"hex": "#F4EDE0",
"rgb": "rgb(244, 237, 224)",
"cssVar": "--bf-cream",
"role": "Surface",
"note": "The mark's fill, tags and highlights.",
"usage": "The scissors mark is filled with a white-to-Cream gradient. On the page it is the one warm surface: tags and highlight panels, with Barber Brown text on top. There is no second cream.",
"textOn": "#533527",
"contrastOnWhite": "1.2:1"
},
{
"id": "ink",
"name": "Ink",
"hex": "#111111",
"rgb": "rgb(17, 17, 17)",
"cssVar": "--bf-ink",
"role": "Text",
"note": "Headlines. Wordmark letters are pure black.",
"usage": "Every heading, at every level. The wordmark's letters are pure #000000; UI headings sit at #111111. Body copy uses Grey, never full-strength Ink.",
"textOn": "#FFFFFF",
"contrastOnWhite": "19.0:1"
},
{
"id": "white",
"name": "White",
"hex": "#FFFFFF",
"rgb": "rgb(255, 255, 255)",
"cssVar": "--bf-white",
"role": "Base",
"note": "Default page background.",
"usage": "The default page and card background. BarberFlow pages are white with brown accents, never dark by default.",
"textOn": "#111111",
"contrastOnWhite": "1:1"
}
],
"neutrals": [
{
"id": "grey",
"name": "Grey",
"hex": "#5D626B",
"rgb": "rgb(93, 98, 107)",
"cssVar": "--bf-grey",
"usage": "Body copy, lead paragraphs, labels and eyebrows. The only text colour besides Ink and Barber Brown."
},
{
"id": "border",
"name": "Border",
"hex": "#ECECEC",
"rgb": "rgb(236, 236, 236)",
"cssVar": "--bf-border",
"usage": "Hairline borders and dividers on every surface. 1px, nothing heavier."
},
{
"id": "tint",
"name": "Tint",
"hex": "#F7F7F6",
"rgb": "rgb(247, 247, 246)",
"cssVar": "--bf-tint",
"usage": "Tinted section bands, card fills and hover fills."
}
]
},
"typography": {
"sans": {
"family": "Manrope",
"stack": "\"Manrope\", system-ui, -apple-system, sans-serif",
"source": "Google Fonts",
"url": "https://fonts.google.com/specimen/Manrope",
"license": "SIL Open Font License 1.1",
"weights": [500, 600, 700],
"usage": "Everything. Headlines, UI, body copy, labels — BarberFlow is a one-typeface brand.",
"rules": [
"700 for headlines and card titles, 600 for buttons and labels, 500 for emphasized body. Regular 400 for paragraphs.",
"Headlines set at -0.02em tracking. Eyebrows at +0.14em, uppercase, 11px.",
"No second typeface, no monospace, no serifs."
]
},
"embed": {
"html": "",
"css": "@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');",
"nextFont": "import { Manrope } from \"next/font/google\";\n\nexport const manrope = Manrope({ subsets: [\"latin\"] });"
},
"scale": [
{
"id": "h1",
"size": "clamp(40px, 5.5vw, 76px)",
"weight": 700,
"lineHeight": "1.03",
"tracking": "-0.02em",
"usage": "Page title. One per page. Highlight one phrase in Barber Brown."
},
{
"id": "h2",
"size": "clamp(30px, 3vw, 40px)",
"weight": 700,
"lineHeight": "1.15",
"tracking": "-0.02em",
"usage": "Section headings, in Ink."
},
{
"id": "h3",
"size": "21px",
"weight": 700,
"lineHeight": "1.2",
"tracking": "-0.01em",
"usage": "Card titles."
},
{
"id": "lead",
"size": "clamp(16px, 2vw, 18px)",
"weight": 400,
"lineHeight": "1.625",
"tracking": "0",
"usage": "Intro paragraph under a page title. Max 680px wide, colour #5D626B."
},
{
"id": "body",
"size": "15px",
"weight": 400,
"lineHeight": "1.625",
"tracking": "0",
"usage": "Default paragraph. Colour #5D626B."
},
{
"id": "eyebrow",
"size": "11px",
"weight": 600,
"lineHeight": "1.2",
"tracking": "0.14em",
"usage": "Uppercase section label above a heading. Colour #5D626B."
},
{
"id": "small",
"size": "12.5px",
"weight": 500,
"lineHeight": "1.5",
"tracking": "0",
"usage": "Captions, footnotes, secondary links."
}
]
},
"shape": {
"radius": {
"control": "12px",
"button": "10px",
"nav": "16px",
"card": "18px",
"pill": "9999px",
"iconApp": "22.3% of the icon width (rx 228 on a 1024 square)"
},
"border": "1px solid #ECECEC",
"button": "Filled buttons layer linear-gradient(180deg, rgba(255,255,255,0.16), transparent) over #533527, with a 1px #533527 ring shadow.",
"focus": "A 2px ring in Barber Brown at 30% opacity with 2px offset — ring-2 ring-[#533527]/30 ring-offset-2.",
"controlHeight": "40px minimum for any button, input, or select.",
"container": "max-width 1536px, horizontal padding 16px → 120px as the viewport grows",
"sectionPadding": "48px mobile → 80px desktop vertical",
"gridGap": "16px between cards"
},
"motion": {
"easing": "cubic-bezier(0.22, 1, 0.36, 1)",
"reveal": "550ms opacity + 14px translateY on scroll into view, staggered 80ms between siblings",
"rules": [
"Respect prefers-reduced-motion: reduce — disable transforms and animations entirely.",
"Motion is a fade and a small rise, once, on the way in. Nothing loops, bounces, or parallaxes."
]
},
"voice": {
"principles": [
"Lead with money. \"The numbers that actually pay the rent\", not \"powerful analytics\".",
"Concrete over aspirational: name the price (2.8% + $0.30), the feature, the outcome.",
"Canadian by name: GST/HST, CRA, Interac, booth rentals. Never genericized for a global audience.",
"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.\""
],
"examples": [
{
"wrong": "Revolutionize your barbershop today!",
"right": "Booking software that fills more chairs."
},
{
"wrong": "Powerful Analytics Suite",
"right": "The numbers that actually pay the rent."
},
{
"wrong": "Affordable pricing",
"right": "2.8% + $0.30 per card transaction."
}
]
},
"logos": [
{
"id": "wordmark",
"label": "Wordmark",
"description": "The circle badge next to \"BarberFlow\" in black letters.",
"whenToUse": "The default logo. Nav bars, documents, invoices, and anything on a white or Cream background.",
"background": "light",
"transparent": true,
"jpgBackground": "#FFFFFF",
"square": false
},
{
"id": "wordmark-dark",
"label": "Wordmark, reversed",
"description": "The Barber Brown badge inside a thin Cream ring, with \"BarberFlow\" in white letters.",
"whenToUse": "On Barber Brown, dark UI, or a solid dark backing over photography. The ring keeps the badge from sinking in.",
"background": "dark",
"transparent": true,
"jpgBackground": "#533527",
"square": false
},
{
"id": "badge-circle",
"label": "Circle badge",
"description": "The Cream-gradient scissors mark on a Barber Brown circle.",
"whenToUse": "Avatars and profile pictures — Instagram, Google Business, Slack, favicons.",
"background": "any",
"transparent": true,
"jpgBackground": "#FFFFFF",
"square": true
},
{
"id": "badge-circle-white",
"label": "Circle badge, ringed",
"description": "The circle badge inside a thin Cream ring.",
"whenToUse": "Avatars on dark or brown surfaces where the standard badge would sink in.",
"background": "dark",
"transparent": true,
"jpgBackground": "#533527",
"square": true
},
{
"id": "icon-rounded",
"label": "Rounded square (app icon)",
"description": "The mark on a Barber Brown rounded square (rx 228 at 1024).",
"whenToUse": "App icons, iOS/macOS tiles, and anywhere a rounded app tile is expected.",
"background": "any",
"transparent": false,
"jpgBackground": "#FFFFFF",
"square": true
},
{
"id": "icon-square",
"label": "Square",
"description": "The mark on a hard-edged Barber Brown square.",
"whenToUse": "Platforms that apply their own crop or corner radius — Android adaptive icons, OG images, ad units.",
"background": "any",
"transparent": false,
"jpgBackground": "#FFFFFF",
"square": true
}
],
"mark": {
"note": "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.",
"gradient": "The mark is always a vertical gradient from #FFFFFF to #F4EDE0 on a Barber Brown badge. For dark surfaces (the reversed wordmark and the ringed badge) the badge gains a thin ring in the same gradient, 14 units wide on the 330-unit badge, so it never sinks into the background."
},
"formats": {
"svg": "Vector, transparent, no fixed size. Use this everywhere you can.",
"png": "Transparent raster at 512 / 1024 / 2048 px wide. For slides, docs, and anywhere SVG isn't accepted.",
"jpg": "Flattened raster at 512 / 1024 / 2048 px wide. Only for platforms that reject transparency. The reversed wordmark and the ringed badge flatten onto Barber Brown, everything else onto white."
},
"sizes": [512, 1024, 2048],
"usage": {
"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."
],
"dont": [
"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."
]
}
}