The majority of barbershop websites contradict the very business they represent — outdated layouts, generic stock photography, no mobile optimization, and booking flows that feel like filling out a tax form. For a business built entirely on trust, atmosphere, and physical craft, a poor digital presence doesn’t just look bad: it actively loses clients before they walk through the door. The industry needed a reference point for what premium grooming looks like online.
02Our Solution
We designed and built BLADE & CO. as a full editorial website — one that communicates atmosphere before it communicates information. The design system pairs Cormorant Garamond with DM Sans and DM Mono to create a typographic voice that is simultaneously classic and contemporary, while a restrained palette of cream, carbon, and forest green signals quality without decoration. The result is a website that functions as a digital extension of the barbershop itself: precise, considered, and built to convert.
What we built
Bilingual EN/SV language system — Full content switching via React Context, no page reload, every string localized across all nine sections
Editorial services showcase — Three grooming categories (Hair, Face, Rituals) presented in alternating full-width photo and content blocks with hover-reveal service details
Online booking with confirmation animation — Form with service selection, date input, and a smooth success state that replaces the form on submission
Team profiles section — Individual barber cards on dark background with photo scale animation, role labels, and specialty tags
Editorial photo gallery — One large featured image spanning two rows alongside four supporting photographs, with subtle hover zoom and label reveal
Scroll-aware navigation — Fixed nav with backdrop blur, mobile hamburger with fullscreen overlay menu, and language toggle persistent across both states
Built with
Next.js
Next.js 16.2 with App Router
TypeScript
Fully typed throughout
GO
Google Fonts
Cormorant Garamond, DM Sans, DM Mono
RE
React Context
Bilingual language system (LangContext)
UN
Unsplash
Placeholder photography (to be replaced pre-launch)
BLADE & CO. is a premium barbershop concept built by KERNEL | STUDIO to demonstrate what a high-end grooming business can look like online. Designed for a fictional establishment in Östermalm, Stockholm, the site targets professional men who value craft and expect the same quality from every touchpoint — including the website. The project features a full bilingual EN/SV experience, an editorial services showcase divided across three grooming categories, an online booking system, team profiles, and a curated photo gallery. Built in Next.js with TypeScript and a custom design system rooted in warm cream, carbon ink, and deep forest green, every detail reflects the precision the brand stands for. This is not a template — it is a demonstration of what is possible when design and development are held to the same standard as the craft itself.
01The challenge
The majority of barbershop websites contradict the very business they represent — outdated layouts, generic stock photography, no mobile optimization, and booking flows that feel like filling out a tax form. For a business built entirely on trust, atmosphere, and physical craft, a poor digital presence doesn’t just look bad: it actively loses clients before they walk through the door. The industry needed a reference point for what premium grooming looks like online.
02Our solution
We designed and built BLADE & CO. as a full editorial website — one that communicates atmosphere before it communicates information. The design system pairs Cormorant Garamond with DM Sans and DM Mono to create a typographic voice that is simultaneously classic and contemporary, while a restrained palette of cream, carbon, and forest green signals quality without decoration. The result is a website that functions as a digital extension of the barbershop itself: precise, considered, and built to convert.
What we built
Bilingual EN/SV language system — Full content switching via React Context, no page reload, every string localized across all nine sections
Editorial services showcase — Three grooming categories (Hair, Face, Rituals) presented in alternating full-width photo and content blocks with hover-reveal service details
Online booking with confirmation animation — Form with service selection, date input, and a smooth success state that replaces the form on submission
Team profiles section — Individual barber cards on dark background with photo scale animation, role labels, and specialty tags
Editorial photo gallery — One large featured image spanning two rows alongside four supporting photographs, with subtle hover zoom and label reveal
Scroll-aware navigation — Fixed nav with backdrop blur, mobile hamburger with fullscreen overlay menu, and language toggle persistent across both states
Need something similar?
We can build a similar site for your business in 4–8 weeks.
