---
version: alpha
name: "Hair salon template by 8B"
description: "One-page hair salon and colour studio look in red, ink and cyan with condensed capitals and torn-paper edges. Free HTML template by 8B, MIT."
colors:
  primary: "#d3261e"
  secondary: "#0e0e0e"
  tertiary: "#36c6cb"
  neutral: "#f6f6f4"
  surface: "#dcdcd8"
  surface-paper: "#ffffff"
  on-surface: "#0e0e0e"
  caption: "#555553"
  muted: "#a3a39f"
typography:
  headline-display:
    fontFamily: Bricolage Grotesque
    fontSize: 132px
    fontWeight: 800
    lineHeight: 0.86
    letterSpacing: -0.005em
  headline-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 112px
    fontWeight: 800
    lineHeight: 0.86
    letterSpacing: -0.005em
  headline-md:
    fontFamily: Bricolage Grotesque
    fontSize: 34px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: 0.005em
  body-lg:
    fontFamily: Geist
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.22
    letterSpacing: 0.005em
  label-sm:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.06em
  button:
    fontFamily: Bricolage Grotesque
    fontSize: 17px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: 0.03em
rounded:
  none: 0px
  full: 9999px
spacing:
  gutter: 40px
  gutter-phone: 16px
  column-gap: 28px
  row-gap: 40px
  tap-target: 48px
  field-height: 50px
  price-band: 14px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-paper}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    height: 48px
  button-secondary:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    height: 52px
  nav-link:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  badge-ink:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface-paper}"
    rounded: "{rounded.none}"
  badge-cyan:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
  badge-red:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-paper}"
    rounded: "{rounded.none}"
  paper-note:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 30px
  input-field:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    height: 50px
    padding: 12px
  icon-button:
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 48px
---

# Undertone, a hair salon template

## Overview

Undertone is a one-page site for a hair salon or colour studio with a price list, a team of stylists and a booking form. The idea is a salon that reads hair in daylight and says so loudly: flat colour fields in red and ink, headings in condensed capitals that fill the width, and edges that look torn from paper. Photos carry the hair, so the type and colour stay graphic and plain. It suits an owner who wants a confident, slightly punk shop front, not a spa. The feeling is direct, fast and a little rough.

## Colors

Red leads, ink backs it up, cyan is the single cool spark.

