---
version: alpha
name: "Football club template by 8B"
description: "Youth football club website in signal orange, black and cream with poster-size capital headings and scene-by-scene scroll motion. Free HTML template by 8B, MIT."
colors:
  primary: "#141414"
  secondary: "#5c5a55"
  tertiary: "#ff4d1f"
  neutral: "#ece6d8"
  surface: "#f6f3ec"
  on-surface: "#141414"
  stone: "#a7a194"
typography:
  headline-display:
    fontFamily: Pliant
    fontSize: 128px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Pliant
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Pliant
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.01em
  title:
    fontFamily: Pliant
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.015em
  numeral-xl:
    fontFamily: Pliant
    fontSize: 196px
    fontWeight: 800
    lineHeight: 0.8
    letterSpacing: -0.05em
  body-md:
    fontFamily: Reddit Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Reddit Sans
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.25
  label-sm:
    fontFamily: Reddit Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  button:
    fontFamily: Reddit Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
rounded:
  sm: 6px
  md: 12px
  lg: 18px
  full: 999px
spacing:
  gutter: 64px
  gutter-phone: 18px
  section: 160px
  section-compact: 88px
  grid-gap: 16px
  nav-max-width: 1180px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 6px 6px 6px 24px
    height: 52px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
  button-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 6px 6px 6px 24px
    height: 52px
  button-dark-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
  tag:
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 13px
    height: 30px
  card-squad:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 20px
  card-quote:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.headline-sm}"
    rounded: "{rounded.lg}"
    padding: 26px
  input-field:
    textColor: "{colors.neutral}"
    rounded: "0px"
    padding: 12px 0
    height: 52px
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 8px 8px 8px 22px
    height: 64px
---

# Football club template by 8B

## Overview

Kilnfield Colts FC is a demo site for a volunteer-run youth football club. It speaks to parents choosing a team, in plain sentences, under headings as loud as a matchday poster. The one idea is a three-colour kit: signal orange, black and cream take turns as whole-section fields. Photos sit in rounded frames on those fields and type does the shouting. The feeling is friendly, noisy and inclusive. All names, fees, fixtures and quotes are invented demo content.

## Colors

The page uses the six colours of `:root`. Orange is the only accent.

