---
version: alpha
name: "Fitness app template by 8B"
description: "Fitness training app landing page made of flat off-white, mint, lilac, graphite and lime panels in a charcoal frame, with pills everywhere and uppercase headings that stretch wide. Free HTML template by 8B, MIT."
colors:
  primary: "#232323"
  on-surface: "#232323"
  surface: "#f2f4f5"
  secondary: "#8d91e6"
  tertiary: "#c5d8d8"
  accent-lime: "#d8f45f"
  graphite: "#444444"
  sage: "#a4c3bd"
  mist: "#c2c2c2"
  caption: "#4f5552"
typography:
  headline-display:
    fontFamily: TikTok Sans
    fontSize: 88px
    fontWeight: 600
    lineHeight: 0.92
    letterSpacing: -0.01em
    fontVariation: "'wdth' 150"
  headline-lg:
    fontFamily: TikTok Sans
    fontSize: 72px
    fontWeight: 600
    lineHeight: 0.92
    letterSpacing: -0.01em
    fontVariation: "'wdth' 150"
  headline-sm:
    fontFamily: TikTok Sans
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.01em
    fontVariation: "'wdth' 125"
  price:
    fontFamily: TikTok Sans
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
    fontVariation: "'wdth' 140"
  body-lg:
    fontFamily: Geist
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.06em
  button:
    fontFamily: TikTok Sans
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.04em
    fontVariation: "'wdth' 110"
  badge:
    fontFamily: TikTok Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.04em
    fontVariation: "'wdth' 120"
rounded:
  sm: 12px
  card: 18px
  panel: 26px
  screen: 35px
  phone: 46px
  arch: 200px
  full: 999px
spacing:
  frame: 12px
  panel-padding: 36px
  panel-body-top: 64px
  column-gap: 80px
  column-gap-sm: 64px
  tab-height: 64px
  tab-slant: 35px
  phone-width: 300px
  rule: 1.5px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: 48px
  button-lime:
    backgroundColor: "{colors.accent-lime}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 26px
    height: 52px
  icon-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    size: 48px
  badge-outline:
    backgroundColor: transparent
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    padding: 0 20px
    height: 40px
  tag-lime:
    backgroundColor: "{colors.accent-lime}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 30px
  corner-tab:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.headline-lg}"
    padding: 14px 18px 16px 36px
    height: 64px
  discipline-row:
    backgroundColor: "{colors.graphite}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: 14px 14px 14px 48px
    height: 176px
  plan-card:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.panel}"
    padding: 34px
---

# Kurvo: fitness app template

## Overview

Kurvo is the landing page of a fitness training app that reshapes each week around sleep, soreness and the calendar. The one idea is elastic type on pills: uppercase headings in a variable width face stretch from narrow to very wide as they arrive, and every bar, row, tag and button is a pill. Sections are flat colour panels in a charcoal frame, like app screens. It suits training apps with a free tier and paid coaching; the mood is sporty, upbeat and data-led. All demo names, numbers and prices are invented.

## Colors

