LESK - Hair Salon Colour Studio HTML Template

LESK is a website template for hair and colour salons — small studios with a handful of named stylists, where the client books a person, not a slot.

It is hand-written HTML, CSS and JavaScript. No build step, no npm install, no framework.

WHAT MAKES IT LOOK DIFFERENT

An editorial grid with a lot of air: photographs placed off the column, a wordmark that holds the corner of the page, and a fine grain over the whole thing. It reads like a printed lookbook rather than a web page. This is a template with an opinion — if that is not your client's voice, a calmer one will fit better.

ADAPTIVE TEXT COLOUR, DECIDED PER LETTER

Text that passes over a photograph turns white, and turns back the moment it leaves the picture — letter by letter, not word by word. The brightness is read from the exact part of the photograph each glyph covers (object-fit and object-position included) and weighed against the page's own colour for the part that hangs off the edge. Per word this cannot work: a word half on a dark photograph and half on the light page has no single colour that reads.

Measured on the archive you download, across 23 views: the opening paragraph reads at 4.5:1 or better on every phone view. Where a glyph sits over a mottled part of a photograph — light and dark inside one letter — no flat ink colour reaches that bar, and CHANGELOG.txt says so rather than hiding it.

WHAT IT DOES, NOT JUST HOW IT LOOKS

A booking widget that runs with no backend: stylist tiles, a three-month calendar, time slots. The choice travels with the form in three hidden fields, so your endpoint receives an actual booking and not just a name. A price list that stays readable from 320 px up. A privacy page that is an honest GDPR stub, not invented legal text.

SPEED, MEASURED ON THE ARCHIVE YOU DOWNLOAD

On the unpacked archive, throttled to a mid-range phone (390x844 viewport, 4x CPU slowdown, 1.6 Mbit/s, 150 ms latency), median of five cold runs.

Home — LCP 1.30 s, CLS 0.000, TBT 17 ms, 391 KB Booking — LCP 1.39 s, CLS 0.000, TBT 0 ms, 328 KB Pricing — LCP 0.94 s, CLS 0.000, TBT 0 ms, 245 KB Privacy — LCP 0.94 s, CLS 0.010, TBT 0 ms, 244 KB

The 17 ms on the home page is the one piece of work this template does before it is idle: it builds a lookup table for the grain overlay so the adaptive text reads the page the way your eye does. Google's threshold is 200 ms.

Zero external domains. Fonts are self-hosted — nothing is fetched from Google. Every page carries a single H1, a unique title and description, sitemap.xml and robots.txt.

ABOUT THE MEDIA

Nineteen photographs come from Unsplash and are used under the Unsplash Licence, which permits commercial use and redistribution as part of a larger work such as this template. Every source URL is listed in CREDITS.txt.

Features

Four pages: home, booking, pricing, privacy Booking widget - stylist, day, time - running entirely in the browser Adaptive text colour decided per glyph, measured against what is behind it Self-hosted Hanken Grotesk (latin and latin-ext) - no Google Fonts request Forms stay disabled until you give them a data-endpoint, and a switched-off button looks switched off Nineteen photographs included, Unsplash Licence, sources listed sitemap.xml, robots.txt Responsive from 320 px up No dependencies at all - no jQuery, no animation library, no icon font

Requirements

None. Plain HTML, CSS and JavaScript - no framework, no build step, no package manager, no server-side code. Any static host works.

Tested in current Chrome, Safari, Firefox and Edge.

Instructions

1. Unzip the archive. 2. Open index.html in a browser - it works straight from disk. 3. Edit the text in the four pages. 4. Replace the stylists in the booking widget and the rows in the price list. 5. Put your URL in data-endpoint on the forms. 6. Replace the photographs in img/. 7. Upload the folder.

Full documentation is in documentation/index.html inside the archive.