---
version: alpha
name: "Language school template by 8B"
description: "A one-page language school site in extra-wide brown-black headings and flat orange, yellow, green, pink and blue shapes on white, with pinned sideways and chat scenes. Free HTML template by 8B, MIT."
colors:
  primary: "#4a231c"
  on-primary: "#ffffff"
  surface: "#ffffff"
  surface-cream: "#fcefe2"
  accent-orange: "#f4783a"
  accent-yellow: "#f7c744"
  accent-green: "#24804f"
  accent-pink: "#f49cb0"
  accent-blue: "#6fa8f2"
  caption: "#6e625c"
  caption-light: "#8c807a"
  hairline: "#e9ddd5"
typography:
  headline-lg:
    fontFamily: TikTok Sans
    fontSize: 46px
    fontWeight: 800
    lineHeight: 1.12
    letterSpacing: -0.01em
  statement:
    fontFamily: TikTok Sans
    fontSize: 38px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: -0.005em
  greeting:
    fontFamily: TikTok Sans
    fontSize: 76px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.02em
  tag:
    fontFamily: TikTok Sans
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.1
  title-md:
    fontFamily: Gabarito
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.01em
  body-md:
    fontFamily: Gabarito
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  caption:
    fontFamily: Gabarito
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Gabarito
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0.01em
  button:
    fontFamily: Gabarito
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 6px
  lg: 28px
  xl: 48px
  full: 999px
spacing:
  gutter: 48px
  content-max: 1240px
  section-y: 140px
  grid-gap: 16px
  row-gap: 14px
  button-height: 56px
  small-button-height: 40px
components:
  button-primary:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "8px 8px 8px 26px"
    height: "{spacing.button-height}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "10px 24px"
    height: 48px
  button-social:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "8px 18px"
    height: "{spacing.small-button-height}"
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "20px 48px"
  language-panel:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: "26px 24px 24px"
  day-pill:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.primary}"
    typography: "{typography.tag}"
    rounded: "{rounded.full}"
    padding: "8px 22px"
  price-row:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.primary}"
    typography: "{typography.title-md}"
    rounded: "{rounded.full}"
    padding: "14px 18px 14px 14px"
  chat-bubble:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: "20px 24px"
  speech-bubble:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.primary}"
    typography: "{typography.statement}"
    rounded: "{rounded.xl}"
    padding: "110px 120px"
---

# Language school template

## Overview

This is a one-page site for a language school or evening class provider whose students are adults starting or returning to a language. The idea is that a school should look like people talking: wide, heavy headings, flat bright shapes and rounded pills that read like speech bubbles and stickers, all on a clean white page. Every list is colour-coded from the same five bright fills and the dark brown, so languages, levels, prices and quotes feel like one family. The mood is friendly and confident, never childish. School, city, timetable, prices and students in the demo are invented.

## Colors

Brown-black ink and white carry the text; five bright fills carry the structure.

