# Design Guidelines: Dating Web Application

## Design Approach

**Reference-Based Design** drawing inspiration from industry leaders:
- **Tinder/Bumble**: Card-based discovery, swipe interactions, visual hierarchy
- **Hinge**: Detailed profile layouts, conversation starters
- **Instagram**: Visual storytelling, clean photo grids
- **Linear**: Modern typography, subtle animations, clean forms

**Core Principle**: Create an emotionally engaging, trustworthy platform that balances visual romance with functional clarity.

---

## Color System

### Primary Colors (Light Mode)
- **Brand Primary**: 340 75% 55% (warm rose/pink for romantic appeal)
- **Brand Secondary**: 340 65% 45% (deeper rose for contrast)
- **Background**: 0 0% 98% (soft white)
- **Surface**: 0 0% 100% (pure white for cards)
- **Text Primary**: 0 0% 15% (near black)
- **Text Secondary**: 0 0% 45% (medium gray)

### Primary Colors (Dark Mode)
- **Brand Primary**: 340 70% 60% (slightly lighter rose)
- **Brand Secondary**: 340 60% 50% (medium rose)
- **Background**: 0 0% 8% (deep charcoal)
- **Surface**: 0 0% 12% (elevated charcoal for cards)
- **Text Primary**: 0 0% 95% (near white)
- **Text Secondary**: 0 0% 65% (light gray)

### Supporting Colors
- **Success**: 142 70% 45% (matches, verified profiles)
- **Warning**: 38 90% 55% (notifications, pending actions)
- **Error**: 0 70% 50% (reports, blocks)
- **Info**: 210 80% 55% (tips, onboarding)

**Strategy**: Use primary colors sparingly for CTAs and key interactions. Keep backgrounds neutral to let profile photos shine.

---

## Typography

### Font Families
- **Primary (Headings)**: 'Inter', sans-serif - clean, modern, friendly
- **Secondary (Body)**: 'Inter', sans-serif - consistent, readable
- **Accent (Numbers/Stats)**: 'Inter', sans-serif - maintain consistency

### Type Scale
- **Hero**: text-5xl md:text-6xl font-bold (landing/auth pages)
- **H1**: text-4xl font-semibold (page titles)
- **H2**: text-2xl font-semibold (section headers)
- **H3**: text-xl font-medium (card headers, profile names)
- **Body Large**: text-base (primary content)
- **Body**: text-sm (secondary content, bios)
- **Caption**: text-xs (timestamps, metadata)

---

## Layout System

### Spacing Scale
Core units: **2, 4, 6, 8, 12, 16, 20, 24** (Tailwind units)
- Tight spacing: p-2, gap-2 (within components)
- Standard: p-4, gap-4 (cards, lists)
- Comfortable: p-6 to p-8 (sections, containers)
- Generous: p-12 to p-24 (page margins, hero sections)

### Grid System
- **Desktop**: max-w-7xl mx-auto (main container)
- **Discovery Cards**: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- **Profile Layout**: 2-column split (photos left, details right on desktop)
- **Message List**: Single column, max-w-4xl centered

### Responsive Breakpoints
- Mobile: base (< 768px) - single column, full-width cards
- Tablet: md (768px+) - 2-column grids, side navigation
- Desktop: lg (1024px+) - 3-column grids, persistent sidebar

---

## Component Library

### Authentication & Onboarding
- **Login Card**: Centered, max-w-md, elevated shadow, social login buttons with provider logos
- **Signup Flow**: Multi-step form with progress indicator, one section per screen
- **Welcome Screen**: Full-height hero with gradient overlay on background image, centered content

### Navigation
- **Main Nav (Desktop)**: Persistent left sidebar, icons + labels, active state with primary color
- **Main Nav (Mobile)**: Bottom navigation bar, 4-5 key actions, icon-only with labels on tap
- **Profile Nav**: Top bar with back button, profile name, actions menu (report, block)

### Profile Components
- **Profile Card (Discovery)**: 
  - Full-height card with stacked photos (swipeable carousel)
  - Bottom overlay gradient for readability
  - Name, age, distance in large text
  - Quick facts (2-3 icons with labels)
  - Bio snippet (2 lines max)
  
- **Full Profile View**:
  - Photo grid at top (3x2 layout)
  - Detailed sections: About, Interests (tag pills), Lifestyle (icon grid), Looking For
  - Action buttons: Like (primary), Pass (outline), Report (ghost)

