---
version: alpha
name: "Swimming pool template by 8B"
description: "Playful one-page design for an outdoor pool, lido or swim club: saturated rounded tiles on a pale grey ground, round photo windows and tilted price stickers. Free HTML template by 8B, MIT."
colors:
  primary: "#15181b"
  secondary: "#50565d"
  tertiary: "#fcb64d"
  neutral: "#e6e9e5"
  surface: "#ffffff"
  on-surface: "#15181b"
  pool-blue: "#84c6e8"
  sun-orange: "#f6874b"
  deep-green: "#0f5a40"
typography:
  headline-display:
    fontFamily: Savate
    fontSize: 260px
    fontWeight: 900
    lineHeight: 0.9
  headline-lg:
    fontFamily: Savate
    fontSize: 84px
    fontWeight: 900
    lineHeight: 0.92
  title-md:
    fontFamily: Savate
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1
  body-lg:
    fontFamily: Google Sans
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
  body-md:
    fontFamily: Google Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.35
  figure:
    fontFamily: Google Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
  button:
    fontFamily: Google Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.1
  note:
    fontFamily: Playpen Sans
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.1
rounded:
  field: 18px
  tile: 30px
  panel: 44px
  full: 999px
spacing:
  gap-tile: 12px
  gap-lane: 10px
  tile-padding: 34px
  page-gutter: 12px
  content-max: 1440px
  section-padding: 140px
  control-height: 52px
  nav-height: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 26px"
    height: "{spacing.control-height}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "14px 26px"
    height: "{spacing.control-height}"
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "0 8px 0 28px"
    height: "{spacing.nav-height}"
  tile-white:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.tile}"
    padding: "{spacing.tile-padding}"
  tile-yellow:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.tile}"
    padding: "{spacing.tile-padding}"
  tile-green:
    backgroundColor: "{colors.deep-green}"
    textColor: "{colors.surface}"
    rounded: "{rounded.tile}"
    padding: "{spacing.tile-padding}"
  sticker-price:
    backgroundColor: "{colors.deep-green}"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
  price-pill:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.figure}"
    rounded: "{rounded.full}"
    padding: "8px 14px"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.field}"
    padding: "12px 16px"
    height: 50px
---

## Overview

Splosh is a one-page site for a community outdoor pool, lido or swim club that sells timed sessions, lessons, a kiosk menu and tickets. The one idea is a pool-side sticker book: bright rounded tiles in blue, yellow, orange, green and white sit on a pale grey ground, photos are cut into circles, and prices arrive on tilted round stickers. It suits a local, friendly venue that wants to feel cheerful and clear about times and costs. The feeling is summer and a little cheeky.

## Colors

The palette is one pale ground and four saturated tile colours, with ink for type.

