BodyBay is a boutique Pilates studio that needed a digital home reflecting their philosophy — mindful movement, clean energy, and welcoming warmth. The website had to serve two audiences: existing members checking class schedules, and new visitors deciding whether to book their first session.
Live: bodybay.ashispace.in
Full design and development — from user research and wireframing in Figma through to responsive frontend build and deployment.
The palette draws from the studio’s physical space: soft whites (#FAFAFA), muted sage green (#A8B5A0), warm sand (#E8DDD3), and a single accent of deep forest (#2D4A3E) for CTAs. The intent was to create a sense of calm that mirrors the Pilates experience itself — no harsh contrasts, no visual noise.
I chose a single font family — DM Sans — in three weights (400, 500, 700). Using one font family reduces HTTP requests and keeps the visual language unified. The hierarchy is created through size and weight alone, not through mixing typefaces.
Why it matters: One font family = one font file to load (with variable font support). This is 60% fewer font requests compared to a two-family setup.
I used an 8px spacing grid consistently across every element. Padding, margins, gaps — everything snaps to multiples of 8. This creates a rhythmic visual consistency that feels “designed” without the user being able to pinpoint why. The grid system uses CSS gap in Flexbox containers, avoiding margin-based spacing that can cause collapsing issues.
Every animation on BodyBay — the hero fade-in, section reveals, hover transitions — is pure CSS using @keyframes and transition. I used animation-timeline: view() for scroll-triggered reveals where supported, with a graceful fallback to static content for older browsers.
Impact: Zero JavaScript for animations. The entire animation layer adds 0 bytes to the JS bundle. Total JavaScript on the page: under 5KB (just the mobile menu toggle and class booking form validation).
The FAQ section uses <details> and <summary> elements — zero JavaScript required. I styled them with CSS to match the design system, including a smooth max-height transition for the open/close animation.
Impact: The FAQ works without JavaScript entirely. If JS fails to load, the FAQ still works perfectly. This is progressive enhancement in practice.
Sections below the fold use content-visibility: auto with an explicit contain-intrinsic-size. This tells the browser to skip rendering these sections until they’re near the viewport.
Impact: Initial render time improved by ~30% because the browser only paints what’s visible. The class schedule section (the heaviest section with a complex grid) doesn’t impact First Contentful Paint at all.
All photography uses the <picture> element with AVIF as the primary format and WebP as the fallback. AVIF achieves 50% better compression than WebP at equivalent quality.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Pilates class in session" loading="lazy">
</picture>Impact: The hero image is 89KB in AVIF vs. 210KB in JPEG — a 58% reduction. Across all images, this saves ~1.2MB of total page weight.
I extracted the above-the-fold CSS (~4KB) and inlined it directly in the <head> tag. The rest of the stylesheet loads asynchronously via <link rel="preload" as="style"> with an onload handler that swaps it in.
Impact: First Contentful Paint: 0.8 seconds on a simulated 3G connection. The user sees styled content before external stylesheets finish loading.
Every animation on the site is wrapped in a @media (prefers-reduced-motion: no-preference) query. Users who have enabled “Reduce motion” in their OS settings see a static, fully functional version of the site with no animations.
@media (prefers-reduced-motion: no-preference) {
.hero-content {
animation: fadeSlideUp 0.6s ease-out;
}
}Impact: This is an accessibility requirement, not a nice-to-have. Users with vestibular disorders, motion sensitivity, or simply a preference for stillness get a first-class experience.
The weekly class schedule uses a Flexbox grid that collapses from a 7-column layout (one per day) to a single-column vertical list on mobile. Each class card shows time, instructor, difficulty level, and a “Book” CTA. The responsive behavior uses a single flex-wrap: wrap rule — no media queries for the grid itself.
Impact: The schedule is scannable on any device. Members checking the next class on their phone in the studio lobby get the info in under 2 seconds.
<picture> elementBodyBay reinforced my conviction that performance is a design decision, not an afterthought. When I chose CSS animations over GSAP, it wasn’t just about bundle size — it was about ensuring the site feels as calm as the studio. Heavy JS animations can cause jank on mid-range devices, breaking the illusion of smoothness that a wellness brand depends on.
The biggest takeaway: constraint breeds creativity. By limiting myself to CSS-only animations and native HTML elements, I was forced to think harder about what the design actually needed. The result was a simpler, faster, more accessible site than I would have built with a “use every tool in the box” approach.
I also learned the real value of content-visibility — it’s an underused CSS property that can dramatically improve render performance with a single line of code. Every frontend developer should know about it.