Vera Sanctuary — Designing a Dual-Theme Luxury Spa & Wellness Experience

An editorial, production-ready brand and web platform built for an exclusive thermal wellness retreat specializing in hydrotherapy, bespoke skin rituals, and meditative spaces.

Project overview

Vera Sanctuary was conceptualized and developed to bridge the gap between atmospheric luxury design and frictionless digital hospitality. Designed from the ground up, the platform targets high-end wellness travelers seeking an unhurried, serene digital journey before stepping foot into the physical sanctuary.

As the sole designer and Framer developer, I structured the hybrid visual system, dual-theme architecture, interactive booking workflows, and production deployment.

The challenge

Luxury wellness and hospitality websites face a unique UX challenge: balancing complex transactional features—such as multi-tier membership billing, real-time date and guest selectors, global currency conversion, and instant reservation modals—with an airy, serene, and uncluttered aesthetic.

The challenge was to engineer a hybrid visual system that alternates seamlessly between deep obsidian dark-mode sections and crisp, botanical light-mode containers without compromising loading speed, responsiveness, or emotional calm.

Research and exploration

The visual direction began by analyzing high-end hospitality layouts, thermal spa architecture, and balanced high-contrast UI patterns. I explored a refined color palette pairing deep charcoal/obsidian bases (#0B0D10) with warm champagne gold accents (#D4AF37) for evening/night sequences, transitioning into warm alabaster light containers (#FAF8F5) with sage green highlights (#7A8B7B) for daytime treatment directories.

A central focus was translating booking utilities and membership calculators into intuitive, elegant web components that feel bespoke rather than corporate.

The visual identity & web system

The resulting platform combines structured bento grids, glassmorphism containers, and custom micro-interactions to create a cohesive digital experience:

Hybrid Dark/Light Theme System: Fluid visual transitions alternating between immersive dark obsidian sections and clean botanical light-mode containers.

Cinematic Hero & Booking Engine: Immersive header integrated with a live availability check bar supporting flexible date selection, guest counts, and ritual filtering.

Curated Rituals Bento Grid: A light-mode 3-column interactive gallery featuring signature treatments complete with transparent pricing and modal reservation triggers.

Membership & Day Pass Engine: A sleek obsidian pricing architecture featuring an interactive billing toggle switch (Monthly, Annual, and VIP Day Passes) with dynamic discount calculations.

The Secret Botanical Key: An interactive engagement component near the footer that expands with a glowing gold particle effect upon interaction, unlocking a seasonal guest perk and redemption code.