{
 "slug": "undertone",
 "name": "Undertone",
 "title": "Free hair salon website template",
 "description": "Free HTML hair salon website template for colour studios and hairdressers, with a price list and booking form. AGENTS.md for Claude Code, or no code with 8B.",
 "kind": "One-page website for a hair salon or colour studio with a price list, a team of stylists and a booking form",
 "summary": "A one-page site for a cut and colour studio: a red opening statement, six signature shades, dry cuts, a free daylight consultation, late Thursday opening, four stylists, a transformation day, a full price list, aftercare rules and a booking form. Loud red, ink black and one cyan accent, heavy condensed capitals and torn-paper edges on buttons, labels and notes.",
 "fits": [
  "hair salon or colour studio",
  "hairdresser or barber shop",
  "beauty or nail studio with a price list and a small team",
  "any small service business with a menu of prices, named specialists and late opening"
 ],
 "categories": [
  "Local business"
 ],
 "tags": [
  "hair salon",
  "hairdresser",
  "colour studio",
  "barber",
  "beauty salon",
  "price list",
  "booking",
  "torn paper",
  "bold",
  "red and black",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 109,
 "photos": 19,
 "fonts": [
  "Bricolage Grotesque",
  "Geist"
 ],
 "libraries": [
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js",
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js",
  "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.min.js"
 ],
 "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).",
 "sections": [
  {
   "key": "navigation",
   "id": "nav",
   "heading": "",
   "about": "top bar: five section links, the wordmark, phone number and a Book a chair button; hides on scroll down; phone menu overlay"
  },
  {
   "key": "opening",
   "id": "opening",
   "heading": "We start with the grey",
   "about": "red first screen: statement \"We start with the grey\", paragraph, Book a chair button, a copper hair photo and two undertone badges"
  },
  {
   "key": "shades",
   "id": "shades",
   "heading": "Six shades we're known for",
   "about": "six signature shades as photo strips with warm or cool tags and from-prices (demo: Rust Riot, Cherry Bruise, Violet Hour, Deep End, Ash Static, Bone Bleach)"
  },
  {
   "key": "cut",
   "id": "cut",
   "heading": "Cut dry. Cut once.",
   "about": "\"Cut dry. Cut once.\" heading over one photo sliced by a red line, then four cuts with prices (demo: blunt bob, shag, crop, fringe)"
  },
  {
   "key": "consult",
   "id": "consult",
   "heading": "Fifteen minutes at the window",
   "about": "free daylight consultation: photo, three numbered steps and an example formula card"
  },
  {
   "key": "late",
   "id": "late",
   "heading": "Late",
   "about": "pinned night scene: a neon photo seen through the letters of the word \"Late\", then the Thursday late opening and a button"
  },
  {
   "key": "chairs",
   "id": "chairs",
   "heading": "Four chairs",
   "about": "four stylists as large name rows with role and years, a short bio, a booking link, a portrait and a specialism badge (demo: Ama, Jess, Theo, Dez)"
  },
  {
   "key": "transform",
   "id": "transform",
   "heading": "Transformation days",
   "about": "transformation days: a spray-painted word \"Louder\" across the width above a portrait, a short pitch, a from-price with deposit and a button"
  },
  {
   "key": "prices",
   "id": "prices",
   "heading": "Prices",
   "about": "full price list in three groups with a note and a photo (demo: Cut, Colour, Lightening)"
  },
  {
   "key": "care",
   "id": "care",
   "heading": "Keep it loud",
   "about": "pinned aftercare strip: a marker walks along a copper hair photo from day 0 to week 6 while the colour fades and a gloss brings it back"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "Book a chair",
   "about": "booking: heading, lede, address, phone, email, opening hours, request form, three rule notes and a studio photo"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "",
   "about": "ink footer: portrait, links to nine sections, address, phone, email, Instagram and TikTok, a huge wordmark, copyright with the Design: 8B credit"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "phone",
  "email",
  "form",
  "social"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/hair-salon-website-template my-site",
  "curl": [
   "curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/index.html",
   "curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/AGENTS.md",
   "curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/LICENSE",
   "curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/CREDITS.md"
  ],
  "agent_prompt": "Read AGENTS.md, then edit index.html. Make this the site for <my salon: name, address, phone, email, services with prices, stylist names, roles and years, opening hours, consultation, patch test and deposit terms, how people book>. Replace first the studio name in every letter case, the shade names, prices, team and demo address. Keep the section ids, the classes AGENTS.md lists, six shades and five aftercare rules, and set --len on Late, Louder and the footer wordmark. Ask me for missing facts; never invent prices, hours or contacts."
 },
 "links": {
  "page": "https://8b.com/templates/undertone/",
  "md": "https://8b.com/templates/undertone.md",
  "json": "https://8b.com/templates/undertone.json",
  "demo": "https://8b.com/templates/undertone/demo.html",
  "ghDemo": "https://8bsite.github.io/hair-salon-website-template/",
  "repo": "https://github.com/8bsite/hair-salon-website-template",
  "zip": "https://8b.com/templates/undertone/hair-salon-website-template.zip",
  "use": "https://github.com/new?template_name=hair-salon-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/hair-salon-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/hair-salon-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/undertone/desktop.webp",
  "phone": "https://8b.com/templates/undertone/phone.webp",
  "clip": "https://8b.com/templates/undertone/scroll.mp4",
  "og": "https://8b.com/templates/undertone/og.jpg",
  "design_md": "https://8b.com/templates/undertone/DESIGN.md"
 },
 "github": {
  "repo": "8bsite/hair-salon-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "website-templates",
   "hair-salon",
   "hairdresser",
   "barber",
   "html5",
   "agents-md",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "single-file",
   "cursor-ai",
   "static-site",
   "mit-license",
   "vibe-coding",
   "claude-code",
   "ai-agents"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}