---
version: alpha
name: "Outdoor gear rental template by 8B"
description: "Outdoor kit hire one-pager on pale blue with navy bands, white pill buttons and rounded cards, one electric blue accent and light, tightly tracked headings. Free HTML template by 8B, MIT."
colors:
  primary: "#06132e"
  secondary: "#4c5a70"
  tertiary: "#2b3bff"
  neutral: "#ecf1f5"
  surface: "#ffffff"
  on-surface: "#06132e"
  care-blue: "#b4ddf8"
  ice: "#ddebf6"
  caption-on-dark: "#a7b4ca"
typography:
  headline-display:
    fontFamily: National Park
    fontSize: 320px
    fontWeight: 800
    lineHeight: 0.82
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: National Park
    fontSize: 66px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.035em
  headline-md:
    fontFamily: National Park
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.028em
  title-lg:
    fontFamily: National Park
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  title-md:
    fontFamily: National Park
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  body-lg:
    fontFamily: Golos Text
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Golos Text
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Golos Text
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  button:
    fontFamily: Golos Text
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 18px
  md: 22px
  lg: 28px
  full: 999px
spacing:
  gutter: 44px
  section-padding: 168px
  grid-gap: 48px
  card-gap: 20px
  trips-gap: 14px
  photo-gap: 12px
  card-padding: 10px
  button-height: 56px
  disc: 44px
components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "6px 6px 6px 26px"
    height: 56px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
  button-round:
    backgroundColor: "{colors.ice}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 46px
  button-round-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
  nav-link:
    backgroundColor: "rgba(255, 255, 255, 0.8)"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "0 18px"
    height: 44px
  nav-link-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
  card-kit:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
  card-pack:
    backgroundColor: "color-mix(in srgb, #ffffff 7%, #06132e)"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
  badge:
    backgroundColor: "{colors.ice}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: "4px 12px"
    height: 30px
  input-field:
    backgroundColor: "rgba(255, 255, 255, 0.06)"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: "0 24px"
    height: 56px
---

# Kitfell

## Overview

Kitfell is a one-page site for a shop that hires out tents, bags, packs, stoves, boots and waterproofs by the night. The one idea is a clean, cold light: a pale blue page, navy bands, white cards, and one electric blue kept for prices, numbers, ticks and things you can press. Everything is rounded, like gear that has been handled and cleaned. It is for walkers and families who want a clear price list, ready packs and a fitting before the fells. The shop, prices and routes in the demo are invented.

## Colors

Eight custom properties, `--color-1` to `--color-8`; rules and glass are mixes of them.

