No. 02Barbershop
Vesper & Vane
A warm, editorial five-page website for a fictional neighbourhood barbershop — a menu-board price list, barber profiles and a guided booking flow.
Concept project. Vesper & Vane is a fictional business. This site was designed and built by Rogues Gallery Studio to demonstrate our work.
- Type
- Concept website
- Year
- 2026
- Built with
- Astro, Tailwind CSS, TypeScript, Playwright, Cloudflare Pages
I.The brief
What it needed to do.
Give an appointment-driven barbershop a site with real character: show the menu and prices at a glance, introduce the people behind the chair, and make booking the obvious next step on a phone.
II.The approach
How we got there.
- 01An “Evening Chair” palette — espresso and walnut browns, ivory type and a single copper accent — that feels like a warm, low-lit shop.
- 02A classical, high-contrast serif with italic flourishes for headlines, paired with a clean grotesque for menus and buttons.
- 03Arched “mirror” image frames and a printed-menu price list with dotted leaders give the brand a signature look.
III.Visual identity
Palette & type.
- Espresso#1C1411
- Walnut#2A1E18
- Ivory#F3EBDD
- Copper#C27C45
- DisplayCormorant Garamond
- TextHanken Grotesk
IV.Highlights
Built to convert.
- 01
Menu-board pricing
Every service grouped like a printed shop menu, with price, duration and a short description — easy to scan and update.
- 02
Guided booking demo
Choose a service, barber and date; time slots are generated from the shop’s opening hours and closed days are blocked.
- 03
Barber profiles
Clearly illustrative profiles for each barber, with specialties and a direct “book with” link.
- 04
Filterable gallery
Category filters and a keyboard-friendly full-screen lightbox.
- 05
Thumb-first mobile
A persistent Call / Book bar, full-screen menu and large touch targets on every page.
- 06
Honest demo form
The booking form validates in the browser and states plainly that no appointment is made or sent.
V.Every page
A closer look.
Each page designed as part of one consistent system.
No. 02.1Services menu board with prices and durationsDesktop · 2026
No. 02.2Barber profilesDesktop · 2026
No. 02.3Filterable gallery of cuts and the shopDesktop · 2026
No. 02.4Booking form in demonstration modeDesktop · 2026
VI.Mobile-first
Designed for the phone first.
Most local customers arrive on a phone, so every layout starts at 375px and scales up.
VII.Built to standard
Quality we can prove.
Measured from the finished build — not marketing claims.
- Pages incl. privacy & 404
- 7
- Automated browser checks passing
- 71
- Axe accessibility violations
- 0
- Max JavaScript on any page (gzip)
- <5 KB
Like what you see?
Let’s build yours next.
Tell us about your business and what you need. We’ll reply with honest advice and a clear, written quote — no pressure, no jargon.