---
version: alpha
name: "Language course template by 8B"
description: "A one-page site for an evening language school: navy ground, one pink accent, torn-paper photo stickers and speech bubbles. Free HTML template by 8B, MIT."
colors:
  primary: "#1d2440"
  secondary: "#ff9bb4"
  surface: "#f9fcf4"
  on-surface: "#f9fcf4"
  charcoal: "#2b2b2b"
  caption: "#a7b0d6"
  rule: "#6f7ba9"
  night: "#151b33"
typography:
  headline-wordmark:
    fontFamily: Schibsted Grotesk
    fontSize: 284px
    fontWeight: 800
    lineHeight: 0.8
    letterSpacing: -0.06em
  headline-display:
    fontFamily: Schibsted Grotesk
    fontSize: 112px
    fontWeight: 800
    lineHeight: 0.92
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 92px
    fontWeight: 800
    lineHeight: 0.96
    letterSpacing: -0.045em
  statement:
    fontFamily: Schibsted Grotesk
    fontSize: 62px
    fontWeight: 700
    lineHeight: 1.04
    letterSpacing: -0.035em
  title-md:
    fontFamily: Schibsted Grotesk
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.02em
  lead:
    fontFamily: Schibsted Grotesk
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.32
    letterSpacing: -0.01em
  body-md:
    fontFamily: Schibsted Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  label-md:
    fontFamily: Schibsted Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
  button:
    fontFamily: Schibsted Grotesk
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
rounded:
  card: 14px
  field: 26px
  panel: 28px
  full: 999px
spacing:
  gutter: 56px
  section-y: 180px
  max-width: 1360px
  control-height: 52px
components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 28px"
    height: "{spacing.control-height}"
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 26px"
    height: "{spacing.control-height}"
  badge-term:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "6px 13px 7px"
  bubble-pink:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "11px 18px 12px"
  bubble-cream:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "11px 18px 12px"
  input-field:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.field}"
    padding: "14px 20px"
    height: 54px
  card-trip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "14px 14px 22px"
  panel-form:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.panel}"
    padding: 40px
---

# Small Talk: language course template

## Overview

Small Talk is a one-page site for a language school that teaches adults in small evening groups, with terms, a free first lesson and a team of teachers. The one idea is a conversation made visible: photos are torn stickers, greetings are speech bubbles, and a pink accent on a navy ground does the talking. It is for a friendly, chatty brand that sells company and confidence rather than grammar tables. The feeling is a loud, warm room, not a classroom, and the whole page keeps that tone.

## Colors

Seven variables, one accent.

