---
version: alpha
name: "Music school template by 8B"
description: "A music school website with white pages, thin black outlines, beige cards and one orange accent. Free HTML template by 8B, MIT."
colors:
  primary: "#131313"
  secondary: "#e5dcd2"
  tertiary: "#ff5714"
  neutral: "#57524c"
  surface: "#ffffff"
  on-surface: "#131313"
  accent-yellow: "#f4f0a1"
  accent-orange: "#ff5714"
  caption: "#57524c"
typography:
  headline-display:
    fontFamily: Funnel Display
    fontSize: 76px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Funnel Display
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.02em
  title-md:
    fontFamily: Funnel Display
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  title-sm:
    fontFamily: Funnel Display
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Host Grotesk
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.45
  label-md:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
  button:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1
  badge:
    fontFamily: Host Grotesk
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1
rounded:
  card: 18px
  pill: 999px
  full: 9999px
spacing:
  gutter-max: 40px
  gutter-min: 16px
  gap: 16px
  max-width: 1440px
  section-pad-max: 128px
  section-pad-min: 72px
  outline: 1.5px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0 24px
    height: 52px
  button-small:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: 0 22px
    height: 44px
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: 14px
  card-beige:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: 14px
  badge-yellow:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.pill}"
    height: 24px
    padding: 0 10px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 12px 18px
    height: 50px
  icon-button:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 44px
---

## Overview

Overtone is a one-page website for an online music school or lesson studio. The idea is a printed programme: white paper, black ink drawn as an even 1.5px outline around everything, beige cards for variety and a single orange spark. Instruments, mentors, masterclass tickets, a sheet-music shop, plans and a booking form sit in overlapping outlined shapes, so the page feels like a deck of tickets and record sleeves. It is made for parents, adult beginners and teachers who want a clear, friendly school that still looks designed. All names, prices and dates in the demo are invented.

## Colors

Six colours do all the work, set as `--color-1` to `--color-6` in `:root`.

- primary `#131313`: text, every outline, the filled buttons, the dark lesson panel at the top and the mobile menu overlay.
- surface `#ffffff`: the page background, the nav pill, program and plan cards, and the text on dark panels.
- secondary `#e5dcd2`: beige cards. Every second program card, the small tickets, the middle review, every second FAQ row and the full-width path band use it.
- tertiary and accent-orange `#ff5714`: the only strong colour. It fills the four-point star diamonds, the rating diamonds and the favicon tile. It is never used for text or buttons.
- accent-yellow `#f4f0a1`: small buttons, the discount badges, round icon buttons, the step numbers on the dark panel, and the fill of a program card or small ticket while its button is hovered.
- neutral and caption `#57524c`: quiet secondary text such as the struck-through old price.

Keep the ratio: mostly white and black, beige in patches, orange and yellow in small doses.

## Typography

Two families, both loaded from Google Fonts.

- Funnel Display, weights 400 to 500, for everything that is a heading or a number: section headings, prices, step and mentor names, FAQ questions and the footer wordmark. Headings are sentence case with negative tracking (-0.01em to -0.03em) and tight leading. Section headings use `headline-display`, which scales from 36px on phones to 76px on wide screens (clamp). Only the reviews heading drops to `headline-md`.
- Host Grotesk, weights 400 to 600, for body copy, buttons, form fields, labels and captions. Body is 16px at 1.55, captions 13.5px, nav links 14px at weight 500, badges 12px at weight 600.

There is no uppercase and no tracked caps. Hierarchy comes from size and the contrast between the two faces.

## Layout

A centred column up to 1440px (`.wrap`) with a side gutter that is fluid between 16px and 40px (`clamp(16px, 3.2vw, 40px)`). Sections are separated by vertical padding between 72px and 128px. Compositions overlap: program cards in a row with a negative margin of 18px, five round portraits, review cards, plan cards joined by bridge drawings, and a staircase of four steps in a beige band with black rules above and below. The first screen is a dark rounded panel with the h1, three numbered steps and a framed photo. Under 1024px the program cards become horizontal cards in a column, the opening panel stacks, and under 960px the plans stack with the bridges rotated; under 960px the nav links fold into a Menu button that opens a full-screen black overlay.

