07 — Personal Training & Small-Group Performance Studio

Form Athletics

Coached sessions, programmed in blocks, measured every week.

Industry
Personal Training & Small-Group Performance Studio
Type
Concept Project — Obsidian Webworks
Scope
5-page site · Design · Build · Mobile
Typefaces
Archivo (wdth 125 / 900) / Archivo (wdth 100 / 400)
formathletics.com
Form Athletics website homepage — Personal Training & Small-Group Performance Studio concept by Obsidian Webworks
Overview

The business & the brief.

Form Athletics is a fictional West Palm Beach studio running capped, coached small-group strength, conditioning, mobility and athlete-prep sessions plus 1:1 coaching. The site is built to turn browsers into $49 two-week intro bookings, through a five-step onboarding flow that ends with a 'your first session' card.

Form Athletics is a fictional business. This concept was designed and built by Obsidian Webworks to demonstrate what we create for fitness businesses. No client results are implied.

Design direction

Look, feel & voice.

An 'Athletic Editorial' system: chalk-white pages hit with ultra-expanded black Archivo (wdth 125, weight 900), one electric cobalt for colour blocks and CTAs, and diagonal clip-path photo crops. It borrows the energy of a sportswear launch so a performance studio feels fast and current — and deliberately light, unlike the dark luxury concepts in the portfolio.

#F2F2EE
#0A0A0A
#1F3BFF
#C9C9C4
#FFFFFF
Archivo (wdth 125 / 900) — displayArchivo (wdth 100 / 400) — body & interface
Key features

Built to bring customers in.

Numbered program accordion

Five programs run as oversized outlined-numeral rows that open one at a time into a diagonal-cropped photo, session length, group cap and a deep-dive link.

Filterable weekly timetable

A days-by-times grid colour-coded by program (ink, cobalt, concrete, cobalt outline, hatched) with filter chips, a live session count and an automatic day-by-day list view on mobile.

Five-step onboarding

Goal, experience, availability, intro slot and details, one step at a time with inline validation; slots that match the chosen training windows are flagged 'Fits your week'.

First-session ticket

Submitting the onboarding form produces a cobalt notched 'your first session' card with the chosen slot, goal, address and what to bring.

Monthly / 3-month pricing toggle

One switch re-prices the Small Group, Unlimited and 1:1 plans and swaps the billing notes, with a full comparison table and FAQ below.

Swipeable coach rail

Coach profiles sit in a scroll-snap row with arrow controls that disable at either end, each portrait tagged with a cobalt name tab and focus areas.

Mobile-first actions

A full-screen cobalt menu with giant numbered links, plus a persistent bottom 'Start training — 2 weeks · $49' bar on every page except the booking flow itself.

Kinetic marquee bands

Ink, cobalt and chalk marquee strips (Coached · Programmed · Measured) break up sections, pause on hover and stop entirely for reduced-motion users.

Desktop preview

The full experience.

Hover (or tap) to scroll the entire homepage. Every section, top to bottom.

formathletics.com
Full-length screenshot of the Form Athletics homepage
Mobile preview

Designed for the phone first.

Most customers will meet this brand on a phone. The mobile layout is designed on its own terms, with thumb-friendly actions and a dedicated menu.

Form Athletics on mobile
Form Athletics on mobile, section 2
Form Athletics on mobile, section 3
What’s inside

Site sections.

A complete, production-ready structure. Every section is designed, written and responsive.

  • Hero
  • Marquee
  • Programs accordion
  • The method
  • Coaches
  • Schedule preview
  • Memberships
  • Your first week
  • Member stories (sample)
  • Final CTA
  • Footer

Explore the live concept project

Your turn

Want a website like this for your business?

Tell us what you do and who you serve. We’ll show you what your website could be.

Start Your Project