# Massage Therapy Business Website - Design Guidelines

## Design Approach
**Reference-Based Approach**: Inspired by high-end wellness brands Equinox and SoulCycle, emphasizing clean, spa-focused aesthetics with premium feel and seamless mobile experience.

## Core Design Principles
- Mobile-first responsive design optimized for touch interactions
- Clean, serene wellness aesthetic with generous breathing room
- Professional yet approachable therapeutic atmosphere
- Seamless booking experience with minimal friction

## Color Palette

**Light Mode Colors:**
- Primary: `#8B7355` (Warm Taupe) - 28 33% 44% - headers, CTAs, accent elements
- Secondary: `#A8C090` (Sage Green) - 95 28% 67% - secondary buttons, highlights, nature elements
- Background: `#F4F1EA` (Cream) - 40 33% 94% - page background, cards
- Text: `#2C2C2C` (Charcoal) - 0 0% 17% - body text, headings
- Accent: `#D4B996` (Light Bronze) - 35 38% 71% - borders, subtle highlights

**Dark Mode:** Not required for this wellness-focused application.

## Typography

**Font Families:**
- Headings: Playfair Display (serif, elegant)
- Body/Navigation: Lato (clean, modern sans-serif)
- Alternative Body: Open Sans (accessible fallback)

**Type Scale:**
- Hero Headline: 3xl to 5xl (responsive)
- Section Headers: 2xl to 3xl
- Subheadings: xl to 2xl
- Body Text: base to lg
- Small Text: sm

**Font Weights:**
- Headings: 600-700 (semibold to bold)
- Body: 400 (regular)
- Emphasis: 500-600

## Layout System

**Spacing Units:** Use Tailwind units of 4, 6, 8, 12, 16, 20, 24, and 32 for consistent rhythm.

**Container Strategy:**
- Full-width sections: `w-full` with inner `max-w-7xl mx-auto px-4 md:px-6 lg:px-8`
- Content sections: `max-w-6xl mx-auto`
- Text-heavy areas: `max-w-4xl mx-auto`

**Section Padding:**
- Mobile: `py-12 to py-16`
- Desktop: `py-20 to py-32`

**Grid Layouts:**
- Services: 1 column mobile, 2-3 columns desktop (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)
- Gallery: Masonry-style or 2-3 column grid
- Features: Single column mobile, 2 columns tablet+

## Component Library

### Navigation
- Sticky header with smooth scrolling anchors
- Mobile: Hamburger menu, full-screen overlay
- Desktop: Horizontal nav with smooth hover states
- Touch-friendly tap targets (minimum 44px)
- Logo left, navigation right alignment

### Hero Section
- Full-width hero image with text overlay
- Height: 70vh to 90vh on mobile/desktop
- Dark overlay gradient for text legibility
- Centered headline + subheadline + primary CTA
- Smooth scroll indicator at bottom

### Gallery
- Full-width masonry grid showcasing therapy workspace and treatments
- Lightbox functionality for image viewing
- 2 columns mobile, 3-4 columns desktop
- Lazy loading for performance
- Captions overlay on hover (desktop) or below (mobile)

### Service Cards
- Clean card design with generous padding
- Service name, duration, brief description, pricing
- Sage green accent border on hover
- "Book Now" CTA button per service
- Icon or small image representing each treatment

### Map Section
- Embedded Google Maps showing general service area
- Rounded corners, subtle shadow
- Accompanying text about service coverage
- Mobile: Full-width with padding
- Desktop: 60% width map, 40% text sidebar

### Calendly Integration
- Embedded iframe within dedicated booking section
- Full-width on mobile, centered max-width on desktop
- Cream background framing
- Clear "Schedule Your Appointment" header above

### Contact/Inquiry Form
- Simple fields: Name, Email, Phone, Message
- Warm taupe submit button
- Business hours and contact info alongside form
- Two-column layout on desktop (form + info)

### Footer
- Multi-column layout: Services, Quick Links, Contact, Social
- Warm taupe background with cream text
- Copyright and credentials at bottom
- Mobile: Stacked single column

## Interaction Design

**Button Styles:**
- Primary CTA: Solid warm taupe background, cream text, rounded-lg, px-8 py-3
- Secondary: Outlined sage green, transparent background with blur effect when on images
- Hover: Subtle scale and brightness shift
- Touch feedback: Brief press state

**Scroll Behavior:**
- Smooth scrolling between sections
- Subtle fade-in animations for sections on scroll (optional, minimal)
- Fixed navigation with background blur on scroll

**Mobile Optimizations:**
- Touch targets minimum 44px height
- Adequate spacing between interactive elements
- Optimized image sizes for faster mobile loading
- Swipeable gallery on mobile

## Images

**Hero Image:**
- Large, professional full-width hero image (1920x1080 or similar)
- Serene massage therapy setting: peaceful treatment room, natural light, clean linens
- Dark gradient overlay (rgba(0,0,0,0.3) to rgba(0,0,0,0.5)) for text contrast

**Gallery Images (8-12 images):**
- Treatment room setup shots
- Massage therapy in progress (professional, appropriate)
- Relaxation and wellness spaces
- Therapeutic equipment and amenities
- Calming natural elements (plants, candles, textures)

**Service Section Backgrounds:**
- Subtle, soft-focus wellness imagery as section backgrounds
- Light overlay to maintain text readability

**Image Treatment:**
- Professional photography style
- Warm, natural lighting
- Calming, neutral color tones
- High resolution, optimized for web

## Accessibility
- High contrast between text and backgrounds
- Focus states clearly visible for keyboard navigation
- Touch targets meet minimum size requirements
- Alt text for all images
- Semantic HTML structure
- ARIA labels where appropriate

## Responsive Breakpoints
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px