---
version: alpha
name: "Pilates studio template by 8B"
description: "A reformer Pilates studio site in two corals and cream: a bright coral frame round one cream sheet, heavy coral headings, outlined cards and a deep coral fill that travels with the scroll. Free HTML template by 8B, MIT."
colors:
  primary: "#c3331c"
  secondary: "#ef573b"
  surface: "#f6f4e9"
  on-surface: "#6b665e"
  on-primary: "#f6f4e9"
  hairline: "color-mix(in srgb, #ef573b 32%, transparent)"
typography:
  headline-display:
    fontFamily: Golos Text
    fontSize: 84px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Golos Text
    fontSize: 70px
    fontWeight: 760
    lineHeight: 0.96
    letterSpacing: -0.045em
  statement:
    fontFamily: Golos Text
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.022em
  body-lg:
    fontFamily: Golos Text
    fontSize: 29px
    fontWeight: 450
    lineHeight: 1.28
    letterSpacing: -0.012em
  title-md:
    fontFamily: Golos Text
    fontSize: 23px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.02em
  body-md:
    fontFamily: Golos Text
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  label-md:
    fontFamily: Golos Text
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  link:
    fontFamily: Golos Text
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0em
  button:
    fontFamily: Golos Text
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.005em
rounded:
  none: 0px
  sm: 9px
  md: 14px
  lg: 22px
  full: 999px
spacing:
  frame: 26px
  gutter: 48px
  section-y: 140px
  head-gap: 80px
  head-bottom: 64px
  card-gap: 14px
  rail-gap: 12px
  nav-height: 74px
  control-height: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 24px"
    height: "{spacing.control-height}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 24px"
    height: "{spacing.control-height}"
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.link}"
    rounded: "{rounded.lg}"
    padding: "0 48px"
    height: "{spacing.nav-height}"
  card-outline:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: "14px 14px 18px"
  price-card-featured:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 32px
  timetable-chip:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "10px 12px 12px"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: "10px 0"
    height: "{spacing.control-height}"
  footer-panel:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "80px 48px 26px"
---

# Hundred: Pilates studio template

## Overview

Hundred is a one-page site for a reformer Pilates studio that sells classes by the place to beginners, runners, new mothers and desk workers. Its name is also a classic Pilates warm-up, and the opening heading uses it that way. The one idea is a framed sheet with a travelling fill: a bright coral frame holds one cream sheet, and a deep coral fill moves with the scroll like a carriage on its rails, marking whatever is current. The feeling is warm, exact and a little loud. The studio, address, teachers, timetable and prices in the demo are invented.

## Colors

Two corals, a cream and a warm grey; no black or pure white.