- **Primary (#15181b):** near-black ink for text, the black buttons, the menu overlay, the rules in the history list and above the footer's small print, and the whole events section ground.
- **Secondary (#50565d):** grey for supporting text: lane descriptions, the kiosk note, the price footnote, question answers.
- **Tertiary (#fcb64d):** sunny yellow. Yellow tiles, the circle that fills a button on hover, the toggles on questions, the logo disc and the winter sticker.
- **Neutral (#e6e9e5):** the page ground, the price pills on session lanes and the dividers between questions.
- **Surface (#ffffff):** white tiles, the nav pill, form fields, the lane tracks and the rings around round photos.
- **Pool blue (#84c6e8):** the first-screen panel, the footer panel and blue tiles.
- **Sun orange (#f6874b):** orange tiles, the underline that grows on link hover, and the tone of one lane.
- **Deep green (#0f5a40):** the winter panel and the tilted price stickers, which carry yellow type on it.

## Typography

Three families, each with one job.

- **Savate**, weight 900, always capitals: every section heading, card title, the giant Lounge word, the footer wordmark and the stickers. Line heights sit below 1 (0.9 to 0.92) for headings. Section headings run from 42px on a phone to 84px on a wide screen; card titles from 22px to 34px. The giant word and the footer wordmark are sized from their container width and the `--len` count, about 260px on a 1440px screen, never fixed.
- **Google Sans**, weights 400 to 700: body at 16 to 18px, lead paragraphs at 18 to 22px in weight 500, 14px labels, buttons at 16px weight 700, and times and prices at weight 700 with tabular figures.
- **Playpen Sans**, weight 600: used once, for the "first lesson's free!" note that is tilted beside the trial lesson button.

No letter spacing is set anywhere; the character comes from the heavy capitals.

## Layout

Content sits in a wrapper that is the viewport width minus 24px, up to 1440px, so tiles nearly touch the screen edges on a phone. Gaps between tiles are 10 to 12px; most sections are padded 80 to 140px at the top, the winter, lawn and questions sections less.

The first screen is one large blue panel with 44px corners (30px on a phone) on a 12-column grid: heading and text on the left, an aerial photo on the right, buttons and a four-point list below the text. Later sections change shape on purpose: two-column heads with a paragraph, five full-width lane bands, four club steps of rising height, a four-ticket row with every second ticket pushed down 46px, a row of three tiles with the middle one lowered, and a visit board of six tiles in named grid areas. At 999px and below the nav links collapse into a menu button with a full-screen overlay, two-column heads become one column and the club steps form a 2 by 2 block. At 640px the tickets and the visit board become one column.

## Elevation & Depth

Depth is made with colour fields, not shadows. Tiles are flat. The only shadow in the file is one soft drop shadow (0 10px 22px at 22% ink) under the round stickers, so they read as stuck on top. Photos gain depth from white rings and from overlapping: the kiosk chain of round photos overlaps by 14px, the round sauna photo hangs over the corner of the wide winter photo, and stickers cross photo edges. The events section changes ground to night ink, the one dark moment.

## Shapes

Tiles have 30px corners, the first-screen panel 44px, form fields 18px. Everything small and interactive is a pill or a circle: buttons, the nav bar, price pills, stickers, icon buttons, question toggles. Photos come in two shapes: a rounded blob at 34% radius for wide pictures and a perfect circle for lane, step, kiosk and word photos, often with a 4 to 6px white ring. The archive photos in the history section are grayscale. The O of the footer wordmark is a CSS yellow disc with a white border.

## Components

- **button-primary:** black pill, white 16px bold label, 52px high. On hover a yellow circle grows from the centre in 0.5 seconds and the label turns ink. **button-secondary** is the white version for dark and green grounds.
- **nav-bar:** a floating white pill, 64px high, with six bold Google Sans links at 15px and one black button, next to a separate white logo tile. It hides on scroll down and returns on scroll up.
- **tile-white, tile-yellow, tile-green:** the main containers, 30px corners and fluid padding of 20 to 34px. Blue and orange tiles use the same shape.
- **sticker-price:** a round Savate sticker at least 7.2em wide (15 to 20px type, up to 32px on the ticket tiles), rotated -9 degrees, deep green with yellow capitals; the yellow variant rotates 8 degrees.
- **price-pill:** the grey-green pill holding each session price.
- **input-field:** white, 50px high, a 2px ink border and 18px corners.

## Motion

The page loads GSAP 3.13, ScrollTrigger and Lenis 1.3 from jsDelivr. The one motion idea is things that move like pool objects: swimming, hopping, rolling and stamping. Lenis smooths the scroll.

- **First screen:** heading lines, text, buttons, list and photo pop up on load with a 0.72 second spring and a small stagger (CSS keyframes). The heated sticker stamps in.
- **Sessions:** on screens at least 1000px wide and 680px tall the section pins for about 1.1 screens while each lane's round photo swims across it and a colour fill follows, each lane at its own pace. Smaller screens run each lane as it passes.
- **Swim club:** the steps rise one after another, each round photo hops in an arc to its step, and the handwritten arrow draws.
- **Lawn:** pinned for one screen; a round photo travels through the word Lounge, lifting and tilting the letters.
- **Kiosk:** four round photos roll out of the hot chocolate photo into an overlapping chain.
- **Events:** the ground runs from blue through green to ink, and the photo brightens.
- **Visit:** tiles arrive scattered and tilted and gather into the board.
- **Stickers, sparks and headings:** stickers stamp in with a back ease, sparks draw three strokes, and several headings rise by 56px.

Most scroll scenes use a scrub of 0.5 seconds (the events ground 0.4). With reduced motion on, the scenes, the entrance animations and smooth scrolling are switched off and the page reads in full; hover fills and the nav hiding keep working.

## Do's and Don'ts

- Do keep the pale grey ground and let colour live only in tiles, panels and stickers.
- Do keep headings in Savate capitals and body text in Google Sans; do not add a fourth family.
- Do cut photos into circles for people and food, and keep the white ring.
- Do keep prices on tilted round stickers and times and prices in bold tabular figures.
- Do set `--len` on the giant word and the footer wordmark to the new character count when you change either.
- Don't add drop shadows to tiles, glass blur or gradients; depth here is colour.
- Don't make corners square or invent new radii; keep the 30px tiles, the 44px first panel, the 34% photo blob and pills.
- Don't set body text in the yellow or orange; text on those tiles stays ink.
- Don't let the events section lose its dark ground.