---
version: alpha
name: "Sneaker store template by 8B"
description: "Streetwear and sneaker store one-pager with a pale green-grey ground, near-black panels, one lime accent, uppercase grotesque headlines and dashed spec rules. Free HTML template by 8B, MIT."
colors:
  primary: "#121411"
  secondary: "#5d6254"
  tertiary: "#c6ef4e"
  neutral: "#f4f7ec"
  surface: "#ffffff"
  on-surface: "#121411"
  icon-ground: "#e5eadb"
  rule: "#cfd6c3"
  caption-dark: "#a9ae9f"
  rule-dark: "#1f231d"
typography:
  headline-display:
    fontFamily: Schibsted Grotesk
    fontSize: 88px
    fontWeight: 600
    lineHeight: 0.92
  headline-wordmark:
    fontFamily: Schibsted Grotesk
    fontSize: 340px
    fontWeight: 700
    lineHeight: 0.82
  headline-md:
    fontFamily: Schibsted Grotesk
    fontSize: 36px
    fontWeight: 600
    lineHeight: 0.95
  headline-sm:
    fontFamily: Schibsted Grotesk
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.05
  price:
    fontFamily: Schibsted Grotesk
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1
  body-lg:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
  label-sm:
    fontFamily: Host Grotesk
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.04em
  button:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
rounded:
  sm: 14px
  md: 24px
  full: 999px
spacing:
  gap: 12px
  gutter: 48px
  section-y: 150px
  field-padding: 16px
  button-x: 22px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 22px
    height: 44px
  nav-link:
    textColor: "{colors.primary}"
  icon-button:
    backgroundColor: "{colors.icon-ground}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 40px
  badge:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 28px
  card-repair:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 12px 12px 22px
  panel-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
---

# STRADE sneaker store template

## Overview

STRADE is a one-page site for an independent streetwear and sneaker shop: a numbered product drop, a priced lookbook, a wear-test log, repair promises, two stores and a Saturday run club. The one idea is the spec sheet. Big uppercase grotesque headlines sit against plain text, and the facts (price, sizes, look prices, the wear-test log) are set on dashed rules like a shoe tag. A single lime accent marks what you can act on or what is new. The feeling is workshop-clean, confident and a little loud, for shoppers who read the label before the logo.

## Colors

The ground is pale, the panels are near black, and lime appears only on actions and tags.

