Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
KOMOREBI
A roastery in the hills above Yunooka with a natural carbonated foot bath outside the window. The site had to sell a cup of coffee and a whole afternoon.
KOMOREBI Shop & Cafe roasts its own beans, bakes a rice-flour castella and keeps a free ashiyu, a foot bath fed by a natural carbonated spring, beside the terrace. We built a Japanese-only site with five routes on a design system we called Kyoto Washi. It uses no borders and no rounded corners, keeps photographs in grayscale until you hover, and treats whitespace as part of the design. Next.js 16 exports it as static HTML to Cloudflare Pages, with the React Compiler enabled and Framer Motion handling the reveals.
The
Challenge
Shops like this are usually photographed like a café and written up like a tourist brochure, with warm filters, a menu grid and a map at the bottom. That treatment hides the two things that actually bring people up the hill, which are the roasting and the water.
Fit a roastery, a bakery and a free foot bath into one site without the ashiyu looking like a gimmick added to a café.
Convey an atmosphere the photographs can only hint at, so the site feels like the room itself.
Stay readable for someone standing outside on a phone who wants the hours, the address and whether the foot bath is open today.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, for an invented shop in an invented town. Our rule of no borders and no rounded corners had to hold across five routes without the layout turning into a scrapbook.
- SCOPE
- Five routes, Japanese only, statically exported. The menu, announcements and reviews are arrays in the codebase, so the shop would ask us to change a price. That's reasonable at this size and wrong for a business that changes its prices every week.
- NOT BUILT
- There is no ordering, booking or newsletter. The foot bath is free and first come, first served, so there is nothing to reserve, and a café with a few dozen seats doesn't need a checkout to be worth the trip.
The
Solution
Five routes on a warm paper background, built around Ma, the Japanese idea of the interval. Space separates the sections instead of lines, photographs stay grayscale until a cursor brings back the colour, and the type does the structural work that borders usually do.
Kyoto Washi uses a warm white surface (#FBF9F4), brand brown (#553722) for headings and buttons, one gold accent and no rounded corners anywhere. Manrope sets labels and navigation, Noto Serif sets the reading text, and vertical Japanese appears as decorative side text. Shadows are soft and diffuse, so nothing looks pasted on.
Next.js 16 App Router with the React Compiler enabled, exported to static HTML and served by Cloudflare Pages with no functions behind it. Framer Motion's useInView triggers each reveal as a section comes into view, and a content-security policy in public/_headers limits the page to its own origin and the font host.
Site
Walkthrough
The roaster fills the frame before the page says anything about coffee. The shop's selling point is that it roasts on site, so the machine takes the hero and the copy under it runs to three lines.
This is a teaser for the story: founded in 1978, a shop since 2014, with the full timeline one link away. The home page establishes that the business has been around long enough to trust and leaves the details to the story page.
Prices are printed in full in two columns, with no photographs of the drinks. A roaster's menu is a list of beans and methods, and a photo of every drink would make it look like a chain.
The page makes four claims for the carbonated foot bath and stops there. It is free, which is the fact most likely to bring someone up the hill, so that detail appears before the benefits and again after them.
The page gives directions by car, by train and bus, and from the city, because the shop is in the hills and a map alone doesn't help much. The FAQ below it answers the questions people would otherwise phone about.
The
Results
The five routes are a static export with the React Compiler enabled and nothing running on a server, which is what the load times below reflect. The remaining weight is the twelve full-bleed photographs. They are the design, so any further speed has to come from optimizing them.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
The hard part of this build was not decorating. With no borders and no rounded corners, every separation has to come from space, and every photograph has to justify its place without a frame to make it look deliberate. Keeping the images grayscale until hover began as a way to unify twelve photos taken at different times, and it ended up defining the look. The foot bath taught us something too. It is free and it is the reason to make the drive, so we were tempted to give it a booking system, but it doesn't need one. The site only has to say that it exists, that it's warm and that you can soak your feet while your coffee cools.
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.