Mori
An editorial website for a men’s hair studio, from the wordmark and hero motion down to a working booking flow.
Overview
Mori is a men’s hair studio and barbershop, positioned as an editorial, high-art take on grooming. The website was designed and built end to end, from the branding-led wordmark and hero motion down to a working booking flow.
- Services
- Website design and development, end to end
- Industry
- Men’s hair studio
- Type
- Brand website with booking
- Pages
- Single page: story, services, gallery, locations and booking
- Status
- Personal project, designed and built end to end
Design challenge
A barbershop site has to do two jobs at once: carry a strong brand, and make booking effortless. Mori needed brand storytelling, a clear service menu with prices, a gallery, a location finder for its branches and live appointment booking, without the brand getting in the way of the booking.
Design direction
Deep oxblood and cream, a flame-cut wordmark over flowing line art, and a bold barber-pole stripe. Motion leads the brand moments, while a persistent booking bar keeps the next available slot one tap away.
- Oxblood#6A1E21
- Blush#DFBDBE
- Cream#FCF9F1
A custom flame-cut wordmark for the brand, with Plus Jakarta Sans for everything you read.
The live site
This is the working site, running at desktop size. Scroll and click inside the frame, or open it in a new tab.
Key features
Hero motion
A splash animation and the flame-cut wordmark over moving line art open the site.
Service menu and prices
Every cut and service listed with its price, so there are no surprises at the chair.
Location finder
Each branch with its details, so clients head to the right one.
Live booking
A booking bar that shows the next available slot, and a working flow to book an appointment.
Final result
Designed in Figma and built with HTML, CSS and Tailwind, with GSAP for motion. The real site is running below.
Start a Project