- **Primary, red (#d3261e):** the first section and the contact section grounds, the colour price band, big numerals, the cut rule, red badges and one price.
- **Secondary, ink (#0e0e0e):** text, rules, the late, prices and footer sections, the fill of the two ink buttons and of three badges (the opening's Warm tag, Dry cuts, Late chairs).
- **Tertiary, cyan (#36c6cb):** Cool badges, the lightening price band and the layer behind white buttons that the hover wipe reveals.
- **Neutral (#f6f6f4):** the page ground, the solid nav bar and the shades, consultation, transformation and aftercare sections.
- **Surface (#dcdcd8):** the grey ground of the cuts and chairs sections and the colour behind photos while they load.
- **Surface paper (#ffffff):** paper notes, form fields, the fill of white buttons, white price band, text on red and ink.
- **Caption (#555553):** intros, descriptions, roles and the dashed lines of the formula card.
- **Muted (#a3a39f):** quiet text on the dark late, prices and footer sections.

## Typography

**Bricolage Grotesque** is loaded at one weight, 800, in its condensed width (75%). It sets the logo, every heading, shade names, buttons and badges, always in capitals with a tight 0.86 line height at display size. Letter spacing is near zero on headings and 0.03em to 0.04em on buttons and badges.

**Geist** (400 to 700) does everything quiet: body text at 16px, intros up to 19px, nav links and tiny labels at 12px to 13px in tracked capitals, form fields and prices.

Heading sizes are fluid. Display headings run from 48px on phones up to 132px on wide screens, the first heading up to 150px, and some section titles reach 190px. The tokens give the desktop top of each level. Never mix in a third face or a lighter heading weight.

## Layout

Content sits on a 12-column grid with a 28px column gap at most, inside a side gutter that is fluid: 3vw, held between 16px and 40px. There is no max-width container; headings stretch with the viewport. Sections are tall, with vertical padding set in viewport height (about 12 to 16svh), and several fill a full screen. Body paragraphs are held to 34 to 46 characters. Below 900px most grids collapse to one column (the shades to three columns, the stylist rows to photo and text), the section links and phone leave the bar, a menu button opens a full-screen list of large links, and the opening title and cut headings are resized to the phone width.

## Elevation & Depth

There are no box shadows. Depth comes from flat colour fields stacked against each other, paper notes laid over a ground, and a second colour layer under each button that the hover wipe reveals: cyan behind white buttons, red behind ink buttons. The late section uses scale instead of shadow: a photo seen through huge letters. Photos are cropped full-bleed to their frames.

## Shapes

Every corner is square (0). The only round shapes are the circular menu buttons, a 48px circle with a 1.5px outline. Instead of rounding, edges are torn: buttons, badges, paper notes and the footer's top edge use irregular clip-path polygons, and several photos are revealed by a torn edge. Rules are 1.5px lines; price bands are flat 14px stripes.

## Components

- **button-primary:** ink fill, white label, 17px condensed capitals, minimum height 48px, torn edge. The ink layer wipes away on hover to show red.
- **button-secondary:** white fill over a cyan layer, ink label, 18px, minimum height 52px; the same wipe on hover.
- **nav-link:** 12px to 13px tracked capitals with a 1.5px underline that grows from the left on hover.
- **badge-ink, badge-cyan and badge-red:** 14px condensed capitals on ink, cyan or red, torn edge. Cool tags are cyan; Warm tags are red in the shades row and ink in the opening.
- **paper-note:** white, 30px by 26px padding, torn top and bottom.
- **input-field:** white, square, 50px high, 16px Geist 500, a 3px ink focus outline; labels are 12px tracked capitals in white on the red ground.
- **icon-button:** 48px circle that fills red on hover.

## Motion

Scrubbed scenes follow the scroll position, so they have no fixed duration. The page loads GSAP 3.13.0, ScrollTrigger and Lenis 1.3.27. Lenis smooths the wheel (lerp 0.085) and anchor links account for the bar height. The one motion idea is paper being torn and colour being revealed: things start grey or cut off and come into colour as you scroll. The first section has no scroll animation.

- **Opening:** on load, pure CSS (no script), the heading, the paragraph with its button and the two tone rows rise 30px and fade in (0.9s, 0.12s apart) while the photo settles from 1.18x (1.4s).
- **Bar:** solid after 40px of scroll, slides up after about 24px of downward travel once past 120px, returns on a short scroll up or near the top (0.45s).
- **Shades:** pinned by a CSS sticky stage inside a 250svh section (no ScrollTrigger pin), scrubbed. Six strips start stacked at the centre of the row and fan out one by one (staggered, with a slight tilt that straightens) while each photo goes from grey to colour.
- **Cut:** scrubbed. A red rule draws left to right as the two heading lines and the two photo halves slide in from opposite sides, tilted 1.8 degrees, and straighten.
- **Late:** pinned the same way (a sticky stage in a 230svh track), scrubbed. The word starts at 60 times its size so the photo fills the screen, then shrinks to its place while the photo settles from 1.3x.
- **Transformation:** scrubbed. The letters of the word Louder start bunched at the centre and spread to full width; the portrait moves down from over the word and settles from a smaller, tilted state.
- **Aftercare:** pinned by a sticky stage in a 270svh section, scrubbed. A marker slides along the strip, the colour drains and each week rule lights; at week 6 the colour returns.
- **Reveals:** a torn-edge reveal (1.15s, once), a grey-to-colour tint (scrubbed) and a stamp (scale 1.3 and a tilt of 9 degrees to rest, 0.55s, once) are tagged with `data-8b-motion` as `tear`, `tint` and `stamp`. Keep those attributes and the scene classes listed in AGENTS.md.

With reduced motion set, Lenis, the opening entrance, the reveals and every scroll scene are switched off and the page reads in full; the bar still hides on scroll and hover transitions stay.

## Do's and Don'ts

- Do keep corners square and make soft edges with torn clip-paths.
- Do use red for big fields and numerals, ink for the dark sections, and cyan only as a small cool accent.
- Do set headings in Bricolage Grotesque capitals at 800 and everything small in Geist.
- Do let a scroll scene end with the content fully readable.
- Do keep body text at least 4.5:1 against its ground; use caption grey on light grounds only.
- Don't add rounded cards, soft shadows, gradients or glass blurs.
- Don't add a second display face, a lighter heading weight or sentence-case headings.
- Don't add stock icons; labels and brackets do that work.
- Don't use cyan for large fields or for body text.
- Don't change the six shades or five aftercare steps without changing their grid columns too.