Project Overview Client: Vita (Concept Project) Type: Multi-Page Website with CMS Platform: Framer Role: Design and Development Industry: Wellness and Fitness

The Brief Design and develop a digital platform for an online yoga studio that breaks from traditional wellness aesthetics. Vita sought a modern, intentional, and accessible space that reflects the transformative nature of yoga without relying on clichés or overly ornate design.

The Challenge I wanted Vita to communicate:

Accessibility – Yoga for real people, anywhere.

Intention – A practice with depth and purpose.

Modernity – A departure from traditional wellness branding. Additionally, the site required a scalable class library with clear categorization, instructor profiles, and intuitive navigation.

Visual Direction The design centres on stillness in motion—balancing dynamic energy and centred calm. The visual system includes:

Silhouette photography – Focuses on form and movement, removing distractions.

Bold color blocking – Vibrant blue (#3B5FE8) and sage green (#77907C) create emotional anchors.

Dark foundation – A calm, focused environment with pure black (#000000).

Negative space – Mirrors the breathing room of yoga practice.

Content Architecture The site is structured around three key pages:

Hero Section – "Find your center. Move with intention." A dynamic silhouette against vibrant blue creates impact while maintaining accessibility.

Meet Your Guides – Instructor profiles framed as partners in practice, with clean portraits and quote-driven philosophy.

Class Library – CMS-driven grid layout with silhouette thumbnails, instructor details, duration, skill level, and visual badges for NEW/FREE classes.

Framer CMS Collections – Custom fields for class details (name, instructor, duration, level, category, image).

Responsive Design – Breakpoints at 1440px (desktop), 810px (tablet), and 390px (mobile) with adaptive layouts.

Interactions – Scroll-triggered animations, hover states, smooth transitions, and sticky navigation.

Performance – Optimized silhouette images, efficient CMS queries, and minimal external dependencies.

Unique Identity – Stands out in a saturated market with a modern, intentional aesthetic.

Accessibility – Makes yoga feel inclusive without sacrificing sophistication.

Intuitive Experience – Seamless class browsing and scalable CMS structure.

Technical Depth – Demonstrates advanced Framer skills (CMS, multi-page structure, responsive design).

Hero Section – Full-bleed blue with silhouette and headline.

About Section – Split layout with blue silhouette and manifesto text.

Class Library – Grid of class cards with metadata and filtering.

Color Sections – Alternating blue/sage/black rhythm throughout scroll.

Brand-aligned website design

Multi-page site architecture

Framer CMS implementation

Dark theme UI design

Responsive web design

Wellness/lifestyle branding

Framer CMS Collections: Dynamic content

Responsive Design: Adaptive layouts across breakpoints.

Framer Components

Typography System: Clear hierarchy with serif and sans-serif fonts.

Interactions: Scroll-triggered animations and smooth transitions.