---
version: alpha
name: "Roller rink template by 8B"
description: "A one-page roller rink website in 1970s poster colours, teal, aubergine and ink grounds with cream type under yellow, orange and red stripes. Free HTML template by 8B, MIT."
colors:
  primary: "#f5a524"
  secondary: "#0b5f7f"
  tertiary: "#ee5a2a"
  neutral: "#f3e6cf"
  surface: "#271e30"
  on-surface: "#f3e6cf"
  aubergine: "#3b2e47"
  stripe-red: "#b8301a"
  on-primary: "#271e30"
typography:
  headline-display:
    fontFamily: Gabarito
    fontSize: 340px
    fontWeight: 800
    lineHeight: 0.82
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Gabarito
    fontSize: 64px
    fontWeight: 800
    lineHeight: 0.96
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Gabarito
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Rethink Sans
    fontSize: 20.8px
    fontWeight: 500
    lineHeight: 1.45
  body-md:
    fontFamily: Rethink Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Rethink Sans
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
  nav-link:
    fontFamily: Rethink Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.01em
  button:
    fontFamily: Rethink Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.01em
  label-badge:
    fontFamily: Rethink Sans
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
rounded:
  none: 0px
  full: 9999px
spacing:
  gutter: 72px
  section: 160px
  max-width: 1360px
  column-gap: 24px
  row-gap: 6px
  control-height: 52px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 28px
    height: 52px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 28px
    height: 52px
  nav-link:
    textColor: "{colors.neutral}"
    typography: "{typography.nav-link}"
  badge-price:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-badge}"
    rounded: "{rounded.none}"
    padding: 7px 20px
  session-row:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.none}"
    padding: 12px 32px
  input-field:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 0 22px
    height: 52px
---

## Overview

Spinway is the site of a roller rink with a weekly timetable, eight-week lessons, rental skates, party packages and a record booth. The one idea is a 1976 skating poster that moves: flat colour fields in teal, aubergine, yellow and orange, a triple stripe in yellow, orange and red divided by cream lines, and slanted cuts that repeat in badges, frames and entrances. It is for venues with a regular week and a history worth telling. The feeling is loud, warm and a little nostalgic, never glossy. All names, prices and dates in the demo are invented.

## Colors

- **primary** `#f5a524` (yellow): the primary button, the floor and questions section grounds, the first session row, the footer wordmark and the heading accent on the aubergine opening.
- **secondary** `#0b5f7f` (teal): the lessons and booth grounds, the Saturday session row and the teal wheel in the rental rows.
- **tertiary** `#ee5a2a` (orange): the seasons section ground, button hover, the second session row, link underlines and the map route.
- **neutral** `#f3e6cf` (cream): body text on dark grounds, photo frames, button outlines, rules and the cream lines inside the stripe band.
- **surface** `#271e30` (ink): the page ground behind sessions, parties and the footer, and the dark text on yellow and orange.
- **aubergine** `#3b2e47`: the opening, rental and contact grounds, the phone menu and the last session row.
- **stripe-red** `#b8301a`: the third stripe, the red wheel, the third session row and the largest party panel.
- **on-surface** and **on-primary** are cream on dark grounds and ink on yellow and orange.

Each section is one flat ground; there are no gradients except the stripe band.

## Typography

- **Gabarito**, weights 700 and 800, a rounded heavy face. It sets every heading, the session days, step and panel titles, the phone menu links and the footer wordmark. Tracking is tight (-0.01em to -0.025em) and lines are set at 0.82 to 1.05.
- **Rethink Sans**, weights 400 to 700, sets body text, buttons, form fields, badges and labels. Labels are 13px, bold, uppercase with 0.08em tracking.

The display level is the footer wordmark only: its size comes from `--len` so the name fills the wrapper (about 340px at desktop width, capped at 24vw). The h1 and section headings scale with `clamp()` from 36px to 64px. Body text is 17px at 1.6; the lead paragraph is 18px to 20.8px at weight 500. Section headings stay sentence case, session and package names are title case, and only the small labels are uppercase.

## Layout

