---
version: alpha
name: "Bike rental template by 8B"
description: "E-bike and bike hire one-pager in near black and pale grey with a single acid-lime accent, tight sans headings and double rules that draw across the page. Free HTML template by 8B, MIT."
colors:
  primary: "#0d0f0f"
  secondary: "#555c5e"
  tertiary: "#d4ff1e"
  neutral: "#e1e3e2"
  surface: "#ffffff"
  on-surface: "#0d0f0f"
  slate: "#27333a"
  caption-on-dark: "#a9b1b3"
typography:
  headline-xl:
    fontFamily: Stack Sans Headline
    fontSize: 176px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Stack Sans Headline
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Stack Sans Headline
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  body-lg:
    fontFamily: Stack Sans Text
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.01em
  body-md:
    fontFamily: Stack Sans Text
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Stack Sans Text
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  button:
    fontFamily: Stack Sans Text
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.05em
  field-input:
    fontFamily: Stack Sans Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
rounded:
  none: 0px
  pill: 999px
spacing:
  gutter: 32px
  section-padding: 168px
  split-gap: 80px
  control-height: 48px
  pass-padding: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 26px
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 26px
    height: 48px
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.field-input}"
    rounded: "{rounded.none}"
    height: 48px
  card-pass:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 24px
  disc-button:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    height: 56px
---

# Bike rental template by 8B

## Overview

A one-page site for an e-bike or bike hire business that runs several pick-up stands and guided rides. The idea is a technical poster: a near-black first screen, pale grey and slate bands, tight headings in one weight, and a single acid-lime accent that is spent only on things that mean go. Facts sit in ruled rows and tables rather than cards, for a rider deciding quickly which bike, which stand and what it costs. The feeling is hard, exact and a little sporty, never cute.

## Colors

The page is mostly grey and black with lime used sparingly.

