A price list you can read at arm’s length
Services run as a plain list with dotted leaders out to the price, the way a shop’s board would. No tabs and no hover states to find what a shave costs.
Premium barbershop concept
Halvard & Kane
A website for a fictional barbershop, built to feel like the room: dark, unhurried and precise.
Fictional concept project. Halvard & Kane is a fictional business. It has no customers, and this is not paying-client work.
01The idea
What the site had to do
A good barbershop sells a feeling as much as a haircut. The site had to carry that mood in the first second, then get out of the way when someone just wants a chair on Saturday.
So the first screen is all atmosphere and the rest is plain and useful: what it costs, who is cutting, and how to book.
- Project type
- Fictional concept
- Pages
- Five, plus image credits
- Typefaces
- Big Shoulders Display, Archivo
- Built with
- Astro, Tailwind CSS, TypeScript
02Every screen
The same site at three widths
03Design decisions
The choices that shaped it
Booking that shows where you stand
Choosing a service, a barber and a time happens one step at a time, with a running summary alongside. On a phone that summary becomes a bar fixed to the bottom of the screen. In this concept it collects no personal details and sends nothing.
Illustrated barbers, on purpose
The team is invented, so the portraits are illustrations. Real photographs would have presented real people as employees of a shop that does not exist.
04Color
Color and quality checks
- Ink#0c0b0a
- Smoke#1f1c19
- Bone#efe8dc
- Brass#c9a25e
- Ember#d2452c
05Tested on the local build
- Contrast checked at three widths with no failures
- Full keyboard walk-through with no traps
- Mobile largest paint of 1.0 to 1.4 seconds in a throttled local test
- Motion switches off for visitors who ask for less of it
Photography in the concept is licensed stock.
06Walkthrough
Take a guided look
The working concept isn’t open to the public. If you’d like a closer look, I’ll walk you through it myself.
Request a guided walkthrough