# Slaapstad Design Guidelines

## Design Approach
**Reference-Based: Airbnb + Booking.com Fusion**

Drawing from Airbnb's warm, trust-building aesthetic combined with Booking.com's information density and efficiency. The design prioritizes South African visual identity through imagery while maintaining professional booking platform standards.

## Brand Colors
**Primary Color Scheme: Deep Blue**
- Primary buttons, links, and interactive elements use a deep blue color (HSL 220 70% 45-50%)
- This provides a professional, trustworthy appearance while standing out against property imagery
- Amber/orange is reserved only for warnings and alerts

Key Principles:
- Visual trust-building through high-quality property photography
- Clear information hierarchy for dual user roles (hosts/guests)
- South African cultural elements in imagery and micro-copy
- Mobile-first responsive design (critical for SA market)

## Typography

**Font Families:**
- Primary: Inter (headings, UI elements) - weights: 400, 500, 600, 700
- Secondary: System UI fonts for body text

**Hierarchy:**
- Hero headlines: text-5xl/6xl font-bold
- Section headers: text-3xl/4xl font-semibold
- Card titles: text-xl font-semibold
- Body text: text-base font-normal
- Captions/metadata: text-sm font-medium
- Micro-labels: text-xs font-medium

## Layout System

**Spacing Primitives:**
Use Tailwind units: 2, 4, 6, 8, 12, 16, 20, 24
- Tight spacing: p-2, gap-2 (badges, tags)
- Standard spacing: p-4, gap-4 (cards, forms)
- Section padding: py-12/16/20 (responsive sections)
- Component margins: mb-6, mb-8, mb-12

**Grid System:**
- Property listings: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
- Search filters: grid-cols-2 md:grid-cols-4 gap-4
- Dashboard stats: grid-cols-2 lg:grid-cols-4 gap-4
- Max container width: max-w-7xl

## Core Components

### Navigation Header
- Sticky header with logo left, centered search bar (desktop), host/guest toggle right
- Toggle: Pill-shaped switch with icons and labels
- Mobile: Hamburger menu with bottom navigation bar
- Include: Trust indicators (verified hosts count, total bookings)

### Hero Section (Homepage)
- Full-width hero: h-[600px] with South African landscape imagery
- Overlay gradient for text readability
- Prominent search widget: Location, dates, guests inputs with large search button
- Headline positioning: Centered, with value proposition subtext

### Property Cards
- Aspect ratio 4:3 image carousel with heart icon (save/favorite)
- Rating stars + review count prominently displayed
- Price per night bold, commission tier badge (if host view)
- Pet-friendly icon, instant book badge
- Hover: Subtle scale transform (1.02)

### Search & Filters
- Sticky filter bar with dropdowns: Price, Property type, Amenities, Pet-friendly
- Commission tier filter slider (host search)
- Map view toggle button
- Results count and sorting options

### Star Rewards Display
- Circular progress indicator showing star accumulation
- Conversion calculator: "X stars = R XXX off your next booking"
- Star badge in user profile header

### Booking Flow
- Step indicator: Dates → Guests → Payment → Confirm
- Date picker: Calendar grid with disabled past dates
- Payment methods: Card grid showing options (Card, Payflex, Airtime) with logos
- WhatsApp unlock countdown (24h before check-in)
- Commission tier selector (host dashboard) with ranking preview

### Rating System
- 5-star display with half-star support
- Category breakdown: Cleanliness, Communication, Location, Pets (if applicable)
- Written review with "helpful" voting
- Photo uploads in reviews

### Dashboard (Dual Views)
**Guest Dashboard:**
- Upcoming bookings cards with check-in countdown
- Star balance widget with redemption CTA
- Past bookings with review prompts
- Saved properties grid

**Host Dashboard:**
- Property performance cards (views, bookings, revenue)
- Commission tier selector with ranking position
- Cleaner service requests list
- iCal sync status indicator
- Booking calendar with color-coded availability

### Forms
- Floating labels for inputs
- Icon prefixes (location pin, calendar, person)
- Inline validation with icons (checkmark/error)
- Multi-step property listing with progress bar
- Photo upload with drag-drop zone and preview grid

## Images

### Hero Images
Large full-width hero (1920×600px minimum) featuring:
- South African landscapes (Table Mountain, Drakensberg, coastal scenes)
- Or diverse property showcases
- Gradient overlay: bottom-to-top fade for text readability

### Property Photos
- Primary carousel images: 1200×900px (4:3 ratio)
- Minimum 5 photos per listing
- Show: Exterior, living areas, bedrooms, bathrooms, unique features

### Profile Photos
- User avatars: 200×200px circles
- Property thumbnail: 400×300px

### Trust Elements
- Payment method logos (Payflex, card providers)
- Verification badges
- WhatsApp icon integration

## Animations
Use sparingly:
- Skeleton loaders for property cards during load
- Smooth scroll to section anchors
- Star reward counter animation on booking completion
- Subtle fade-in for search results

## Mobile Considerations
- Bottom navigation: Home, Search, Bookings, Profile, Host Toggle
- Swipeable property image galleries
- Collapsible filter panels
- One-tap WhatsApp contact button
- Simplified commission tier selector (dropdown vs. slider)