---
version: alpha
name: "Electric moped template by 8B"
description: "One-page website for an electric moped maker or dealer: pale grey panels, white pill cards and one red accent, with pinned scroll sections. Free HTML template by 8B, MIT."
colors:
  primary: "#121316"
  secondary: "#555960"
  tertiary: "#cc2c24"
  neutral: "#e9eaec"
  surface: "#e9eaec"
  surface-panel: "#d4d6d8"
  surface-card: "#ffffff"
  on-surface: "#121316"
  on-dark: "#ffffff"
  night: "#121316"
  night-cell: "#24262b"
  caption: "#555960"
  caption-dark: "#a2a6ad"
  hairline: "#b9bdc3"
  accent-red: "#cc2c24"
typography:
  headline-display:
    fontFamily: Host Grotesk
    fontSize: 112px
    fontWeight: 500
    lineHeight: 0.92
    letterSpacing: -0.055em
  headline-lg:
    fontFamily: Host Grotesk
    fontSize: 90px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Host Grotesk
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.03em
  body-lg:
    fontFamily: Host Grotesk
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.01em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1
  label-sm:
    fontFamily: Host Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  logo:
    fontFamily: Host Grotesk
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.04em
rounded:
  sm: 11px
  md: 18px
  lg: 30px
  full: 999px
spacing:
  gutter: 64px
  gutter-tight: 20px
  panel-gap: 16px
  section: 168px
  section-tight: 88px
  container-max: 1440px
  button-height: 52px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 6px 6px 6px 22px
    height: 52px
  button-primary-disc:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.full}"
    height: 40px
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 4px 4px 4px 20px
    height: 48px
  nav-link:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
  card-pill:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  badge-model:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 6px 12px
  panel-plan:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 56px
  input-field:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 12px 18px
    height: 50px
---

# Arco: electric moped template

## Overview

Arco is a one-page site for a small maker or dealer of electric mopeds with three models, a choice between buying and a monthly plan, and a test ride form. The idea is calm and quiet: pale grey panels with soft corners, white pill-shaped cards, and one red used sparingly so every red mark means "go" or "charged". Type is a single medium-weight grotesk set tight. All names, prices and addresses in the demo are invented.

## Colors