- **Primary / on-surface (#232323):** charcoal frame, footer, corner tabs, dark buttons, the drawn phone, the chart line, text and rules on light panels.
- **Surface (#f2f4f5):** off-white first screen, stories and pricing panels, the phone's screen; text on dark grounds.
- **Secondary (#8d91e6):** lilac disciplines panel, regular chart bars, the session card, ring and own bubbles in the phone, sparklines, the challenge route.
- **Tertiary (#c5d8d8):** mint app and club panels, story cards, the free plan, rows and coach bubbles in the phone, the fade behind chart bars.
- **Accent lime (#d8f45f):** the signal: today's bar, the recommended plan, the contact panel, filled tags, buttons on dark panels, the challenge dot and checkpoints, the active note, hover fills.
- **Graphite (#444444):** coaches, challenge and questions panels, two discipline rows, the two-person plan, portrait rings, the contact shade.
- **Sage (#a4c3bd):** easy-day chart bars only.
- **Mist (#c2c2c2):** secondary text on graphite, question rules, the ghost route, unlit checkpoints, the footer row, the bars' starting grey.
- **Caption (#4f5552):** small print on light panels: day labels, the chart caption, the rest day outline, meeting points, the price note.

## Typography

TikTok Sans (500 and 600, width 75% to 150%) and Geist (400 and 500) load from Google Fonts via inline `@font-face`. The CSS sets width with `font-stretch`; the tokens give it as `wdth`.

- **TikTok Sans** is the voice; its width axis makes headings elastic, like a plan that bends. Headline and section headings: uppercase, 600, 150% width, line height 0.92, tracking -0.01em, two short lines; 34px to 88px for the headline, 28px to 72px for sections. Subheads, plan names and questions: 500 at 125%, 20px to 26px. Prices: 600 at 140%, up to 64px. Button labels 13px uppercase at 110%, outlined pills 14px uppercase at 120%, lime tags 13px at 115%. Discipline names and the wordmark are sized from their character count (`--len`).
- **Geist** is a plain face that reads like app interface: body 16px at 1.5, leads 18px to 22px, links 15px. Labels (nav, days, captions, footer) are 12px weight 500, uppercase, tracked 0.06em.

## Layout

`main` is one grid column with 12px padding and gaps, so charcoal frames every panel. No max-width container: panels span the window; text holds to 30ch to 62ch. Panels pad 20px to 36px; content starts 28px to 64px below the corner tab.

Most sections pair two columns with gaps up to 80px: copy and week chart, phone and notes, route and arched photo, photo and club list. Four coach portraits overlap across their columns; stories and plans take three columns; disciplines are full-width pill rows; the wordmark spans the footer.

At 900px and below a round menu button replaces the nav links, the first screen and clubs stack, coaches go to two columns, stories and plans to one. Below 768px the other grids stack, chart bars run sideways, discipline rows put the name over an 84px round photo, and the challenge route runs downward.

## Elevation & Depth

No shadows, blur or glass. Depth comes from flat panels on the charcoal frame, corner tabs that seem cut into the panels, overlapping coach portraits ringed in 6px of graphite, and moving layers: the held phone whose screens wipe over each other, and the shade that shrinks off the contact panel. A mint fade behind each chart bar is the only gradient.

## Shapes

- Pills (999px): buttons, tags, nav links, chart bars, discipline rows (44px corners on phones).
- 26px: panels, story and plan cards, the club photo; 18px: cards and chat bubbles in the phone (4px tail corner); 12px: phone rows, checkpoint labels.
- Circles: portraits, avatars, icon buttons, question toggles, note markers. The challenge photo is an arch with 200px top corners.
- The signature is the corner tab: a 35px slant on its right, a square join with the panel and a concave 26px curve beneath; the contact panel mirrors it at the lower right.
- The CSS phone: 46px corners, a 12px bezel, a 35px screen.
- Rules are 1.5px; the rest day outline is dashed.

## Components

- **button-primary:** charcoal pill on off-white, mint and lime panels.
- **button-lime:** lime pill on graphite and charcoal.
- **icon-button:** bordered circle with a line icon; on hover lime fills it and the icon turns 90 degrees.
- **badge-outline:** outlined pill in the panel's text colour for cues, coach disciplines and club times; a charcoal variant marks the recommended plan.
- **tag-lime:** class counts, member results, the phone's tags.
- **corner-tab:** holds each heading after the first screen.
- **discipline-row:** full-width pill with the fitted name, a tag, a line and a pill-cropped photo.
- **plan-card:** five ruled feature rows; lime for the recommended plan, graphite for the two-person one; missing features struck through at 55% opacity.
- Link underlines slide away on hover; questions are native details with a plus that turns into a cross.

## Motion

GSAP 3.13 with ScrollTrigger and Lenis 1.3 (lerp 0.11), from jsDelivr. The idea is elastic type: the letters change width.

- **Headings:** headline, section headings and footer wordmark open from 75% to 150% width in 1.1s (power3.out) as they enter, once. Button labels widen from 110% to 150% on hover (0.35s, cubic-bezier(.3, .7, .2, 1)).
- **Pills and lines:** coach disciplines, story results and club times drop in from 70px above, tilted 28 degrees, and land with a bounce (0.9s); sparklines draw left to right (1.3s).
- **First screen:** the seven bars start grey and nearly level, then grow or shrink to their minutes and colours in turn; from 768px the line over them draws.
- **Scrubbed:** discipline rows arrive tilted, shifted and clipped short, then level out; the challenge route draws while a lime dot rides it, lighting each checkpoint; above 900px the plans start fanned over the middle card and spread into a row, below it they slide apart downward; the graphite shade shrinks into the contact panel's upper left corner.
- **App:** the phone is held while three notes pass; screens two and three wipe up over the one before, and a lime marker swells on the matching note.
- **Nav:** hides on scroll down, returns on scroll up; past 400px its link pill turns charcoal and its button lime.

Reduced motion turns off the entrance and scroll animations and smooth scrolling; the phone lists its three screens and the page reads in full. Hover effects and the hiding nav stay. Keep the `data-8b-motion` values, `--m-wd` and every `--len`.

## Do's and Don'ts

- Do keep the 12px charcoal frame and one flat colour per panel.
- Do put section headings in corner tabs, uppercase and full width.
- Do keep lime for signals; inside panels, lime buttons sit only on graphite and charcoal.
- Do make controls and data bars pills, with 1.5px rules.
- Do update `--len` and `--cv-h` when names or minutes change.
- Don't add shadows, glows, blur or colour gradients.
- Don't add a second display face or narrow headings.
- Don't add icon sets or emoji.
- Don't square off panel corners.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.