---
version: alpha
name: "Electric scooter template by 8B"
description: "One-page website for an electric moped or scooter maker: pale grey ground, near-black and white panels with notched corners, one red accent, quiet regular-weight type. Free HTML template by 8B, MIT."
colors:
  primary: "#121315"
  secondary: "#4d5158"
  tertiary: "#d23624"
  neutral: "#e7e8ea"
  surface: "#ffffff"
  on-surface: "#121315"
  on-primary: "#ffffff"
  hairline: "#cdd0d4"
  caption-dark: "#a2a7ae"
  paint-green: "#23746c"
  paint-blue: "#22477f"
  paint-mustard: "#e2ac2a"
typography:
  headline-display:
    fontFamily: "Host Grotesk"
    fontSize: 118px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.042em
  headline-lg:
    fontFamily: "Host Grotesk"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.042em
  figure:
    fontFamily: "Host Grotesk"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.045em
  headline-md:
    fontFamily: "Host Grotesk"
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.028em
  body-md:
    fontFamily: "Host Grotesk"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Host Grotesk"
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: "Host Grotesk"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.005em
  button:
    fontFamily: "Host Grotesk"
    fontSize: 15px
    fontWeight: 500
    letterSpacing: -0.01em
  wordmark:
    fontFamily: "Host Grotesk"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.04em
rounded:
  md: 14px
  lg: 20px
  xl: 28px
  full: 999px
spacing:
  gutter: 24px
  section: 160px
  tile-gap: 10px
  card-gap: 12px
  field-padding: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: 48px
  button-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 44px
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 22px
  plan-card-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xl}"
    padding: 44px
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 48px
---

# Electric scooter template by 8B

## Overview

This is a one-page site for a maker of electric mopeds or scooters. Its one idea is quiet: the heading says there is nothing to hear but the tyres, so the page itself is calm. Type is regular weight and tightly tracked, the ground is pale grey, and the weight comes from near-black and white panels whose corners are cut by rounded notches, as if one card docks into another. A single red accent marks action. Four full-screen paint fields bring in colour once, in the middle of the scroll. It suits a vehicle brand, a showroom, or any product with a few variants, a subscription and a test booking. The name Hush and every price, address and review in it are invented demo content.

## Colors

- **Ink, `#121315` (primary):** body text, the opening's black field, round and pill buttons, the monthly plan card, the full-screen menu and the footer.
- **Mist, `#e7e8ea` (neutral):** the page ground, the form field fill and the nav bar once you scroll.
- **Paper, `#ffffff` (surface):** white cards, the Own it plan, light buttons, photo captions and text on dark panels.
- **Red, `#d23624` (tertiary):** the logo mark, the wipe that fills a button on hover, the charging figure, list dots, the full stop of the footer wordmark and the Postbox red paint field.
- **Slate, `#4d5158` (secondary):** descriptions, specs and labels on light grounds.
- **Hairline, `#cdd0d4`:** rules in step and plan lists, field borders, the question dividers and greyed model cards.
- **Caption, `#a2a7ae`:** secondary text on dark panels and in the footer.
- **Paint colours:** green `#23746c`, blue `#22477f` and mustard `#e2ac2a` fill the Lido, Harbour and Mustard fields. They appear nowhere else, and the mustard field switches its text to ink.

## Typography

Host Grotesk is the only family, loaded at weights 400 to 600. Large headings stay at regular weight with negative tracking of about 0.04em, which keeps big type quiet instead of loud. Card titles, labels and buttons use weight 500. Only the wordmark is semibold. Body text is 16px at a 1.55 line height, with 13.5px for descriptions. Headings are sentence case, never uppercase. The opening heading runs from 40px on a phone to 118px on a wide screen, section headings up to 70px, and the plan price to 76px. The footer wordmark and the giant paint names are sized from their character count, so a new name needs its `--len` value updated.

## Layout

Content sits on a 12-column grid with a gutter of 16px to 24px, and sections take 80px to 160px of vertical padding. Text blocks pair with images by column span: charging uses 7 and 4 columns, the opening's fact cards use 4 columns each. The paint fields are full-screen, the details mosaic is a four-column grid of six tiles with 10px gaps, and reviews form a staggered three-column wall. The ownership plans split into two equal cards. Around 900px the top-bar links and the Order button fold into the menu button, and below 860px the grids collapse to one column. Several sections pin the screen while you scroll, so the page is long.

## Elevation & Depth

Depth is built mostly by cutting. Clip-path shapes carve notches into photos and into the black opening field, and a card or note sits in each notch with matching radii. White cards on the grey ground and dark cards on white give a second level. One soft shadow, `0 22px 44px -24px` in ink at 45%, lifts only the review cards and the contact form. Do not add shadows elsewhere.

## Shapes

Three radii carry the page: 28px for panels, tiles, photos and plan cards; 20px for white surface cards and street photos; 14px for form fields and photo captions. Buttons and the logo-sized controls are pills or circles. Photos are cropped to their panel with cover fit. Notches use rounded inner and outer corners, so they read as one continuous curve. The small logo mark is itself a rounded square with a bite taken out of one corner.

## Components

- **button-primary:** ink pill, 48px high, white label; on hover a red fill wipes in from the left over half a second.
- **button-light:** white pill, 44px high, with an optional round ink icon; hover fills it with ink.
- **card-surface:** white card with 20px corners, used for model cards, fact cards, reviews and the form.
- **plan-card-dark:** the monthly plan, ink with white text and caption-grey copy; its twin is the white Own it card.
- **nav-link:** 14px medium text with an underline that redraws on hover.
- **input-field:** mist fill, 1px hairline border, 14px corners; focus adds a 2px ink outline.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis for smooth scrolling. The one motion idea is docking: things slide into place and notches open around them. The top bar slides away on scroll down and returns on scroll up. The opening animates on load with CSS: while the black field's notches shrink into place, the heading, the intro and then the three fact cards rise in. Headings in several sections reveal line by line. In the model section, pinned for two screens of scrolling, the active card slides out of the photo frame's notch while the photo wipes to the next model. Charging and contact open their photo notches. The paint section pins for three screens and slides four fields sideways while photos and names shift a little further the same way, so they move faster than the track. The details photos close in around the text tile. Two street rows slide in opposite directions. Plan cards and footer columns slide in once with a small overshoot. Service pins and reveals its photo a third at a time. On wide screens reviews fan out from one stack; on phones each card is dealt in from alternate sides. Scroll-linked scenes use a scrub of 0.4 to 0.6 seconds.

With reduced motion, smooth scrolling, pinning, scroll animations and the opening entrance are switched off: the paint fields stack, and the model frame shows only the first model's photo. The bar still hides on scroll and buttons still fill on hover.

## Do's and Don'ts

- Do keep one accent. Red marks action and a few figures; the paint colours belong to the paint fields only.
- Do keep headings at regular weight with negative tracking.
- Do cut notches with the shape variables rather than extra wrappers, and keep radii at 28, 20 and 14px.
- Do keep the three-model picker, or adjust the scene, since the notch is driven by the card count.
- Do update `--len` whenever the footer wordmark or a paint name changes.
- Don't add a second typeface, uppercase headings or gradient backgrounds.
- Don't add stock icons or drop shadows beyond the review cards and the form.
- Don't add shared scroll effects on top of the page's own motion.
- Don't use pure black or a second red; ink and red are fixed.