MONOLITH
A brutalist dark-mode monument for The Monolith barbershop — a drag-scroll gallery of eight haircut forms, grayscale-to-color hover reveals, a four-principle manifesto, and a fully custom in-page reservation modal.
The Monolith is not a barbershop. It is a brutalist shrine to precision grooming. They needed a digital presence that matched their philosophy: no excess, no stock photography, no compromise. The goal was a React 19 single-page application that felt like an architectural monument — one that positioned them as a luxury brand, not a local shop.
The
Challenge
Most barbershop websites rely on warmth, familiarity, and third-party booking widgets. The Monolith's identity is built on the opposite: severity, precision, and deliberate restraint. Three problems defined the project:
The design had to be radical enough to position The Monolith as a luxury brand — while still communicating four services clearly enough to convert first-time visitors into bookings
A horizontal gallery of eight haircut 'forms' needed to feel curated and editorial — with drag-to-scroll on desktop and snap-scroll on mobile — without relying on any carousel library
The reservation flow had to feel native to the brutalist interface rather than a third-party embed — requiring a fully custom in-page modal with service selection, date picker, and time slots
The
Solution
We built a dark, monochromatic single-page React application anchored by four brand pillars: Manifesto, Gallery of Forms, Protocols, and Architects. Every interaction rewards exploration — grayscale images saturate on hover, service rows reveal atmospheric photography, team cards unlock identity on approach.
A deep charcoal #101d22 base with a signature cyan #11a4d4 accent. Space Grotesk throughout — all-caps, tracked, geometric. A global SVG fractal noise overlay at 40% opacity adds tactile rawness. Mix-blend-difference navigation rides over all content without visual interruption.
A React 19 and TypeScript SPA built with Vite. All sections are smooth-scroll anchor targets. The gallery uses custom snap-scroll drag mechanics — no carousel library. The reservation modal is a fully custom in-page form. Every component is stateless where possible, reactive where needed.
Inside
the Build
Full-screen cinematic barber photograph — grayscale by default, saturating to full color on hover. Geometric grid lines, corner markers, and a 'SYSTEM ONLINE' reveal activate on approach. The brand philosophy lands immediately: no warmth, no welcome — just precision.
Four core principles — PRECISION, SILENCE, FORM, RITUAL — each with a one-line statement. 'We do not cut. We engineer.' Hover reveals border-to-cyan transitions and a spinning geometric accent. The manifesto sets the tone for every interaction that follows.
Eight haircut studies in a horizontal snap-scroll carousel — drag on desktop, swipe on mobile, no carousel library. Each card desaturates by default and reveals its subtitle on hover. Click opens a full-image modal. The gallery treats every cut as a sculptural form.
SCULPT ($65), SHEAR ($45), RAZOR ($55), RITUAL ($120) — listed in a full-width grid with ID, title, description, price, and action. Hovering a row reveals an atmospheric background image and spins the plus icon 90 degrees. No decorative noise — just clear, decisive information architecture.
Silas V. (Lead Architect), Kaelen (Senior Stylist), Elara (Color Specialist) — each portrait is grayscale by default. Hover saturates the image, reveals the ID tag, and shifts the left border to cyan. No bios. Just credentials. The team section mirrors the brand: identity through restraint.
The
Results
A digital monument that communicates exactly what The Monolith is: uncompromising, precise, and unlike anything else in the grooming industry.
Final
Reflection
MONOLITH was a test of whether brutalism could sell. Not conceptual brutalism — the kind that turns a first-time visitor into a booking. Every design choice was a calculated rejection of industry convention: the charcoal canvas instead of warm wood tones, the manifesto instead of an 'About Us,' the drag-scroll gallery instead of a stock photo carousel. The reservation modal was the proof — a fully custom form, styled to the system, that felt native rather than embedded. The result is a barbershop website that functions like a luxury brand identity: severe, precise, and impossible to confuse with anything else in the industry.
Want a site like this?
We build premium websites for businesses that refuse to blend in. Let us know about your project and we will get back to you within 24 hours.