- **Primary (#0d0f0f):** text, filled buttons, rules and the dark bands: the first screen, the stands band, the rides band, the footer and the menu overlay.
- **Secondary (#555c5e):** small labels, bike kinds, spec terms, route facts, kit text, table heads, form labels and FAQ answers on the light ground.
- **Tertiary (#d4ff1e):** the only accent. It colours the last line of the first-screen heading, the second word of the rides heading, the stand codes, button hover fills, round discs, the filling progress lines, the reviews band and the monthly pass card.
- **Neutral (#e1e3e2):** the page ground and navigation bar, and the text and square marks on the dark bands.
- **Surface (#ffffff):** button labels, text on the hire and rides bands and photo captions.
- **Slate (#27333a):** the ground of the hire band, the multiply tint laid over the night photos, and the placeholder behind every photo.
- **Caption on dark (#a9b1b3):** grey text and hairlines on dark: the four first-screen facts, stand descriptions, ride date labels, the hire track, footer heads and the legal line.

## Typography

Two families from Google Fonts, both loaded as latin and latin-ext files.

- **Stack Sans Headline** is set at one weight (400) with negative tracking and a line height at or under 1. It carries the first-screen heading, every section heading, bike, stand, route and step names, the riders' quotes and the FAQ questions. The upper values are 96px for headings (fluid from 40px) and 54px for names (fluid from 30px). The rides heading is larger, up to 176px.
- **Stack Sans Text** carries body copy at 17px, the lead and table figures at up to 23px, and every label. Labels are 12px, weight 500, uppercase with slight tracking. Buttons and underlined text links are 13px, weight 500, uppercase with wider tracking; header and footer links are 12px.

Emphasis comes from size and from the alternating bands, not from weight changes. Do not add a second display face.

## Layout

The first screen is a 12-column grid: the heading across the left eight columns, the lead, four facts, a button and a text link in the left six, and a tall street photo in the right four. Nine sections then open with the same header: a double rule, a small square mark with a lime plus and a short note aligned to the right. Content runs edge to edge with a gutter fluid between 16px and 32px and no max-width container.

Sections are padded fluidly between 88px and 168px. Splits are 7/5 for each bike, 5/7 for kit, rides and contact, and 8/4 for the price table and the pass card. Stands are rows of code, name, address and hours. The routes are one wide row of panels, each up to 1000px wide. At 760px and below the splits stack to one column, the header link columns give way to the menu button, and the hire line turns vertical.

## Elevation & Depth

There are no shadows. Depth comes from colour bands that alternate down the page (dark, light, dark, light, slate), from slate tints laid over photos with multiply blending at 55 to 78 percent, from a dark gradient over the lower part of the first-screen photo, and from pinned stages where the next image wipes in over the last.

## Shapes

Everything is square except the controls. Buttons, discs, the FAQ sign, the stand dot and the lime dot at the end of the fleet marker are pills or circles (999px). Photos, the price card, form inputs and bands have square corners. Photo ratios are 3:2 for bikes, 16:10 for routes and 4:5 for the first screen and kit. The signature line is the double rule: a 4px line over a 1px line, with a 5px double border under the table head.

## Components

- **button-primary:** near-black pill, white label, 48px high, 26px side padding. On hover a lime fill sweeps in from the left and the label turns near black.
- **button-outline:** the same pill with a hairline border and no fill, used on dark bands; the lime sweep on hover is identical.
- **nav-link:** 12px uppercase text with a line that draws under it on hover.
- **input-field:** no box, only a bottom border; 18px text, 48px minimum height; the focus state thickens the border to 3px.
- **card-pass:** the monthly pass, a lime block with 24px padding and square corners, holding a name, one paragraph and a button.
- **disc-button:** a lime circle with a diagonal arrow that spins on hover; used to close the menu and to return to the top.

## Motion

The page loads GSAP 3.13, ScrollTrigger and Lenis 1.3 from jsDelivr. The one idea is a line that fills or a stage that holds while you scroll, so the page behaves like a ride along a route. Lenis smooths scrolling page-wide.

- **Opening:** on load, the three heading lines step in like stairs in turn, the street photo levels from a slanted upper edge, and the lead, facts and buttons rise in. This is CSS only.
- **Section headers:** the double rule draws across, the square mark rolls in from the left and the note rises, each once as it enters at 90 percent of the viewport. Lists such as stands, kit and questions rise in the same way.
- **Fleet:** a held stage pinned for about 2.3 screens of scrolling (the track is 100svh plus 78svh per extra bike). The next bike's photo wipes in from the right while the text swaps and a marker slides along a strip of bike names built by the script.
- **Routes:** a held stage whose length is the row's overflow. The panels slide sideways while a lime line fills and a round marker rolls along it.
- **Hire:** a lime line fills across the three steps, or down them on a phone, and each step comes up from dim, its number sliding in from the left.
- **Rides:** the group photo opens from a central slit while the two heading words move apart.
- **Reviews:** the three quotes slide in from alternating sides.
- **Contact:** the night photo settles from an enlarged, shifted position while eight marks fly in with a spin.

Entrances run 0.8 to 1.1 seconds with power3 easings; scrubbed scenes follow the scroll with a half-second lag. With reduced motion, Lenis, the entrances and all scroll scenes and the opening animation are off; bikes and routes sit in plain grids. The navigation bar still hides on scroll and hover fills still run.

## Do's and Don'ts

- Do keep lime for go signals: hover fills, progress lines, codes, the reviews band and the pass card. Don't use it for body text on light grey.
- Do set headings in one weight with tight tracking; don't add bold or a second display face.
- Do keep corners square on photos, cards and fields; keep pills for buttons and discs only.
- Do show facts as ruled rows and tables; don't wrap them in rounded cards or add drop shadows.
- Do tint photos on dark bands with the slate multiply layer; don't add purple or blue gradients.
- Do keep labels uppercase at 12px.
- Do keep the stand letters and the collect-from options in step with the stand rows; they are plain text, not generated.