Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
PHAROS
A single craftsman in Aokawa takes eight cars a month and tells you, before you book, what the workshop won't do to your paint.
PHAROS is a paint-correction and ceramic-coating workshop offering mirror polishing, glass-polymer coating, interior detailing and headlight restoration, by appointment only. We built a Japanese-only site with eight routes in a brutalist editorial style, with hard borders, no rounded corners, a rust-red accent on near-black and a numbered plate label above every section. It runs on the Next.js 14 App Router with React Server Components, and only the contact form and the motion components run on the client. Twelve art-directed photographs carry the whole site, and each one leaves empty space for the type laid over it.
The
Challenge
Detailing sites sell with before-and-after sliders and packages named things like Platinum. That works until a customer asks what is actually being done to their paint and the vocabulary runs out. At that point, a shop doing careful work looks the same as one doing fast work.
Explain the craft to someone who doesn't know what paint correction is, without turning the page into a lecture.
Publish prices for work that really does vary by car, without the numbers turning into a promise the workshop can't keep.
Present a one-person capacity of eight cars a month as a reason to choose the workshop instead of something to apologize for.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, for an invented workshop. The premise was a shop whose advantage is what it refuses to do (no fillers, no rush jobs, no volume), with a site that makes that refusal read as confidence.
- SCOPE
- Eight routes as a server-rendered Next.js app. The journal is a typed array in lib/journal.ts with prerendered posts, so publishing means a commit. That suits a workshop that writes a few times a year and wouldn't suit one that posts every week.
- NOT CONNECTED
- The contact form validates and shows a success message without sending anything. Booking a slot starts with a conversation about the car, so the form was only meant to open that conversation, and connecting it to an inbox would be the first hour of work on a real project.
The
Solution
Eight routes in a brutalist editorial style, built so the workshop's method becomes the content. Each section is numbered like a page in a technical document, prices appear with their working days and coating life, and the archive files cars by project number instead of by badge.
Material Design 3 tokens with a rust primary (#ad2c00) on near-black, hard borders of 4 to 8px, no rounded corners anywhere, and film-grain overlays on a steel background. Each typeface has one job: Newsreader italic for display, Work Sans for reading and Space Grotesk for labels and plate numbers. The photographs were art-directed as a single set and colour-matched to the palette, so none of them looks like stock.
Next.js 14 App Router with React Server Components, where the only "use client" boundaries are the contact form and the motion wrappers. Content sits next to the components that render it instead of in a CMS, journal posts are prerendered with generateStaticParams, and the site deploys to Cloudflare Pages through the next-on-pages adapter, with security headers in public/_headers.
Site
Walkthrough
The home page shows a single line of light across black paint, the founding year, the town and one line of Japanese meaning "mirror finishing specialists". There is no slider and no wall of five-star reviews, so the photograph makes the case on its own.
「下地が、全て。」: the groundwork is everything. The workshop states its method before selling any service, because what separates it from a fast shop is the prep work customers never see.
Each service is written as a protocol with its own plate number, covering what happens, in what order and over how many days. Someone who reads this page knows what they are buying, which a "Platinum package" never tells them.
Three tiers with prices shown: ¥88,000 for the entry plan, ¥248,000 for the popular plan, and "ask" for the full restoration, since a car that needs twenty days of work can't be priced honestly on a web page.
Past work is filed from PRJ-01 upward instead of by make, so a Ghost and a Veloce sit in the same grid. The archive records the job that was done, whatever badge was on the bonnet.
The
Results
Server components with two client boundaries, delivered through the Pages adapter, mean the type and layout arrive as HTML and JavaScript only loads for the contact form and the motion wrappers. The scores below come from that structure. The accessibility score is full because the palette's contrast is high, which a dark brutalist design doesn't guarantee.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
This build argues that a stated limit sells better than superlatives. Eight cars a month is a limit, and saying so plainly does more than any amount of "premium" copy, because it tells customers the shop won't rush their car to fit another one in. Publishing prices with working days works the same way. It invites the comparison the workshop wants, against shops that quote a price and hide the schedule. The one thing we would change is the form, which validates nicely and sends nothing. For a business that books through conversation, that is the first gap worth closing.
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.