## Elevation & Depth

There are no box shadows and no blur. Depth is made with outlines and offset copies. The lesson photo carries two fixed offset outlines, portraits and cards bring two outline echoes as they arrive, the dark opening panel sits on four stepped grey layers, neighbouring cards overlap with later ones on top, and the fixed nav pill floats above the page above everything else.

## Shapes

Two radii. Cards, surfaces and photos use 18px (`--radius-1`); buttons, badges, inputs and the nav pill use a full pill (`--radius-2`, 999px). A few shapes are bespoke: 30px for FAQ rows and the path steps, 28px for covers rows on phones, 24px for path steps on phones, 12px or 10px for photos inside tickets and cards, circles for mentor portraits and the covers disc. Every shape carries the same 1.5px black outline. Tickets end in a 2px dashed stub, and the logo squares, the barcode, the cascade of squares, the bridges and the diamonds are CSS or SVG, not images.

## Components

- button-primary: black pill, white text, 52px tall; on hover it grows two faint outline rings.
- button-small: yellow pill, 44px, Host Grotesk 14px, with the same ring hover; used in the nav and for secondary actions.
- nav-link: Host Grotesk 14px, with a line that draws under the text on hover.
- card-surface and card-beige: the 18px outlined cards for programs, plans, tickets, reviews and the contact card.
- badge-yellow: a 24px yellow pill with a thin outline; a white outlined variant also exists.
- input-field: a pill with a 1.5px outline, 50px tall, Host Grotesk 15px at weight 400; the message field is a rounded rectangle.
- icon-button: a 44px yellow circle whose arrow turns 45 degrees on hover.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis for smooth scrolling. The one idea: shapes arrive as echoes. Two outline copies trail behind an element and fold into it as it lands, and cards are dealt from a pile.

- Opening: on load the grey layers step out behind the dark panel, the panel scales in and its contents fade up into place (CSS, about 0.8s).
- Navigation: the pill hides when you scroll down past 120px and returns after a short scroll up.
- Programs: five cards start fanned in the middle and are dealt out; on desktop the section is held while it runs.
- Mentors: portraits arrive with two outline echoes, the diamonds turn a quarter and headings rise line by line.
- Masterclasses: the featured photo shrinks from a large scale into its slot while the ticket text slides in.
- Covers: the row near the middle of the screen turns into a black pill and its cover opens over the disc as a circle.
- Path: an orange diamond hops from step to step, turning as it lands, and the current step fills black.
- Reviews: the quote's words ink from pale grey to black, and the rating diamonds light up one by one.
- Pricing: the outer plans start piled on the middle one and are pulled apart while the bridges stretch.
- FAQ and contact: headings rise; the row diamond turns 45 degrees when opened; six squares fold into a cascade.

Easings are mostly power2 and power3, with `back.out(2)` for diamonds. With `prefers-reduced-motion: reduce` the entrance and scroll animations and the Lenis smooth scrolling are switched off, and the page reads in full; the nav bar still hides on scroll down and the hover transitions stay.

## Do's and Don'ts

- Do keep one outline weight, 1.5px black, on every card, button and field.
- Do keep orange for diamonds and small ornaments only.
- Do alternate white and beige cards to separate neighbours.
- Do use Funnel Display for headings and numbers and Host Grotesk for everything else.
- Do keep pills for actions and 18px corners for cards.
- Don't add drop shadows, gradients or blur.
- Don't add a third font, uppercase tracked labels or stock icon sets.
- Don't make orange buttons or orange text.
- Don't put photos in square corners with no outline.
- Don't change the counts the scripts expect, and keep the Design: 8B footer link unless the site owner asks to remove it.