- **Primary, deep coral (#c3331c):** the opening and footer panels, every filled state (class carriage, current class plan block, Reformer chips, middle price card), buttons, links, meta lines, form labels, rule lead-ins, the minute rail and the focus outline.
- **Secondary, bright coral (#ef573b):** the frame; headings, class names, card titles, prices, the 1.2px card outlines, glyphs, day rules and form underlines.
- **Surface, cream (#f6f4e9):** the sheet, the fixed bar, the phone menu and the cream buttons.
- **On-surface, warm grey (#6b665e):** body text, the rules paragraph, contact details and typed text.
- **On-primary (#f6f4e9):** cream on deep coral, in the opening, the footer, filled cards and chips.
- **Hairline:** bright coral at 32% on cream, under the bar and above four of the sections.

Warm grey on cream is 5.2:1 and cream on deep coral 5:1; bright coral on cream (3.1:1) stays on large type and lines.

## Typography

One family, **Golos Text**, a variable Google font for weights 400 to 800 with a metric-matched Arial fallback. Its open letters stay friendly at 800 and clear at 14px, so one face carries the loud headings and the timetable.

- **headline-display** (800, 40px to 84px): class names, phone menu links and the footer wordmark; prices use it at 40px to 56px.
- **headline-lg** (760, 36px to 70px): section headings (the method heading is smaller); the h1 runs to 76px in cream.
- **statement** (500, 25px to 44px): the six rules, each named by a deep coral lead-in at 600.
- **body-lg** (450, 22px to 29px): the opening and contact leads.
- **title-md** (700, 23px): card titles, teacher and day names.
- **body-md** (17px), **label-md** (14px) for meta lines and times, **link** and **button** (16px).

Everything is sentence case, never uppercase or widely tracked; large type is tight, -0.045em to -0.05em.

## Layout

The page background is bright coral. The cream sheet sits in a frame of 10px to 26px with 22px corners, and the footer is a second, deep coral panel in the same frame. There is no max width: content runs inside a gutter of 18px to 48px, and the fixed bar's cream top reads as the sheet's upper edge.

Most sections open with a heavy heading on the left and a short paragraph on the right, aligned at the bottom. Sections are padded mostly 80px to 140px, with hairlines between some, and cards sit 8px to 14px apart.

On phones the frame thins to 10px. Days become rows at 980px, a Menu pill replaces the links at 900px, rails put the photo beside the name at 760px, and grids drop to one or two columns.

## Elevation & Depth

There are no shadows, blurs or gradients. Depth comes from three flat layers (frame, sheet, deep coral panels) and from fill: an outlined card is at rest, a filled card is current or featured. The class carriage is its own layer under the rails, and the class plan pins while its track slides.

## Shapes

- Radii: 22px for the sheet, the footer and the top corners of the bar and the opening panel; 14px for cards, rails, chips and large photos; 9px for photos inside a card.
- Every button is a pill; the close button and the minute dot are circles.
- Form fields are a bare, square 1.5px underline.
- Four inline SVG class glyphs, 32px with a 2.6 stroke and round caps: crossed lines, four rings, a ring with a disc, four filled blades.
- Photos are cropped with cover: a tall opening portrait, 4:5 teachers, 2:3 portraits, 4:3 in the class plan.

## Components

- **button-primary:** deep coral pill with a cream label, 48px high; on hover cream slides in from the left and the label turns deep coral.
- **button-secondary:** the cream pill on deep coral, the reverse on hover.
- **nav-bar:** the 74px cream bar over a hairline: bright coral wordmark, deep coral links whose underline grows on hover, one booking button.
- **card-outline:** transparent with a 1.2px bright coral outline: teacher cards and class plan blocks, and with more padding the rails and price cards.
- **price-card-featured:** the filled middle plan with the cream button.
- **timetable-chip:** a time, a class and a teacher; filled for one format.
- **input-field:** 48px, no fill, a bright coral underline.
- **footer-panel:** deep coral with the display wordmark, three columns and the Design: 8B credit.

## Motion

GSAP 3.13.0, ScrollTrigger and Lenis 1.3.4 load from jsDelivr; the opening uses CSS keyframes. Lenis smooths the scroll page-wide. The one idea is the travelling fill: deep coral moves to whatever is current.

- **Navigation:** past 120px the bar slides away on the way down and returns on the way up or on focus (0.55s, cubic-bezier(.65, 0, .2, 1)).
- **Opening:** on load the heading, the lead and the button row rise 26px and fade in, 0.1s apart; the photo opens from a thin band across its middle over 1.2s.
- **Classes:** one deep coral carriage the height of a rail travels down the four rails with the scroll, resting on the rail at mid-screen and turning its text cream.
- **Method, teachers, timetable, contact:** headings, copy and the form rise 40px and fade in (0.9s, power3.out); teacher cards and day columns glide in 70px from the right (1.1s, expo.out), in 0.07s steps within a row.
- **Class plan:** the section pins; six blocks slide sideways under a minute rail from 0 to 50 whose dot travels and fill grows, and the block holding the dot's minute fills deep coral.
- **Bodies:** with the scroll, each portrait opens from a band across its middle, left to right, its heading and line riding the frame's edges.
- **Studio:** two photo lanes start shifted 24% to opposite sides and slide into line with the scroll.
- **Prices:** the cards start lower by different amounts and settle into one line; at 860px and below they come from alternate sides.

Keep data-from and data-to on the class plan blocks in step with the rail labels, and is-on on the first rail. With reduced motion Lenis does not start and the opening keyframes, entrances and scroll scenes are off: the class plan is a plain grid, the first rail stays filled and the portraits show in full. Hover fills and the hiding bar still run.

## Do's and Don'ts

- Do keep bright coral for the frame, headings and lines, deep coral for actions and fills.
- Do keep the fill meaningful: the current rail or block, the featured plan, one format in the week.
- Don't add black or white text, grey cards, a third accent, gradients, shadows or glass.
- Don't add a second typeface, uppercase labels or wide tracking.
- Do keep the 22px, 14px and 9px radii and the pill buttons.
- Don't box the form fields or add stock icons.
- Do keep the cream sheet inside the coral frame, the footer as its own panel.
- Do keep or rewrite the opening heading and first class plan block on purpose: they name an exercise.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.