- **Primary (#121411):** heading and body text, the button hover fill, the run club panel and the footer.
- **Tertiary (#c6ef4e):** the accent. Button fill, badges, the run club pace figures and the plus mark of an open question.
- **Neutral (#f4f7ec):** the page background and the top bar.
- **Surface (#ffffff):** repair cards, form fields and text on the dark panels.
- **Icon ground (#e5eadb):** icon buttons, image frame backing and the plus mark of a closed question.
- **Rule (#cfd6c3):** dashed dividers and form field borders.
- **Secondary (#5d6254):** small labels such as spec names, wear-test column heads, opening-hour days and contact labels.
- **Caption dark (#a9ae9f):** paragraph and group labels inside the run club panel, the footer address and the small print.
- **Rule dark (#1f231d):** dashed dividers inside the dark panels.

## Typography

Two grotesques. **Schibsted Grotesk** (weights 500 to 700 load) carries every display line in uppercase: section headings, look names, repair step titles, store names, FAQ questions, the price, the logo and the huge contact wordmark. Its tight line height (0.82 to 1.05) makes stacked lines read as one block. **Host Grotesk** (weights 400 to 600 load) is the working face: body text at 16px, table and list text at 14px in medium, buttons at 14px semibold, and spec labels at 12px semibold uppercase with 0.04em tracking.

The main heading scales with the viewport from 40px to 88px (6.4vw). The lookbook heading and the store names use smaller clamps (up to 66px and 64px), and the wear-test heading tops out at 80px. The contact wordmark is sized from its character count so two words always fit one line, up to 340px. Never set display type in lowercase or add a third family.

## Layout

A 12-column grid with 12px column gaps and a fluid side gutter of 16px to 48px (3.4vw). There is no max width: sections run edge to edge inside the gutter. Each section pairs a heading with a text block on the far side, such as the heading in columns 1 to 7 and the paragraph in columns 9 to 12. Section padding is 60px to 150px, scaled by viewport height. The lookbook is a sideways rail of 3:4 photo cards with a priced list under each; with reduced motion it is a three-column grid instead. Store rows alternate photo left and right.

Below 900px most grids become one column (the footer keeps two), the static lookbook drops to two columns and then one below 560px, and the third column of the wear-test table is hidden. At 640px and below the top bar keeps the logo, the three text links and a single icon.

## Elevation & Depth

There are no shadows. Depth comes from colour fields: white repair cards on the pale ground, and two rounded near-black panels (run club and footer) that interrupt it. Photos sit in rounded frames on a slightly darker green-grey backing. Scrolling motion adds a second kind of depth: cards are piled and turned, then spread flat.

## Shapes

Three radii only. 24px for photo frames, the run club panel and the footer. 14px for repair cards, nested photos and form fields. 999px for buttons, badges, icon buttons and the FAQ plus marks. Dividers are 1px dashed, except the solid ink rules under the wear-test column heads and above the FAQ list. Photos are cropped to 4:3 (drop and repair), 3:4 (looks), 3:2 (stores), 16:10 (club) and 4:5 (wear test).

## Components

- **button-primary:** lime pill, 44px tall, 22px side padding. On hover a dark fill opens from the centre and the label turns lime.
- **nav-link:** 15px medium text (14px below 640px) with an underline that draws in on hover. The small uppercase link with an arrow is used for store directions.
- **icon-button:** 40px circle in icon ground; on hover it turns near black with a lime icon.
- **badge:** 28px lime pill for tags such as "300 pairs" and "Racked".
- **card-repair:** white card with a nested rounded photo, a numbered uppercase step title and a short paragraph.
- **panel-dark:** the run club and footer panels, with caption text in the muted grey.
- **input-field:** 48px white field, 1px rule border, a 2px dark outline on focus.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and Lenis (smooth scrolling). One idea runs through it: things arrive from scattered to ordered.

- **Top bar:** slides up out of view on downward scroll and returns on upward scroll (0.45s). This is plain script and CSS with no motion guard, so it still runs when the visitor asks for reduced motion.
- **Drop:** on load the photo is cut into tiles (4 by 3 from 900px, 3 by 3 below) that start scattered and tilted and lock together over one second. The heading slides in by line and the "300 pairs" badge pops.
- **Lookbook:** the section pins and the row of looks travels sideways with the scroll, while photos drift slightly inside their frames.
- **Wear test and stores:** headings slide in by line from alternate sides; the tall wear-test photo and the store photos open from a centre column; store badges pop.
- **Repair:** scrubbed with the scroll, the three cards start piled on the middle card (the first card on phones), turned a few degrees, and spread into the row.
- **Run club:** scrubbed, each pace line enters from the right and settles at the left; the faster group travels furthest.
- **FAQ:** the heading slides in; each question is a native details element and opens without script.
- **Contact:** scrubbed, the letters of "Say hello" start spread and turned, then close into two words.

Entrance, tiling, pinning, scrubbed scenes, the heading slides and Lenis are all inside `prefers-reduced-motion: no-preference`, so with reduced motion the page is static and reads in full. Hover effects (button fill, underline draw, icon lift) are not switched off by reduced motion, though they only apply on devices that support hover. The FAQ plus rotation and the top bar slide are likewise not guarded. Keep new motion inside the same media query.

## Do's and Don'ts

- Do keep lime for actions, tags and pace figures only; never use it as a background for large areas.
- Do set display type in uppercase Schibsted Grotesk and keep body text in Host Grotesk.
- Do put facts (price, sizes, look prices, the wear-test log) on dashed rules, not in boxes.
- Do keep the two dark rounded panels as the only dark areas.
- Do use the three radii above and nothing else.
- Don't add shadows, gradients or glass effects.
- Don't add stock icons or a third typeface.
- Don't replace the pile-and-spread and tile-together motions with generic fades.
- Don't write real prices, addresses or brand names as facts; the demo content is invented.
- Don't restyle the Design: 8B footer link or remove it unless the site owner asks.