Pulse Fitness Studio

The brief

Pulse Fitness Studio is a fictional boutique gym. The business, its classes, coaches and prices in the demo are placeholder content, written to show how real content would work.

The brief we set ourselves: members decide in seconds whether a studio fits their week, so the schedule must be filterable by day and the plans must be easy to compare.

Goals

• Show the week's classes by day without a long scrolling table.
• Make membership options and prices easy to compare.
• Let visitors see the annual saving without doing the math.
• Look energetic while staying readable and accessible.

Design decisions

A schedule that shows one day at a time

Day tabs keep the list short on a phone, and the tab pattern works with the arrow keys as well as touch.

Energy through color, not clutter

A dark theme with a lime and pink accent feels energetic. Contrast is held to accessibility standards, including the dark surfaces.

Pricing without arithmetic

A single switch changes every plan between monthly and annual billing, and each plan states what is billed.

Signature effect: heartbeat

The heartbeat line draws once and then a bright pulse keeps travelling along it, above a ticker of class names. Unbounded, a wide display face, carries the headings and Manrope the body text. All looping motion is switched off for visitors who prefer reduced motion.

Mobile-first decisions

• The phone layout was designed first, with all seven day tabs visible on one row.
• Reserve buttons are at least 44 pixels tall.
• The billing switch is a real checkbox, so it works with any assistive technology.
• Nothing scrolls sideways at 390 pixels wide.

Features in the demo

Everything below is actually present in the live concept site, which you can open and try.

• Class schedule with day tabs (keyboard accessible)
• Reserve and waitlist buttons
• Three membership plans
• Monthly or annual billing switch that changes every price
• Coach profiles
• Free class sign-up form with validation
• Studio hours and location

Measured Lighthouse scores

• 100Performance
• 100Accessibility
• 100Best practices
• 91SEO

Measured on 2026-10-15 with Lighthouse 12.8.2, mobile form factor. Each demo was audited from a local web server on this machine using Lighthouse's default mobile emulation and throttling, headless Chromium, one run per demo. The server sent the demo's real security headers but not the noindex header used on the showcase, because a real client site would be indexable. Scores vary a few points between runs and machines.

Tech and security

• Hand-coded HTML and CSS with a small amount of vanilla JavaScript, with no framework or page builder.
• Self-hosted fonts, so no third-party font requests.
• A strict Content-Security-Policy with no inline code, enforced by our build scan.
• No trackers, no cookies and no third-party scripts.

What we'd do for a real client next

• Connect the schedule and reservations to the studio's booking software.
• Add real photography, coach biographies and class descriptions.
• Write HealthClub structured data and align the Google Business Profile.
• Add a care plan so the timetable and prices are updated each season.