Content sits in a 1360px wrapper with a fluid gutter of 20px to 72px. Section padding is 80px to 160px. Layouts use a 12-column grid with 24px gaps: photo seven columns and text five, or two photos overlapping on the opening. Session rows are full-width bars with four columns (day, name and note, time, price) and a 6px gap between bars. The four lesson steps rise like a staircase, the party packages are three panels, the seasons run as a horizontal row, and the sections alternate ground colour down the page.

Below 900px the nav links collapse into a full-screen aubergine menu, grids become one column, session rows become two lines with the note hidden, and the lesson staircase becomes an indented stack. A fine cream dot grain sits over every section.

## Elevation & Depth

There are no box shadows. Depth comes from overlap and colour: the two opening photos overlap, the staircase of steps rises in height, frames sit on top of flat grounds, and the stripe band separates layers. Photos drift slightly inside their frames while scrolling, which adds parallax without blur or shadow. Do not add drop shadows.

## Shapes

Buttons, the menu button and form fields are pills (9999px). Wheels and step rings are circles drawn in CSS with thick borders. Everything else is square: session rows, panels and the price badges, which are cut on a slant. Photo frames have two diagonal cut corners (top left and bottom right) with a thin cream border. The stripe band has one slanted end. The map and the record rings are drawn in SVG and CSS, not images.

## Components

- **button-primary**: a yellow pill, 52px tall, 28px side padding, ink text, a 2px cream outline. Hover turns it orange and sweeps a slanted stripe bar across it.
- **button-secondary**: the same pill, transparent with cream text; hover fills it cream.
- **nav-link**: 15px semi-bold cream text; on hover a yellow and an orange underline draw across from nothing and the text turns yellow.
- **badge-price**: an ink slanted tag with the price on every session row and party panel.
- **session-row**: a full-width colour bar, one of yellow, orange, red, teal or aubergine, with the day set in Gabarito.
- **input-field**: an outlined cream pill for the record request, with an uppercase label above it.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and Lenis for smooth scrolling. The one motion idea is the diagonal: things enter along the same slanted line, stripes draw in under headings, and colour bars slide into place like lights at a rink.

- **Opening:** on load the two photos slide in from the lower left and the text lines settle upward in sequence, using CSS keyframes of about one second. Nothing is tied to scroll here.
- **Sessions:** the list starts rotated and shrunk, straightens as you scroll and each bar slides to its place while its note fades in. On desktop the section pins for about one extra screen.
- **Floor, parties, FAQ:** the floor and FAQ stripe bands draw across, the floor facts, party panels and questions slide in diagonally, and the floor and party photos drift inside their frames.
- **Lessons:** the four steps climb into a staircase, sliding in from the side on phones.
- **Rental:** photos drift and the wheel-colour rows slide in diagonally.
- **Seasons:** the section pins and the row of years travels sideways with scroll.
- **Booth:** the record sleeves flip forward and fade one after another like a crate being flicked through, then the last one stays.
- **Contact:** the map zooms and untwists while the route draws itself.
- **Footer:** the stripe band draws across once.

Easings are mostly `power3.out` for entrances and `power2.inOut` for scrubbed scenes. With reduced motion set, the entrance and scroll animations are not created, smooth scrolling is off and the page reads in full; the nav still hides on scroll down and the button hover sweep still plays. Keep `data-8b-motion` and `data-8b-section` attributes when editing.

## Do's and Don'ts

- Do keep one flat colour field per section and alternate grounds down the page.
- Do keep the yellow, orange and red stripe with cream lines as the signature, under headings and in the footer.
- Do keep the slant: cut corners on frames, slanted badges and diagonal entrances.
- Do set headings in Gabarito and everything else in Rethink Sans, with uppercase tracked labels only for small text.
- Do keep pills for controls and square corners elsewhere.
- Don't add shadows, blur, gradients or a third typeface.
- Don't round the cards or session rows.
- Don't add purple-blue gradients or stock icons; the wheels, rings and map are drawn shapes.
- Don't add an eighth colour; recolour through the seven variables in `:root`.
- Don't remove the footer "Design: 8B" link.