- **Primary (#121316):** near black. Body and heading text, main buttons, the dark battery section, the route line and the map labels.
- **Secondary / caption (#555960):** leads, descriptions, captions and form labels on light grounds.
- **Tertiary / accent-red (#cc2c24):** the only accent. The disc inside each main button, charge segments, the rider on the map, review stars, list markers, the focus outline and the last line of the first-screen headline and of the battery heading.
- **Neutral / surface (#e9eaec):** the page ground, the top bar and the phone menu.
- **Surface-panel (#d4d6d8):** large grey panels, photo placeholders, the first plan, model badges and map streets.
- **Surface-card (#ffffff):** pill cards, the second plan, question rows, the map ground and second-style buttons.
- **Night (#121316) and night-cell (#24262b):** the battery ground; the cell, handle, slot and time rules.
- **Caption-dark (#a2a6ad):** paragraph text on the dark battery section.
- **Hairline (#b9bdc3):** one-pixel rules between specs, plan items and footer, and form field borders.

Body text on the grey grounds needs 4.5:1 contrast.

## Typography

**Host Grotesk** is the only family, loaded from Google Fonts as one variable font covering weights 400 to 600.

- **headline-display:** the first-screen headline and the model names. Roughly 60 to 115px on desktop, weight 500, very tight tracking, line height below 1. The headline lines are sized by a character count in `--len`.
- **headline-lg:** section headings, `clamp(40px, 6.2vw, 90px)`, weight 500.
- **headline-md:** prices on photos, the footer title, `clamp(24px, 2.4vw, 34px)`.
- **body-lg:** section leads, `clamp(18px, 1.55vw, 22px)`, in secondary grey.
- **body-md:** 16px running text, line height 1.55.
- **label-md:** buttons and top bar links, 15px medium.
- **label-sm:** captions, field labels and pills, 13px medium.
- **logo:** 26px semibold, tracking -0.04em. Card names use semibold 16px.

Everything is sentence case. Letter spacing is negative on large sizes and never wide. No uppercase labels.

## Layout

Content sits in a wrapper up to 1440px wide with fluid side padding, `clamp(20px, 4.4vw, 64px)`. Section padding is `clamp(88px, 11vw, 168px)`. Most sections pair a big heading with a short lead, then a panel or a set: three models, two plans, four service steps, six reviews. The first screen is a full-height stage with the moped photo at the bottom, the headline top left, a button with a price line, and three fact pills stacked at the lower left.

At 860px and below the top links and call button fold into a menu overlay with 40px links, the opening photo grows wider than the screen, the model thumbnails shrink to images only, plan panels and review columns stack, and the contact photo moves under the form. The reviews grid drops to two columns at 1000px, and, with motion off, the service steps to two columns at 1100px.

## Elevation & Depth

Depth comes mostly from tone: grey on pale grey, white on grey, and a full black section for the battery. The only shadow is one soft drop, `0 18px 40px -22px` of near black at 45%, under floating thumbnails, review cards and the map rider. Photos are masked to fade into the ground at the first screen, and cut-out tabs (a concave notch in the ground colour) let a pale grey label sit in the corner of a photo.

## Shapes

Corners are generous and consistent: 30px (fluid from 20px) on large panels and photos, 18px on cards and question rows, 14px on the battery segments, 11px on small thumbnails, and full pills on buttons, badges and inputs. The battery, the street map with river and lanes, the charge bar and the logo mark are drawn in CSS and SVG. Icons are simple 1.8px rounded-stroke line icons inside circles.

## Components

- **button-primary:** black pill, 52px high, label left, a red 40px disc with an arrow on the right. On hover the disc grows until it floods the whole button red.
- **button-secondary:** white pill with a black disc; on hover it fills black.
- **nav-link:** 15px medium text with an underline that draws in on hover.
- **card-pill:** white rounded pill or card holding a thumbnail, a fact or a contact line.
- **badge-model:** small grey pill with the model tag under the name.
- **panel-plan:** two large panels side by side, one grey and one white, with a big price at 80px and ruled list items; a round "or" disc sits on the join.
- **input-field:** white pill, 1px hairline border, red focus outline.

## Motion

The page loads GSAP with ScrollTrigger, SplitText and MotionPath, plus Lenis for smooth scrolling. The one idea: scrolling drives the machine, as pinned sections turn scroll distance into a model switch, a charging battery, a route and a service line.

- **Opening:** on load the headline lines, the button row and the fact pills slide or rise in and the photo settles from a slight zoom; on phones it also drifts sideways in a loop.
- **Models:** pinned for about two screens. Each next photo grows from small at the thumbnail stack to full size while the previous one steps back and darkens, and the text swaps.
- **Battery:** as it passes, the cell rises, ten segments turn red in turn, three time rules draw, and the last heading line turns red.
- **Headings and blocks:** most section headings (not the battery or the contact form) rise line by line behind a mask; the workshop columns, the plan lists and the contact pills slide in from the left; the workshop, questions and contact photos open from a round notch at the top right corner over about 1.2 seconds.
- **Details:** pinned; three close-ups trade width (height on phones), so the focused strip opens wide and the others narrow to slivers.
- **Routes:** pinned; the route draws itself behind a red rider, each stop and day dot lights as it passes, and the charge bar shrinks.
- **Service:** pinned; the track of four steps slides sideways while the photos inside the two photo cards move the same way a little faster.
- **Reviews:** six cards begin as a tilted pile and are dealt to their places in turn.
- **Footer:** letters of the big wordmark spread from the middle to their places.

Scroll entrances ease with `power3.out`, the load-in with `cubic-bezier(.2, .7, .1, 1)`, hovers with `cubic-bezier(.6, 0, .2, 1)`. With reduced motion, the entrance animations, pinning, scroll scrubbing and smooth scrolling are all switched off and the page reads in full; the top bar still hides on scroll down and the hover fills still run. Keep the section ids, `data-8b-motion` values and the selectors listed in AGENTS.md.

## Do's and Don'ts

- Do keep red as the only accent, on discs, charge marks and the route rider.
- Do keep one typeface, medium weight, tight tracking on big sizes.
- Do keep the battery section black as the one dark moment.
- Do keep exactly three models and five route stops, and update `--len` when a headline changes.
- Don't add gradients, glass blur, neon or a second hue.
- Don't use uppercase tracked labels or a second display face.
- Don't use sharp corners, hard black borders or heavy shadows.
- Don't replace the drawn battery, map and logo with stock images or stock icons.
- Don't keep the demo prices, reviews or contacts; replace them.