WorkAI LabCraftAboutContact
← Back to AI Lab

Fitness · 2026

APEX Athletic Club

An oceanfront strength and recovery club in Miami Beach, invented and built out to five pages.

View live demoFictional experiment · self-brief

APEX Athletic Club is a fictional private gym I invented and built end-to-end, and the brief I set myself was to go past the marketing page: a mini-site is easy to fake in one screen, and much harder to hold together across five.

Under the hood

Design system

Palette

Ink

#0A0A0F

Canvas · nav · cards · modals

Hot pink

#FF2E7E

Primary action · active state · sliding indicator

Mint

#00E5A0

Eyebrows · availability · confirmation

Off-white

#F5F5F7

Type on ink, at three opacities

Typography

Train where the ocean starts.

Space Grotesk

400 · 500 · 600 · 700

Display · headings · nav · class names

Small membership, full team, direct beach access.

Inter

300 · 400 · 500 · 600 · 700

Body copy · form fields · testimonials

06:30 · 45 MIN · 3 of 8 left

JetBrains Mono

400 · 500 · 700

Times · prices · capacities · pass fields

Micro-typography

  • Every number set in mono so times and capacities align down a column
  • A single pink block that travels between tabs instead of backgrounds that blink
  • Cards entering in a 55ms cascade on filter change, skipped on first paint
  • Availability shifting mint to amber to pink as a class fills
  • Stock photography unified by the grid — grayscale and dimmed, colour on hover

Interactions

  • Identity gate before any payment funnel — and the booking resumes after sign-in
  • Seven-day timetable generated from the current date, filtered by type and level
  • Cart and wishlist drawers persisted in localStorage across pages
  • Member pricing derived from list price at render time, never stored twice
  • Guest pass issued as a ticket — hand-written QR encoder, PNG export, print sheet
  • Custom date picker replacing the native control, positioned to escape modal overflow

Constraints

  • Five self-contained HTML files — no framework, no bundler, no CDN
  • Vanilla JS only, including the QR encoder — Reed-Solomon over GF(256), all eight masks
  • localStorage as the only backend — account, cart and wishlist
  • Every QR decoded by machine before shipping, not eyeballed
  • Overflow detection run programmatically across 5 pages × 8 widths, overlays opened and measured individually
APEX Athletic Club — screenshot 1
APEX Athletic Club — screenshot 2
APEX Athletic Club — screenshot 3
APEX Athletic Club — screenshot 4
APEX Athletic Club — screenshot 5
Open the live demo