Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
MONOLITH
A dark, brutalist site for The Monolith barbershop, with a drag-scroll gallery of eight haircuts, photos that turn from grayscale to color on hover, a four-point manifesto and a custom reservation modal.
The Monolith sells precision grooming with the severity of a brutalist building, and its site had to match: no stock photography and nothing decorative. We built a React 19 single-page application meant to position the shop as a luxury brand rather than a neighborhood barber.
The
Challenge
Most barbershop websites lean on warmth and familiarity and send bookings to a third-party widget. The Monolith's identity runs the other way, toward severity and restraint. Three problems shaped the project:
Make the design severe enough to read as a luxury brand while still explaining four services clearly enough for a first-time visitor to book.
Build a horizontal gallery of eight haircut 'forms' that feels editorial, with drag-to-scroll on desktop and snap-scroll on mobile, and no carousel library.
Make the reservation flow feel like part of the interface, which meant a custom in-page modal with a service selector, a date picker and time slots instead of a third-party embed.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, with no client, deadline or budget. We chose the constraints below ourselves, and the design never had to get past a committee.
- SCOPE
- One page with five sections, in React on Vite. The copy, gallery and team profiles live in the codebase, so changing a price or a photograph means a commit. That works for a shop this size until the owner wants to make changes without us.
- NOT CONNECTED
- The reservation modal is an interface only. It collects and sends nothing. Real scheduling would connect to a calendar the shop already uses, which is a separate project.
The
Solution
We built a dark, monochrome single-page React app around four sections: Manifesto, Gallery of Forms, Protocols and Architects. Most of the detail appears on hover. Images gain their color, service rows show a photograph, and team cards reveal their ID tags.
Deep charcoal (#101d22) with a single cyan accent (#11a4d4). Space Grotesk is used everywhere, set in tracked capitals. An SVG fractal noise layer at 40% opacity gives the surfaces grain, and the navigation uses mix-blend-difference so it stays legible over every section.
A React 19 and TypeScript single-page app built with Vite. Each section is a smooth-scroll anchor, the gallery's drag and snap scrolling is written by hand, and the reservation modal is a custom in-page form. Components hold state only where they need it.
Inside
the Build
The entry is a full-screen photograph that stays grayscale until you hover, framed by grid lines, corner markers and a 'SYSTEM ONLINE' line that appears on approach. The page offers no welcome, and that sets the tone for everything after it.
Four principles, PRECISION, SILENCE, FORM and RITUAL, each get a single line, including 'We do not cut. We engineer.' On hover the borders turn cyan and a geometric accent spins.
Eight haircut studies sit in a horizontal snap-scroll row that you drag on desktop and swipe on mobile, built without a carousel library. Each card stays desaturated until you hover and its subtitle appears, and a click opens the full image. Each cut is presented like a piece of sculpture.
SCULPT ($65), SHEAR ($45), RAZOR ($55) and RITUAL ($120) are listed in a full-width grid showing an ID, title, description, price and action for each. Hovering a row brings up a background photograph and turns the plus icon 90 degrees. The rest of the table has no decoration at all.
Silas V. (Lead Architect), Kaelen (Senior Stylist) and Elara (Color Specialist) appear in grayscale portraits. Hovering brings the color back, shows an ID tag and turns the left border cyan. The cards list titles only, with no biographies, in keeping with the rest of the brand.
The
Results
The site is served as static files from Cloudflare Pages. The desktop scores are what a CDN provides with little effort, and the mobile scores show the cost of the noise texture, full-bleed photography and a very large display face. We measured the live site without tuning anything for the audit.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
MONOLITH tested whether brutalism can work for a business that depends on bookings. Most of the choices go against barbershop convention: charcoal where you would expect warm wood, a manifesto in place of an About page, and a drag-scroll gallery in place of stock photos. The reservation modal was the part most likely to break the look, so we built it by hand in the same system rather than embedding a booking widget. The finished site looks nothing like a typical barbershop website.
Want a site like this?
We design and build websites for small businesses in English and Japanese. Tell us about your project and we'll reply within 24 hours.