- **Primary, navy (#1d2440):** the ground of the opening, syllabus, languages, voices, level and contact sections, and the dark text on pink and cream surfaces.
- **Secondary, pink (#ff9bb4):** the only accent: the wordmark, heading accent words, bubbles, the term badge, teacher name bars, club dates, the trips ground, the small-print note, the button sweep and the focus ring.
- **Surface, cream (#f9fcf4):** body text on navy, the fees ground, sticker rims, quote notes, cream buttons and cream bubbles.
- **Charcoal (#2b2b2b):** the ground of the teachers and after-class sections, a pause between navy blocks.
- **Caption (#a7b0d6):** lead paragraphs, small labels, teacher bios and club texts.
- **Rule (#6f7ba9):** hairlines between rows, field borders, menu and footer dividers, and the shade of a peeled photo corner.
- **Night (#151b33):** the full-screen menu, the contact form panel, field fills, the footer and the tone of the soft shadow.

Pink never carries long text; on pink and cream the type is navy.

## Typography

One family, **Schibsted Grotesk**, a variable font loaded from Google Fonts for weights 400 to 800, with a metric-matched Arial fallback. Its heavy weights stay friendly at huge sizes and its regular weight stays clear in small groups of text.

- **headline-wordmark** (800): the h1 is sized from its container, 100cqi divided by the character count times 0.468, so the brand fills the first screen; the token shows the desktop value for ten characters.
- **headline-display** (800, 46px to 112px): language names; prices run at 58px to 92px.
- **headline-lg** (800, 42px to 92px): section headings, in two lines, the second in pink on navy and charcoal grounds and in navy on the pink trips and cream fees grounds.
- **statement** (700, 30px to 62px): the opening statement; the student quotes are smaller, 600 at 17px to 20px.
- **title-md**, **lead**, **body-md**, **label-md** (21px to 27px, 19px to 23px, 17px, 14px): cards and names, leads, running text and captions.
- **button** (700, 17px): buttons; the level finder reply chips use 600 at 14px to 15px.

Everything is sentence case; large type is tracked tight, from -0.035em to -0.06em.

## Layout

Content sits in a 1360px wrapper with a fluid gutter of 16px to 56px; sections are padded 96px to 180px. The first screen is a three-column grid: a tape and a small photo card, the portrait sticker, and the intro. Most other sections open with a heavy heading on the left and a short lead on the right, followed by a list: a 3 by 2 plan, wide rows, a four-column teacher counter, event rows, three fee plans.

At 759px grids drop to one or two columns, the small photo card disappears, bubbles shrink to 14px, and the teachers grid goes to two columns already at 959px. The contact grid stacks at 859px.

## Elevation & Depth

Depth is made with rotation and overlap rather than shadow. Stickers carry a thick cream rim, notes and the small print are torn sheets, photos sit slightly turned, and the portrait is cut into a base and a lifted cap. One soft shadow in deep navy appears under the tape and the trip cards. The ground colour changes from navy to charcoal, pink and cream mark the big shifts.

## Shapes

- Pills (999px) for buttons, bubbles, the badge and the wordmark label; a 14px radius for the cut-corner photos and trip cards (8px on trip photos); 26px for fields and 28px for the form panel and the level finder bubbles.
- Torn edges are SVG clip paths (tear-1 to tear-4, a cap, a base, a note) reused for stickers and sheets.
- Speech bubbles have a small triangular tail drawn with a clip path.
- Syllabus, trip and opening card photos have one cut corner with a peeled flap in a cream to blue-grey gradient.
- Each postmark is a 96px navy circle with a dashed outline.

## Components

- **button-primary:** a cream pill with navy text, 52px high; on hover a pink torn-edge fill slides across.
- **button-outline:** the same pill as a 2px outline, used for secondary actions; its label turns navy on the pink sweep.
- **badge-term:** the pink pill inside the opening tape ("Spring term") and on each syllabus week.
- **bubble-pink and bubble-cream:** greetings, in alternating colours around the statement; the level finder uses the same shape for questions and results.
- **input-field:** a rounded field on the night panel with a 2px rule border that turns pink on focus.
- **card-trip:** a cream postcard with a cut photo, a postmark and a facts line.
- **panel-form:** the night panel of the contact form.

## Motion

GSAP 3.13.0 with ScrollTrigger and SplitText, plus Lenis 1.3.4 (lerp 0.085), load from jsDelivr. The motion idea is stickers being stuck on and torn off: things arrive turned and slapped flat, and leave by ripping.

- **Opening:** on load the wordmark rises, the portrait lands and the tape and intro slide in; scrolling lifts the torn cap away, tilts the portrait and bursts eight bubbles around the statement, whose words light up one by one.
- **Syllabus, teachers, fees, footer:** scrubbed scenes: photos fly onto their slots, teachers pop out of their name bars, the small print grows from a scrap, and the face rises with its bubble.
- **Voices:** the section is 340svh tall with a sticky screen, so it plays for about 240svh of scroll while four notes rip off a pad.
- **Trips:** the screen pins and the postcard track runs sideways for as far as it overflows, stamping each postmark.
- **Heading lines, rules, bubbles:** headings rise in lines (0.9s, power3.out), row dividers are drawn (1.1s) and bubbles are stuck on with a turn (0.6s, back ease), each once when it reaches 90% of the screen.
- **Level finder:** no animation scrub; each reply sets a score and the sum selects one of three result bubbles.

With reduced motion, Lenis and all entrance, loop and scroll animations are off and voices and trips stay plain grids. The bar's hide-on-scroll and the hover fills still run.

## Do's and Don'ts

- Do keep pink as the single accent and keep text on pink and cream navy.
- Do keep headings heavy and tight, with the second line carrying the accent.
- Do use torn edges and turned stickers for photos, not plain rectangles or square corners.
- Do keep bubbles short, like real greetings, and let them alternate pink and cream.
- Do keep the ground shifts between navy, charcoal, pink and cream rather than adding new colours.
- Don't add a second typeface, thin weights or all-caps labels.
- Don't add drop shadows, gradients on surfaces or stock icons; depth comes from turns, overlaps and rims.
- Don't add a fourth level question without changing the result ranges, and don't change the wordmark text without updating its --len.
- Don't fake a perfect classroom: photos should show people talking, not slides.