Coordinated typefaces working in tight relationship
100%
Mobile optimised — every breakpoint hand-tuned
0
Templates, plugins or page builders used
01The 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.
02Our Solution
We 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 we 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
CS
CSS Custom Properties
Semantic tokens that drive the Day / After-Hours theme switch
GO
Google Fonts
Big Shoulders, Abril Fatface, Crimson Pro, Pinyon Script — wired via next/font
Coordinated typefaces working in tight relationship
100%
Mobile optimised — every breakpoint hand-tuned
0
Templates, plugins or page builders used
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.
Live preview · barbershop-nu-ashen.vercel.app/
01The 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.
02Our solution
We 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 we 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.
Need something similar?
We can build a similar site for your business in 4–8 weeks.
