---
version: alpha
name: "Driving school template by 8B"
description: "A one-page driving school site built as a bento of saturated colour tiles on a pale grey ground, set in a wide heavy display face with a plain grotesk. Free HTML template by 8B, MIT."
colors:
  primary: "#0e0e10"
  secondary: "#ffb300"
  tertiary: "#a15cf6"
  neutral: "#575a62"
  surface: "#eef0f3"
  on-surface: "#0e0e10"
  card-white: "#ffffff"
  accent-orange: "#ff5b37"
  accent-red: "#ec3b41"
  accent-green: "#22c35d"
  accent-blue: "#3d84f7"
  accent-lilac: "#cdb4fa"
typography:
  headline-display:
    fontFamily: Pliant
    fontSize: 12rem
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Pliant
    fontSize: 3.5rem
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Pliant
    fontSize: 1.7rem
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.01em
  wordmark:
    fontFamily: Pliant
    fontSize: 2.25rem
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: -0.05em
  body-lg:
    fontFamily: Host Grotesk
    fontSize: 1.35rem
    fontWeight: 500
    lineHeight: 1.35
  body-md:
    fontFamily: Host Grotesk
    fontSize: 1.0625rem
    fontWeight: 400
    lineHeight: 1.45
  label-md:
    fontFamily: Host Grotesk
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.01em
  button:
    fontFamily: Host Grotesk
    fontSize: 1rem
    fontWeight: 600
    lineHeight: 1.1
rounded:
  tile: 34px
  control: 14px
  pill: 999px
spacing:
  gap: 20px
  tile-padding: 36px
  rail-width: 140px
  top-bar-height: 72px
  control-height: 49.6px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.card-white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12.8px 23.2px
    height: 49.6px
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12.8px 23.2px
    height: 49.6px
  button-booking:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12.8px 23.2px
    height: 49.6px
  nav-tile:
    backgroundColor: "{colors.accent-blue}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.control}"
    padding: 12px 12.8px
  card-tile:
    backgroundColor: "{colors.card-white}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.tile}"
    padding: 36px
  card-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.card-white}"
    typography: "{typography.body-md}"
    rounded: "{rounded.tile}"
    padding: 36px
  lane-row:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: 14.4px 35.2px
  input-field:
    backgroundColor: "{colors.card-white}"
    textColor: "{colors.primary}"
    rounded: "{rounded.control}"
    padding: 12px 16px
    height: 49.6px
---

## Overview

A website for a driving school that teaches first-time and nervous learners. The idea is a colour code: five saturated hues sit on an off-white ground as flat tiles, and the same hues mark lesson stages, nav tiles, package cards, instructor cards and district zones, so a visitor learns the system once and then reads the page by colour. Everything is a rounded tile with ink text and big, wide, heavy headlines. The feeling is confident and playful but orderly, the opposite of a stern exam hall.

## Colors

- **primary / on-surface, #0e0e10**: all text, the solid button, the dark booking card, hairlines, the tunnel grid lines and the centre cells of the district board.
- **secondary, #ffb300 (amber)**: the hover wipe on buttons, the district card, the amber nervous panel, and one lesson stage, nav tile, instructor card and package card each; also the status line on the dark card.
- **tertiary, #a15cf6 (purple)**: the Book a lesson button, the east district zone, and one package card, instructor card and lesson stage each.
- **neutral, #575a62**: intro paragraphs, the struck jargon terms and the legal line.
- **surface, #eef0f3**: the page ground and the top bar.
- **card-white, #ffffff**: form fields, jargon cells, the district cells before they take their zone colour, the hover wipe of the purple button, the focus ring halo and text on the dark booking card. Every card on the page is recoloured, so no plain white card remains.
- **accent-orange, #ff5b37**: the all-inclusive price card, one nav tile, one quote and one footer cell.
- **accent-red, #ec3b41**: the first lesson stage, the red nervous panel and the strike-through on jargon.
- **accent-green, #22c35d**: the hours tile, the south district zone, the green nervous panel, the contact info card, one nav tile.
- **accent-blue, #3d84f7**: the north district zone, and one nav tile, instructor card, package card and lesson stage each.
- **accent-lilac, #cdb4fa**: a pale tile, one quote and one jargon translation cell.

Text is ink on colour, white on ink.

## Typography

**Pliant** (weights 800, stretched to 115%) is the display face: section headings, the price figures, stage names, the wordmark and the huge words. It is wide and heavy, so keep it short, in sentence case, with tight negative tracking. **Host Grotesk** (400 to 600) handles body copy, labels, buttons and form fields.

Section headings use headline-lg (2rem on phones, 3.5rem on desktop). The three nervous words use headline-display, sized from their character count (`--len`) up to 12 to 13rem. Card titles use headline-md. Intro paragraphs are body-md in grey, lead paragraphs in tiles body-lg, and labels, hours and numbers label-md. The footer wordmark is Pliant at up to 22vw, tracked -0.06em. Nothing is uppercase.

