The business & the brief.
Blackline is a fictional four-chair barbershop in Boca Raton: one barber per client, hot towels, a straight razor on every neck. The site exists to get a man from curiosity to a held chair in about a minute, through the barber he wants, at the hour he wants.
Blackline Barbers is a fictional business. This concept was designed and built by Obsidian Webworks to demonstrate what we create for grooming & personal care businesses. No client results are implied.
Look, feel & voice.
Editorial Luxury: Bodoni Moda set huge in uppercase and refined italic, Manrope micro-labels, near-black and warm ivory with a single aged-bronze accent, warm desaturated photography under film grain. It reads like a luxury men's magazine crossed with a boutique hotel, so the shop feels like a reservation worth making rather than a walk-in.
Built to bring customers in.
Magazine masthead
A meta row, a centred BLACKLINE wordmark and section links split left and right. The masthead collapses into a slim sticky bar with Reserve once it scrolls away.
Hover-to-swap barber portraits
On desktop, hovering or tabbing to a barber's name crossfades a large 3:4 portrait. On mobile the roster becomes a swipeable scroll-snap row.
A menu set like a restaurant
Services sit in two centred columns with small-caps names, italic descriptions, durations and tabular Bodoni prices, plus add-ons and policies.
Reservation slip confirmation
A four-step booking flow (service, barber, day and time, details) with live summary and inline validation. It ends on a perforated, printable ivory reservation slip.
Full-screen roman-numeral Index
On mobile, a text 'Index' button opens a focus-trapped chapter list (I–V) that marks the current page and shows the address and hours.
Graded, wiped photography
Every photo shares a CSS warm-desaturated grade and film grain, uses deliberate 21:9, 3:4 and 4:5 crops, and reveals below the fold with a slow clip-path wipe.
Drawn map, no embed
The Visit page uses a hand-drawn SVG street map with a bronze marker, parking notes, house etiquette and a native accordion FAQ.
Magazine colophon footer
The footer works as a colophon: address, hours, contents in roman numerals, correspondence and an outlined BLACKLINE wordmark.
The full experience.
Hover (or tap) to scroll the entire homepage. Every section, top to bottom.
Designed for the phone first.
Most customers will meet this brand on a phone. The mobile layout is designed on its own terms, with thumb-friendly actions and a dedicated menu.
Site sections.
A complete, production-ready structure. Every section is designed, written and responsive.
- Masthead
- Hero — Cut with intention
- I. The Shop
- II. The Barbers
- III. The Menu
- IV. The Space
- Booking band
- Colophon
Want a website like this for your business?
Tell us what you do and who you serve. We’ll show you what your website could be.
Start Your ProjectSorella
Italian Restaurant & Wine Bar
Explore Project
