Sample project, built for my portfolio

Iron & Oak — Barbershop

A vintage-craft barbershop concept: oxblood, brass, paper and a full After-Hours night theme.

Day + Night full theme system mapped through semantic tokens · 4 coordinated typefaces working in tight relationship · 100% mobile optimised, every breakpoint hand-tuned · 0 templates, plugins or page builders used

The Challenge

Most barbershop sites are stuck in 2014: template carousels, stock photos of scissors and beards, booking flows that feel like tax forms. For a trade this identity-rich, that’s a disconnect. We wanted a reference for what a barbershop website looks like when it’s treated as part of the room.

Our Solution

I designed IRON & OAK as an editorial product. One brand palette runs the whole site: oxblood, brass, aged paper. Four typefaces each do one job (Big Shoulders for structure, Abril Fatface for the ampersand and big numbers, Crimson Pro for prose, Pinyon Script for the handful of handwritten moments). A night "After-Hours" theme switches the mood, not just the colours.

What I built

Full Day / "After-Hours" night theme: every surface, border and accent runs through semantic CSS tokens. One toggle changes the whole mood, not just the colours.

Four-typeface editorial system: Big Shoulders for headings, Abril Fatface for the ampersand and big numbers, Crimson Pro for body, Pinyon Script for handwritten flourishes.

Custom barber-pole motif in pure CSS. Diagonal red, cream and blue stripes, GPU-accelerated, 2.4s loop.

Paper-texture body composed of SVG turbulence (feTurbulence baseFrequency 0.85, opacity 0.06) with a radial vignette, for a printed-poster feel.

Focus rings in brass (3px solid, 3px offset) on every interactive element. Custom ::selection in oxblood on cream so even highlighting feels in-brand.

Fluid type via clamp(). "IRON & OAK" hero locked on a single line from 2.75rem to 10.5rem.

Live preview · barbershop-nu-ashen.vercel.app/

Built with

Next.js

App Router, fully typed, deployed on Vercel

TypeScript

Strict types across components and theme tokens

CSS Custom Properties

Semantic tokens that drive the Day / After-Hours theme switch

Google Fonts

Big Shoulders, Abril Fatface, Crimson Pro, Pinyon Script, wired via next/font

React Context

Theme toggle persists across navigation

Vercel

Edge deployment with automatic preview builds

Want something like this?

I build sites like this in four to eight weeks.

Get a free quote All projects

Next project

PizzaCut — Pizzeria

View project

Sample project, built for my portfolio

Iron & Oak — Barbershop

A vintage-craft barbershop concept: oxblood, brass, paper and a full After-Hours night theme.

Year

2026

Duration

3 weeks

Built with ourBusiness package· See pricing

Visit site →Start a similar project

Overview

IRON & OAK is a barbershop concept by KERNEL | STUDIO. Vintage-American craft palette (oxblood, brass, aged paper), full day and "After-Hours" night themes through semantic CSS tokens, four coordinated typefaces (Big Shoulders, Abril Fatface, Crimson Pro, Pinyon Script), a barber-pole motif in pure CSS, a paper-texture body from SVG turbulence, oxblood text selection, brass focus rings on every interactive element. Next.js, TypeScript, Vercel.