- **Primary (#141414):** ink black. Text on light pages and on orange, the black sections (opening, week, coaches, fees, contact, footer), dark squad and quote cards, and button marks.
- **Secondary (#5c5a55):** graphite for intro paragraphs and table heads on light grounds, and the tone behind photos before they load.
- **Tertiary (#ff4d1f):** signal orange. The main button, logo mark, the promises and join sections, one squad card, two quote cards, the first fee column, the first contact row, week day labels, the form status line and the field focus underline.
- **Neutral (#ece6d8):** cream. Text on black, the questions section, the third squad card and fee column, and the hover text of the main button.
- **Surface (#f6f3ec):** the page background, the navigation bar and the fill that sweeps across the dark button on hover.
- **Stone (#a7a194):** quieter text on black (club line, intros, roles, labels), form underlines and the outline strokes of the huge day names.


## Typography

Two families, loaded from Google Fonts. **Pliant** carries every display line at weights 700 and 800 with its wide 125% stretch, set uppercase for headings and with tight negative tracking from -0.01em to -0.05em. **Reddit Sans** carries everything else, from 400 to 700.

- Section headings (`headline-display`) clamp from 46px on phones to 128px, in two `.line` spans so the halves can slide in from opposite sides.
- The opening statement and the bursary line use `headline-md` (25px to 46px), in sentence case.
- FAQ questions use `headline-sm` (19px to 24px), and the quotes use the same style set a little larger (20px to 26px); card names, fixture teams and form headings use `title` (22px to 28px).
- Join step numbers are `numeral-xl` (96px to 196px). Fee prices, promise lines, coach names, contact rows and the footer wordmark are Pliant at poster size; promise lines, contact rows and the wordmark are sized from their `--len` character count to fill the width.
- Body, labels and table cells stay in Reddit Sans, never uppercase, with no extra tracking.

## Layout

There is no centred max-width column: sections run edge to edge with a side gutter that clamps from 18px to 64px, and 88px to 160px of vertical padding. Section heads are a two-column grid, heading left and intro right. Squads, the week track and join steps use four columns, fees use three, and contact splits into form and details. The floating nav is the only width-capped element, at 1180px.

At 1080px and below squads and join go to two columns and the nav links collapse into a menu button. At 760px most grids go to one column, the fixtures table becomes stacked rows, and the three fee colours stack. At 560px the squad deck and join steps are single columns and the contact fields stack.

## Elevation & Depth

No shadow on the page is blurred. Depth comes from flat colour fields and layering. The nav is a fixed pill with a 1px hairline ring (12% ink) above everything. In the week, huge outlined day names sit behind the photo cards. In the fees, three colour fields sit under the text, and the black middle field carries a faint ring. Form fields lift with a 4px orange underline offset on focus. Do not add drop shadows or glass.

## Shapes

Buttons, tags and the nav are full pills (999px) with a 40px circular arrow mark inside the buttons. Cards, the opening photo and coach portraits use 18px; squad photos and phone coach portraits use 12px; the logo mark uses 9px and the promise sweep field uses 6px. Form fields are square, with a bottom rule only. Rules between rows are 1px to 2px lines. Photos are cropped to 4:5, 1:1, 3:2 or 4:3 frames, and the opening photo to a fixed-height band.

## Components

- **button-primary:** orange pill, ink text, 52px tall, with a black circle arrow mark. Hover wipes a black fill across and the label turns cream.
- **button-dark:** black pill used in the nav; hover wipes the page colour across and the label turns ink.
- **tag:** outlined pill with a 1.5px border in the card's own text colour; used on the squad cards (formats and other short facts).
- **card-squad:** 18px card in orange, black or cream, cycling by position, with a photo, days, a sentence and tags.
- **card-quote:** black or orange card, 340px minimum height.
- **input-field:** underline-only, 52px tall, label above; 18px medium text in cream on the black contact section.
- **nav-bar:** cream pill with the logo mark, club name, six links and a button.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and Lenis smooth scrolling. The one idea: colour fields and poster lines move into place as you scroll.

- **Opening:** on load, the club line, statement and buttons rise 28px and the huddle photo opens upward from its bottom edge.
- **Section headings (all but the week):** the two lines slide in from opposite sides by 14%, scrubbed to scroll. Fixtures table, bursary line, FAQ items and footer columns rise with a 0.9 second clip reveal.
- **Squads:** from 1081px wide the deck pins while four cards are dealt from one turned pile into a row; below that each card slides in from alternating sides.
- **Week:** pinned; the seven days travel sideways while the outlined day names lag behind their photos.
- **Promises:** a black field sweeps across each line as it crosses the middle of the screen, and the text inverts to cream inside it.
- **Coaches:** each name splits from the centre toward the edges as the portrait opens between. On phones the names slide in from the sides.
- **Join:** pinned on wide screens; each number appears large and flies into its column, then title and text rise. Below that each number scales down into place.
- **Voices:** six cards loop sideways, pausing off screen, on hover and on focus.
- **Fees:** the black middle field starts across all three columns and narrows to the middle, uncovering the orange and cream fields, while the outer tiers’ text slides in from the sides; on phones the field scales vertically.
- **Contact:** the three huge rows drift in opposite directions.
- **Nav:** the bar slides up and away after scrolling down past 160px and returns on scrolling up; the phone menu is a full-screen overlay.

With reduced motion on, Lenis, the opening entrance, the section reveals, the pinned scenes, the sideways loop and the contact drift are all switched off, and the sections show as a normal stacked page. Two things are not switched off: the nav still slides away on scroll down (a 0.5 second transition), and hover transitions on buttons, icon buttons, links, form fields and the FAQ icon still run. New motion should sit inside `prefers-reduced-motion: no-preference`.

## Do's and Don'ts

- Do keep orange as the single accent and let black, orange and cream alternate as whole-section fields.
- Do set headings in Pliant, uppercase, wide and heavy, and update `--len` whenever a poster line's words change.
- Do use full pills for buttons and tags, with the circular arrow mark.
- Don't add a third typeface, thin weights or lowercase headings.
- Don't add blurred shadows, glass or stock icon sets.
- Don't round form fields into boxes; keep the bottom rule only.
- Don't make claims about safeguarding, badges or fees without the club's own facts.
- Don't remove the Design: 8B link in the footer unless the site owner asks.