- **Neutral (#ecf1f5):** the page ground and every light section.
- **Primary (#06132e):** text on light, the packs band, the footer, the phone menu, the opening window's backing and the pack cards (a 7% white mix). At 16% it draws the hairlines.
- **Tertiary (#2b3bff):** the only accent: kit prices, step numbers, "Check 1 of 6" labels, ticks, the shelf marker, hover fills, footer link underlines and focus outlines on light grounds (on navy the outline is white).
- **Surface (#ffffff):** kit, quote, FAQ and visit cards, buttons, the logo pill, and text on navy.
- **Care blue (#b4ddf8):** only the care section's ground.
- **Ice (#ddebf6):** round arrow buttons, difficulty badges, photo backing, the FAQ plus disc and text link underlines.
- **Secondary (#4c5a70):** descriptions, table headings, detail labels and unselected shelf names.
- **Caption on dark (#a7b4ca):** small text on navy: packs intro, the "Hire for" legend, placeholders and the legal line.

## Typography

**National Park** (variable, 400 to 800) sets headings, the logo, pack prices and card titles: 400 keeps big headings light, 500 gives titles and pack prices body, 800 is kept for the logo pill and the footer wordmark. **Golos Text** (400 to 600) sets body text, kit prices, buttons, labels and fields; nav links are 15px at 500.

- `headline-display`: the footer wordmark, sized by its character count (`--len`), about 320px at 1440px.
- `headline-lg`: section h2s and step titles, clamped from 38px on phones to 66px.
- `headline-md`: the h1 statement (46px on desktop, 25px on phones), the line that fills as you scroll; care panel and fitting story titles use the same style at 26px to 38px.
- `title-lg`: pack prices. `title-md`: card titles, route names, quotes.
- `body-lg` 17px, `body-md` 15px, `label-md` 14px, `button` 16px at weight 600.

Everything is sentence case. Display type is tracked tight (-0.02em to -0.045em); Golos Text is untracked except 0.01em on small labels.

## Layout

No max-width container: sections run full width between a fluid gutter (16px to 44px) and 96px to 168px of vertical padding. Each section is its own grid: a sticky heading beside two-column kit cards (with motion on, one column of cards between the heading and a shelf index); four pack cards two across; four ruled rows of steps; a fitting frame beside stories; six care panels; a photo beside a four-row route table; a three by three trips grid; a full-height visit photo with a 540px card on the right.

Text measures stop at 30em to 34em. At 1100px the packs go single column, at 900px the care panels stack and the nav becomes a menu button, at 760px nearly every grid is one column, and at 600px each route row becomes a small four-column grid.

## Elevation & Depth

Depth is mostly colour: pale ground, navy packs band, pale, care blue, pale, navy footer. Cards on pale grounds and the white buttons carry one soft shadow, `0 34px 60px -34px` in navy at 55%; care panels and FAQ items switch it off. Pack cards on navy have only a 1px line at 12% white. Nav links are frosted: 80% white with a 12px backdrop blur. Over the opening photo a navy gradient sits at 30% opacity.

## Shapes

Every shape is rounded; there are no square corners.

- **Pills (999px):** buttons, logo, nav links, badges, fields, nights options, the shelf index.
- **28px:** cards, trip cells, the opening window, the fitting frame, route, FAQ and visit photos. **22px:** FAQ items. **18px:** photos inside cards.
- **Circles:** round arrow buttons, ticks, the FAQ plus disc, radio dots.

Crops: 5:4 kit cards, 4:5 route photo, 3:4 fitting frame, 16:9 care panels, 3:2 FAQ. Icons are 2px round-cap inline SVG strokes.

## Components

- **button-primary:** a white pill 56px tall, label left, a 44px arrow disc right. On hover blue spreads from the disc to fill the pill (0.6s) and the arrow moves 4px.
- **button-round:** a 46px ice circle; on hover it turns blue and the arrow slides out and back in.
- **nav-link:** a frosted pill; on hover a blue line opens to a full fill.
- **card-kit:** white, 10px padding, photo, title, text, a blue price and a round arrow.
- **card-pack:** navy, photo, five tint badges, a 34px price. The nights switch is three outlined pills; the chosen one is filled white.
- **badge:** a 13px ice pill. **input-field:** a translucent white pill, used once in the footer.

## Motion

GSAP 3.13.0, ScrollTrigger and SplitText from jsDelivr, plus Lenis 1.3.4 (lerp 0.085). The idea is gear coming into place: things start tilted, stacked, small or masked, and settle as you scroll.

- **Navigation:** the bar slides up out of view after you scroll down past 80px and returns on any scroll up (0.5s).
- **Opening:** the photo window opens from a pill slit to its rounded frame (1.15s), the photo settles from 1.07 scale, and heading, text and button lift in turn. The photo drifts sideways in a 16s loop, paused off screen.
- **Headings:** every section h2 except the visit card's, each step title and the wordmark rise line by line out of a mask once (0.95s). The How hire works line fills word by word from grey to ink.
- **Kit:** each card grows from 0.84 scale, tilted and half faded, and shrinks as it leaves. A blue marker follows the card in view along an index of shelf names (a sticky column, or a pill bar on phones).
- **Packs:** the four cards start in one tilted pile and spread to their places (on phones each slides in from a side). Prices follow the radios, unanimated.
- **Fitting:** the frame holds while each photo wipes up over the last.
- **Care:** pinned, the six panels travel sideways; each tick swells from a pale dot to blue.
- **Routes and FAQ photos:** open from a pill slit.
- **Trips:** on desktop pinned, the grid shrinks from the centre photo until all nine cells show.
- **Visit:** the photo widens from a rounded window to full width.

Reduced motion switches off Lenis, the load-in and drift, every heading, fill, wipe and scroll scene and the pinning; the shelf index is not built, so the page reads as plain stacked sections. Two things keep running: the nav hide on scroll, and hover and open transitions (button fills, arrow moves, underlines, the FAQ plus, the phone menu fade).

## Do's and Don'ts

- Do keep blue for prices, numbers, ticks, hover fills and focus; don't use it as a band.
- Do keep every corner rounded: pills for controls, 28px for cards and photos.
- Do keep headings light and tight; weight 800 is for the logo and the wordmark only.
- Do keep one display face and one text face, in sentence case.
- Do keep the order of grounds: pale, navy, pale, care blue, pale, navy.
- Do keep white cards on pale grounds and navy cards on navy.
- Don't add gradients, glows or heavier shadows, or stock icons.
- Do give new controls the blue hover fill and blue focus outline.
- Do keep the Design: 8B footer link.