## Layout

On screens of 1024px and wider a fixed left rail (140px) holds the wordmark, four numbered colour tiles, the booking button and the phone number; the content is offset to its right. Below that a sticky 72px top bar carries the wordmark, the booking button and a menu button opening a full-screen sheet with the tiles in two columns. There is no maximum content width: tiles stretch edge to edge inside a gutter of 10px on phones up to 20px on wide screens, and the gap between tiles uses the same value.

Sections are rows of tiles: a price bento, a text card beside a perspective tunnel (stacked above it and square below 1024px), four staggered portrait cards, a card beside a 24-cell district board, a jargon table, a photo reel, three package cards and a booking card beside a contact card. Breakpoints are 760, 900, 1024 and 1200px. On phones grids become one column, the district board three columns, the staggering drops away and the footer field turns nearly square.

## Elevation & Depth

There are no soft shadows. Depth comes from flat colour fields, 1.5px ink hairlines and one perspective effect, the tunnel, whose four walls are grid lines filled with colour and photo cells. The only shadow is a 3px white ring behind the 3px ink focus outline, so focus stays visible on dark and coloured tiles.

## Shapes

Large tiles round to 34px on desktop (22px on phones). Controls such as nav tiles, icon buttons and form fields round to 14px. Buttons, badges and, from 760px, the lesson rows are full pills. The footer cells, legend swatches, price squares and tunnel cells are square. Photos are cover-cropped to the tile radius. Besides the menu and close icons, the one glyph is a thin stroked arrow in buttons and nav tiles.

## Components

- **button-primary**: ink pill with white text; on hover an amber fill wipes in from the left and the text turns ink. Includes a small diagonal arrow.
- **button-secondary**: transparent pill, 2px outline, same amber wipe.
- **button-booking**: purple pill for Book a lesson and the form submit; its hover wipe is white.
- **nav-tile**: colour tile with number, arrow and label, cycling blue, amber, orange, green; hover wipes ink across and the text turns white.
- **card-tile**: white tile, recoloured per section from the palette.
- **card-dark**: the booking card.
- **lane-row**: a lesson stage as a coloured row (pill from 760px) cycling red, amber, green, blue, purple.
- **input-field**: white borderless field in regular weight; on the dark booking card its focus outline is white, with no halo.

Also present: outlined pill badges, text links whose underline sweeps out and back on hover, and the menu and close icon buttons, which turn amber while their icon hops out and back on hover.

## Motion

The page loads GSAP, ScrollTrigger, SplitText and Lenis; the one idea is blocks that assemble: colour cells step, slide and open from a corner into place as you scroll.

- **Opening**: the headline block rises in on load and the five stage rows slide in from alternating sides, staggered (CSS, about 0.9s).
- **Navigation**: a class toggle slides the top bar, and on wide screens the side rail, up out of view on scrolling down and back on scrolling up (0.4s).
- **Lessons**: scrubbed, four tiles start scaled down behind the orange card and slide out to their cells in turn (on phones each starts at the tile above).
- **Cars**: scrubbed, each of the tunnel's four walls, grid and cells together, glides six grid units toward the viewer and settles.
- **Instructors, passed and contact**: headings split into lines arriving from alternate sides; cards and portraits open from their top left corner.
- **Areas**: scrubbed, districts take their zone colour in order of distance from the centre cells.
- **Nervous**: a sticky stage holds inside a 330svh track, about 2.3 screens of scrolling; an amber and then a green square grow from the bottom right corner into full panels while their word and note rise in.
- **Method**: scrubbed per row, a jargon term slides into its cell, is struck through in red, and the plain words rise.
- **Passed**: a photo reel loops sideways in 48 seconds, pausing on hover, focus and off screen.
- **Prices**: one square per lesson hour fills in as the card crosses the screen.
- **Footer**: six cells step along the grid to their squares.

Lenis smooth scrolling runs only without a reduced-motion request. With it, all scroll scenes, load-in animations, the reel loop and the sticky stage are off and the page reads as static tiles. Two things keep running because no media query gates them: the nav hide and show, and the hover wipes, link sweeps and icon hops.

Keep the section ids, `data-8b-motion` attributes and script classes (see AGENTS.md); update `--len` when the big words change.

## Do's and Don'ts

- Do use only the listed palette, one hue per tile, and ink text on every coloured tile.
- Do keep tiles flat: solid fills and 1.5px ink hairlines.
- Do round big tiles to 34px, controls to 14px, buttons to pills.
- Do keep headings short, wide and in sentence case, with tight tracking.
- Don't add drop shadows, glass, blur or gradients.
- Don't introduce a third typeface or uppercase headings.
- Don't add icon sets; besides the menu and close icons, the only glyph is the stroked arrow.
- Don't remove the Design: 8B footer link unless the site owner asks.
- Don't treat the invented names, prices and addresses as facts about a real business.