### Discovery Interface
- **Card Stack**: Centered, max-w-lg, cards slightly rotated beneath
- **Action Buttons**: Large circular buttons below card (Pass left, Like right, Super Like center)
- **Filters**: Top bar with chip-style toggles for age, distance, preferences

### Messaging
- **Chat List**: Avatar + name + last message preview, timestamp, unread badge
- **Chat View**: 
  - Fixed header with match info and actions
  - Message bubbles: sent (primary color, right), received (surface color, left)
  - Input bar: fixed bottom, rounded input field, send button
  - Timestamps between message groups

### Subscription/Premium
- **Pricing Cards**: 3-column grid, middle plan highlighted with primary border
- **Feature List**: Checkmarks for included features, crossed-out for unavailable
- **CTA Button**: Full-width primary button with gradient background

### Moderation/Admin
- **Report Modal**: Centered dialog, reason checkboxes, optional text input
- **Admin Dashboard**: Data tables with search, filters, status badges
- **User Card (Admin)**: Compact view with key info, quick actions (ban, verify, delete)

---

## Interactive Elements

### Buttons
- **Primary**: bg-primary text-white, rounded-full, px-8 py-3
- **Secondary**: border-2 border-primary text-primary, rounded-full, px-6 py-2.5
- **Ghost**: text-primary hover:bg-primary/10, rounded-lg
- **Icon**: Circular, p-3, border or filled based on context

### Cards
- **Elevated**: bg-surface shadow-lg rounded-2xl, hover:shadow-xl transition
- **Flat**: bg-surface border border-gray-200 dark:border-gray-800 rounded-xl
- **Interactive**: cursor-pointer hover:scale-[1.02] transition-transform

### Forms
- **Input Fields**: border rounded-lg px-4 py-3, focus:border-primary focus:ring-2 focus:ring-primary/20
- **Dropdowns**: Custom styled select with arrow icon, matches input styling
- **Checkboxes/Radio**: Custom styled with primary color, larger touch targets (44x44px minimum)
- **File Upload**: Drag-and-drop zone with preview thumbnails for photos

### Feedback
- **Toast Notifications**: Fixed top-right, slide-in animation, auto-dismiss
- **Loading States**: Skeleton screens for cards, spinner for actions
- **Empty States**: Illustration + helpful message + CTA button

---

## Images Strategy

### Hero Images
- **Landing Page**: Large hero with romantic couple or diverse singles, gradient overlay (340 75% 55% to transparent)
- **Auth Pages**: Subtle background pattern or blurred user collage, not distracting

### Profile Photos
- **Aspect Ratio**: 4:5 portrait for main photos, 1:1 for thumbnails
- **Grid Layout**: Masonry-style on profile view, carousel on discovery cards
- **Placeholders**: Gradient background with user initials for missing photos

### Iconography
- **Source**: Heroicons (outline for inactive, solid for active states)
- **Size**: w-5 h-5 for inline, w-6 h-6 for buttons, w-8 h-8 for feature cards
- **Color**: Inherit from parent or use text-gray-500 for neutral

---

## Animations & Micro-interactions

**Minimal & Purposeful** - avoid excessive motion:
- **Card Swipe**: Translate and rotate on drag, snap back if released early
- **Like Animation**: Heart icon scale + color pulse on successful match
- **Page Transitions**: Fade-in content, 200ms duration
- **Hover States**: Subtle scale (1.02) or opacity (0.9) changes
- **Match Celebration**: Full-screen overlay with "It's a Match!" and profile photos

---

## Accessibility & Dark Mode

- **Contrast Ratios**: Minimum 4.5:1 for text, 3:1 for interactive elements
- **Focus States**: Visible 2px outline with primary color
- **Dark Mode**: Automatic detection via system preference, toggle in settings
- **Touch Targets**: Minimum 44x44px for all interactive elements
- **Alt Text**: Descriptive text for all profile photos and icons

---

## Key Screens Layout

**Landing Page**: Hero (80vh) → Features (3-col grid) → How It Works (timeline) → Testimonials (2-col) → CTA section → Footer

**Discovery**: Full-height card stack, floating action buttons, top filters bar

**Profile**: Photo grid header → About section → Interests tags → Lifestyle grid → Looking for card → Action buttons (sticky on mobile)

**Messages**: Chat list (left sidebar on desktop, full screen on mobile) → Chat view (main content area)

**Settings**: Single column form, grouped sections with dividers, save buttons per section