Everything on the shelf
STYLE GUIDE
Colours, type, the pole, the boards, and honest instructions for making this shop yours.
COLOURS
Ink
#181512
Cream
#F4ECDD
Aged Paper
#EAE0CC
Trad Red
#B5342A
Pole Blue
#2E4A68
Chair Green
#274435
Faded
#8A7F6C
TYPE
Display XL
Alfa Slab One · 92 → 38px · h1
SHARP CUTS.
Display L
Alfa Slab One · 56 → 30px · h2
THE LIST
Script
Yellowtail · 34px
Walk-ins welcome since 1962
Body Large
Archivo 400 · 18.5px
Book a chair or take your chances as a walk-in.
Label
Archivo 800 · 13px caps
№ 22 MARE STREET · HACKNEY
Price
Alfa Slab One · 26px
£38
THE KIT
OWNER’S MANUAL
01. Changing colours
Seven Colour Styles run the whole shop: Ink, Cream, Aged Paper, Trad Red, Pole Blue, Chair Green and Faded. Edit them in Assets → Colour Styles and every page follows. Swap Trad Red and the shop rebrands; the pole stripes are a gradient on the Barber Pole component — recolour them there.
02. Changing fonts
Alfa Slab One is the shop sign, Yellowtail is the signwriter, Archivo does the work. All three are set in Text Styles. If you swap Alfa, pick another heavy slab — the register depends on the weight.
03. The barber pole
A native Framer build: a striped gradient frame inside a clipped tube, looped vertically. Speed lives in the loop transition (1.8s), colours in the gradient. It pauses offscreen and respects reduced motion via site settings.
04. The price board
CMS → Services drives every board. Name, category, price, duration, description, and a House Pick toggle that shows the red tag. The Order field controls sequence. Boards filter by category automatically.
05. Barbers and the Wall
CMS → Barbers: name, chair number, specialty, days, since, Instagram, portrait and a short biography — each barber gets a detail page. CMS → The Wall takes a photo, title, barber and tag; new work appears on the homepage and the Wall page instantly.
06. Bookings
The booking form uses Framer’s native form submissions — route it in Site Settings → Forms to your email, or swap in your booking system’s embed. The submit button ships with Loading, Success and Error states wired.
07. Custom code, honestly
One code component: Smooth Scroll (Lenis, ~60 lines) on the Main Layout. Runs only on the published site, respects prefers-reduced-motion, keeps native touch. Delete the instance and file to remove.
08. Licensing & credits
Photography from Unsplash under the Unsplash licence — replace the barbers with your barbers before launch. Everything else is original. Support placeholder: your email here before listing. v1.0 — August 2026.