Form Lab

Live preview ->

Form Lab is a complete website system for training businesses that sell coaching and results rather than a list of equipment. The homepage opens on full-bleed gym photography with TRAIN BETTER set in oversized italic caps, then works through coaching services, membership pricing, transformation goals, and coach profiles.

Three content collections cover programs, coaches, and a fitness journal, so adding a coach or a program is one Markdown file rather than a component edit. An interactive BMI calculator gives a first-time visitor something to do before they reach the contact form.

Property	Value
Tier	Pro ($59 regular)
Category	Gym & Fitness Coaching
Display font	Geist Variable (self-hosted)
Body font	Inter Display (self-hosted)
Palette	Near-black surfaces with an acid lime accent (`#c3ff00`)
Motion	GSAP + ScrollTrigger and Lenis, bundled from npm
Collections	`programs`, `coaches`, `journal`
Configuration	Shared site content lives in `src/config/site.ts`

Included routes

/ - homepage with hero, introduction, services, benefits, pricing, transformation goals, coach spotlight, BMI calculator, journal, and testimonials
/programs/ and /programs/[slug]/ - program index and four generated program pages
/coaches/ and /coaches/[slug]/ - coach index and six generated coach profiles
/journal/, /journal/[...page]/, and /journal/[slug]/ - paginated journal index and three generated articles
/about/, /pricing/, /contact/
/privacy/, /terms/, /404.html
/sections/ - private section library, excluded from the sitemap
Generated sitemap and robots output

The production build generates 24 static pages.

What makes Form Lab different

Three collections, not hardcoded pages - programs, coaches, and journal articles each generate their own grid entry and detail route. A sixth coach is a new Markdown file.
A tool, not just a brochure - the BMI calculator runs client-side and returns a banded, plain-language result instead of a bare number.
Type does the shouting - oversized italic caps over full-bleed training photography, with everything else kept quiet and readable.
One accent, used with discipline - acid lime on near-black, carried through buttons, eyebrows, and icons so the photography supplies the rest of the color.
Fonts are self-hosted - Geist and Inter Display ship with the theme. No Google Fonts request, no third-party font domain.

Form Lab-specific setup

Change the identity and palette

Start in src/config/site.ts. The identity block controls the name, legal name, URL, language, logo, favicon, and theme color. The palette lives alongside it:

theme: {
  colors: {
    background: "#0a0e0d",
    surface: "#1b1b1b",
    surfaceRaised: "#252525",
    text: "#f2f2f2",
    muted: "#cecece",
    accent: "#c3ff00",
  },
  contentMaxWidth: "1480px",
}

The accent is deliberately loud. If you re-tune it, keep it bright enough to stay legible on the near-black background.

Edit the homepage

The homepage configuration blocks under home are:

hero
introduction
services
benefits
pricing
transformation
coachSpotlight
bmi
journal
testimonial

Each block owns its eyebrow, headings, body copy, images, alt text, links, and repeatable items. coachSpotlight.collectionLimit and journal.collectionLimit control how many collection entries surface on the homepage.

Add or edit programs, coaches, and journal articles

Content lives in three collections:

src/content/programs/ - training programs, each generating /programs/[slug]/
src/content/coaches/ - coach profiles with specialties and certifications, each generating /coaches/[slug]/
src/content/journal/ - Markdown articles, each generating /journal/[slug]/

The surrounding interface copy for each collection stays in siteConfig.pages.programs, siteConfig.pages.coaches, and siteConfig.pages.journal, including the detail-page headings, the CTA labels, and the journal pagination labels.

Configure the BMI calculator

siteConfig.home.bmi owns every string the tool renders: the heading, field labels, placeholders, the sex options, the submit label, and the five result messages (invalid, underweight, healthy, overweight, high). The calculation is metric (cm and kg). Translate or reword the messages freely; the banding logic stays in the component.

Set the membership plans

siteConfig.pricing.plans drives both the homepage pricing section and /pricing/. Each plan takes a name, description, price string, period, feature list, CTA, and a featured flag that applies the highlighted treatment.

Connect the contact form

Form Lab starts in safe demo mode and sends no data. Change siteConfig.contact.form.provider to one of:

formspree
formsubmit
netlify
custom
demo

The same block controls the endpoint, method, field definitions, required states, submit label, and success message.

Turn off the preloader

siteConfig.preloader.enabled toggles the branded loading screen. Set it to false to remove it entirely.

The preloader is handled in src/scripts/ui.ts and is independent of the scroll reveals, so turning it off has no side effects.

Agent-ready

The theme ships an AGENTS.md at its root, plus a CLAUDE.md that points at it. Claude Code, Cursor, Copilot, and Codex read these on open, so an agent starts with the file map, the task routing table, the design invariants worth preserving, and the three traps that break this theme silently. You get correct edits on the first pass instead of an agent guessing at the structure.

It covers the prefixed Tailwind setup, the wow visibility coupling, and the vendor bundle described below.

Performance

Form Lab ships no jQuery, no Bootstrap JavaScript and no vendored plugin bundle. Motion is GSAP with ScrollTrigger plus Lenis for smooth scrolling, both installed from npm and bundled by Vite, so you get one tree-shaken module rather than a kitchen-sink script.


JavaScript	143 KB bundled, down from 963 KB of vendor scripts
Imagery	1.8 MB of WebP, down from 7.1 MB of JPG and PNG
Homepage transfer	3.0 MB across 48 requests, down from 7.9 MB across 64

Everything animated respects prefers-reduced-motion: no smooth scrolling, no reveals, and all content visible.

The scroll reveals, the testimonial slider, the video lightbox, the sticky header, the mobile menu and the animated stat counters are all small modules in src/scripts/. Edit or delete any of them without pulling a dependency apart.