- **Primary (#4a231c):** all main text, the menu overlay, the trial panel, dark language panels, the Private lessons row, the C1 level bar and the button hover fill.
- **On-primary and surface (#ffffff):** the page, the pill behind the scrolled nav bar, level code tags, price shape circles, and text on dark panels.
- **Surface cream (#fcefe2):** only the closing speech bubble and its tail.
- **Accent orange (#f4783a), yellow (#f7c744), green (#24804f), pink (#f49cb0), blue (#6fa8f2):** language panels, price rows, level bars, day pills and chat bubbles cycle through them with nth-child rules. Yellow is also the primary button fill, the logo mark and the FAQ plus circle.
- **Caption (#6e625c):** small descriptions and contact labels. **Caption light (#8c807a):** the second half of the closing statement before it fills in.
- **Hairline (#e9ddd5):** rules between timetable rows and questions, photo placeholders and the trial paragraph.

## Typography

TikTok Sans at weight 800 and 150% width gives every heading, greeting, price, wordmark and day pill its wide, heavy look. Gabarito, weights 400 to 700, handles body text, buttons and small labels. Sizes use clamp: the headline runs from 28px to the 46px token, the statement from 23px to 38px. Greetings are sized by their panel: the panel width divided by 0.8 times `--len`, capped at 76px, so `--len` must match the greeting's character count. The day pills use the display face at 16px; secondary buttons are Gabarito 600 at 15px. Nothing is uppercase and tracking stays near zero.

## Layout

Content sits in a 1240px column with a gutter of 16px to 48px (4vw), and sections are separated by 80px to 140px (10vw). Most sections start with a heading beside a short paragraph in two columns. Language panels sit in one sideways row while the track runs; with reduced motion they are four across above 1100px, two below, one under 560px. The timetable and chat sections pair a sticky or short heading column with a longer one. At 900px and below, two-column areas stack, level bars turn into horizontal bars, price rows become 28px cards and the nav links give way to a menu button with a full-screen overlay.

## Elevation & Depth

The page is almost flat. The only shadow is a soft brown one under the white nav pill once the page scrolls. Depth comes from overlap: coloured shapes clipped inside panels, a pile of shapes dropping onto a half-disc, and a speech bubble with a tail laid over the white page.

## Shapes

Pills (999px) for buttons, tags, price rows and bars; 28px for panels, bubbles and phone cards; 48px for the closing bubble. Chat bubbles keep one 6px corner pointing at the face. Decorative shapes are CSS or one SVG scallop symbol: circles, half-discs, rings, bars, four- and eight-point stars, a play triangle. Photos are cropped to pills or circles.

## Components

- **Button primary:** yellow pill with a dark circle arrow that slides on hover as the dark fill grows from the right.
- **Button secondary and social:** outlined pills that fill dark from the right on hover.
- **Nav bar:** transparent at the top, a white pill with a shadow after 40px of scroll.
- **Language panel:** greeting, name, days and levels over two shapes in contrasting colours.
- **Day pill, price row, chat bubble:** day pills and price rows are pills, chat bubbles have 28px corners with one 6px corner; day pills cycle four fills, price rows three (orange, dark brown, yellow), chat bubbles five.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, and Lenis 1.3 for smooth scrolling. The one idea is that scrolling drives the page: sideways, upward, then bubble by bubble.

- **Languages:** the stage pins and the eight panels slide sideways with a 0.6s scrub; shapes on late panels swing upright as they arrive.
- **Levels:** five bars grow in turn on a scrub, upward on desktop, sideways on phones.
- **Week, prices, FAQ:** headings and rows lift 36px and fade in over 0.9s once; shapes and pills spring in with a back ease.
- **Trial:** six shapes drop and bounce onto a half-disc that rocks.
- **Testimonials:** the section pins for half a screen per bubble while faces and bubbles pop in and the thread climbs.
- **Contact:** the cream ground opens from a narrow pill, the tail grows in from its corner, and the statement's second half fills in word by word.

With reduced motion, the pinned scenes, entrance animations and smooth scrolling switch off, and the content reads in full. The nav bar's hide on scroll and CSS hover fills still run. Keep the section ids, data-8b-section, data-8b-motion, data-8b-part and the scene classes listed in AGENTS.md.

## Do's and Don'ts

- Do keep the two typefaces: wide TikTok Sans 800 for display, Gabarito for reading.
- Do keep the five bright fills and cycle them; add a colour only through the `:root` variables.
- Do keep pills and 28px corners; do not add sharp rectangles or thin card outlines.
- Do keep shapes flat; do not add gradients, glows or drop shadows.
- Do update `--len` for each greeting and `--lv-step` for each level bar.
- Do keep text at 4.5:1 contrast on its fill: dark ink on the light fills, white on the dark brown and green.
- Don't use stock icons, emoji or a second display face.
- Don't put long paragraphs inside coloured panels; they hold a greeting, a name and a line or two.
- Don't add a bolted-on scroll effect; each section already has its own.
- Don't present the demo school, prices or students as real.