Brand guidelines
50 pages
You show what you want before the clippers come out.
Your time is held. Nobody walks in ahead of you.
The hot towel, the razor, the mirror. Nothing is rushed.
Talk like a barber who has cut your hair for years. Straight, warm and short.
Show me what you want. I tell you the price. Then we start.
Who buys, what bugs them, and what to say first. Every quote is a real review.
His last cut came out wrong, or he waited past his time and got rushed.
A barber who listens, keeps his time and takes care of him.
The cut coming out wrong, waiting past his time, and the price going up.
…we were skipped over at LEAST three separate times…
What real people wrote, word for word. None of it was written for an ad.
…we were skipped over at LEAST three separate times…
…did not listen to my request of how long I wanted my hair cut…
It was frustrating that our scheduled appointment time was not respected…
I asked for a short fade and they gave me a buzz cut…
…only to be WAY overcharged at checkout…
…my only complaint is how expensive the shave is, 35 dollars is a lot…
Open every ad on their problem. Test 5 to 8, and change only the first line.
All 32 hooks, with the quotes they came from, are in MESSAGES.md in the kit.
A barber who listens, your time kept, and the price before the cape goes on.
The logo must look the same everywhere. These pages show every version and when to use each one.
Full color on dark backgrounds. On light backgrounds the full color logo fades, so use the one color, dark version.
The symbol from the logo, on its own. Use it where the full logo would be too small to read.
96px64px
32px favicon16px faviconPick the version that is easiest to see on what is behind it.
Leave empty space around the logo. Nothing goes in it: no text, no edges, no other logos.
xxxx
x is one third of the logo's height. Keep at least x empty on all four sides.
134px wide on screens
1.05 in wide in print
Any smaller and the details blur. Use the icon instead.
Use the version named under each background.
Each of these makes the logo look cheap or fake. Use the files as they are.
NEW! SALE TODAY
The brand colors come from the logo. The grays and alert colors are built to match. Use them in the amounts shown.
HEX and RGB are for screens. CMYK is a starting point for print: ask your printer to match the HEX and send a proof.
Lighter and darker steps for backgrounds, borders and hover states. The outlined step is the brand color itself.
Mostly calm background, a strong share of Brass, and Oxblood kept small so it stands out.
#336941 · Done, saved, in stock
#C69D62 · Check this, running low
#A35F56 · Failed, sold out, delete
#437AA6 · Tips and notices
Use these pairs for words. "No text" means never put words there.
The mark, repeated. Use it to fill big spaces so they still look like the brand.
Never put the logo straight on a pattern. Set it on a solid block of color on top.
Two typefaces, used the same way every time. Both are free, and the font files are in the fonts folder.
For headlines and big moments. Free on Fontshare.
Tall condensed capitals like FOOTHILLS in the logo, strong at large sizes.
For paragraphs, buttons and everything else. Free on Fontshare.
A barber who listens, your time kept, and the price before the cape goes on.
A plain, open sans that stays easy to read in small sizes.
Pixels for screens, points for print. The top size is drawn smaller here to fit.
How the two fonts work together on a page.
A barber who listens, your time kept, and the price before the cape goes on.
Body text stays at 16px or larger on screens. Keep lines short enough to read in one glance. Links use Brass 600.
Book Your ChairThe brand on signs, paper, things people hold and wear, and a billboard. Drawn from the same colors, fonts and logo.
A shop sign, a yard sign and the work van. One logo, one line, one way to reach you.
3.5 × 2 inches. The logo alone on the front, the details on the back.
A letterhead (8.5 × 11 in), a #10 envelope and an email signature.
The logo on things people wear: full color on dark cloth, one color, dark on light.
A hoodie for cold mornings and a tote people carry around town.
Talk like a barber who has cut your hair for years. Straight, warm and short.
Never: slick, pushy, hype.
Show me what you want. I tell you the price. Then we start.
A 48 × 14 ft bulletin. Seven words or fewer: drivers read it in about five seconds.
Spacing, grids and shapes make separate pieces look like they came from one brand.
Every gap and padding is a number from this list. Every step is a multiple of 4px, so things line up.
Where things sit on a web page and on a social post.
The shield in the logo has clean points and straight sides, so corners stay crisp.
1.5px lines with square ends. Use one icon set with the same line weight everywhere.
The system on screens: buttons, forms, social posts and a website.
The same shapes and colors on every screen.
A barber who listens, your time kept, and the price before the cape goes on.
See prices →Each platform below shows the version that fits its frame. Every file is 1080 × 1080 and fits inside every circle.
Keep what matters inside the dashed box. The gray circle is your profile picture.
Open on their problem, in their words. Keep the logo small.
Links, landscape posts, video covers and Google updates.
The home page, top of the screen.
Foothills BarbershopServicesThe BarbersAboutContactBook Your ChairA barber who listens, your time kept, and the price before the cape goes on.
Red brick, oxblood leather and warm brass light at dusk. Hands and the back of the head, never faces.
Everything is in the "Foothills Barbershop brand kit" folder and zip. Hand it to anyone who makes things for the brand.
--color-primary: #BD9259; --color-accent: #7A2A24; --color-ink: #191512; --color-paper: #FDF9F5; --font-display: "Bebas Neue"; --font-body: "Switzer"; --text-h1: 3rem; --text-body: 1rem; --space-md: 1rem; --space-xl: 2rem; --radius-md: 2px;