# Personal Task Management App - Design Guidelines

## Design Approach
**Reference-Based Approach**: Drawing inspiration from **iOS Reminders**, **Linear**, and **Notion** for their clean, mobile-first interfaces and intuitive task management patterns. This utility-focused app prioritizes efficiency and learnability over visual flourishes.

## Core Design Elements

### Color Palette
**Light Mode:**
- Background: 0 0% 98%
- Surface: 0 0% 100%
- Primary: 210 100% 56% (iOS-inspired blue)
- Text Primary: 220 9% 15%
- Text Secondary: 220 9% 46%
- Border: 220 13% 91%

**Dark Mode:**
- Background: 220 13% 9%
- Surface: 220 13% 14%
- Primary: 210 100% 66%
- Text Primary: 210 17% 98%
- Text Secondary: 215 16% 65%
- Border: 215 25% 27%

### Typography
- **Primary Font**: Inter (Google Fonts)
- **Headers**: 600 weight, various sizes (text-lg to text-2xl)
- **Body**: 400 weight, text-sm to text-base
- **Captions**: 400 weight, text-xs

### Layout System
**Tailwind Spacing Units**: 2, 4, 6, 8, 12, 16
- Consistent spacing creates rhythm: p-4, gap-6, m-8
- Mobile-first approach with touch-friendly targets (min 44px)

### Component Library

**Core UI Elements:**
- **Task Cards**: Rounded corners (rounded-lg), subtle shadows, swipe gestures
- **Buttons**: Filled primary, ghost secondary, icon-only variants
- **Input Fields**: Clean borders, focus states, iOS-style appearance
- **Status Indicators**: Color-coded dots and pills for task states

**Navigation:**
- **Bottom Tab Bar**: Fixed mobile navigation with 4-5 core sections
- **Header**: Minimal with context-aware actions and search

**Forms:**
- **Quick Task Entry**: Floating action button + modal overlay
- **Task Details**: Expandable sheets with sections for notes, time, project

**Data Displays:**
- **Calendar Grid**: Clean monthly/weekly views with visual task indicators
- **Kanban Columns**: Card-based with smooth drag interactions
- **Time Tracking**: Circular progress indicators and timer displays

**Overlays:**
- **Modals**: Full-screen on mobile, centered on larger screens
- **Sheets**: Bottom slide-up panels for task details and quick actions

### Mobile-First Considerations
- **Touch Targets**: Minimum 44px for all interactive elements
- **Swipe Gestures**: Left/right swipes for quick task actions
- **Thumb Navigation**: Bottom-aligned primary actions
- **One-Handed Use**: Key functions accessible in thumb zone

### Key Interaction Patterns
- **Drag & Drop**: Visual feedback with elevation and color changes
- **Quick Actions**: Long-press menus and swipe reveals
- **Progressive Disclosure**: Start simple, reveal complexity as needed
- **Contextual Transitions**: Smooth navigation between views maintaining context

### Visual Hierarchy
- **Typography Scale**: Clear size relationships for content hierarchy
- **Color Contrast**: Strong contrast for accessibility compliance
- **Spacing Rhythm**: Consistent vertical rhythm using the 8px grid
- **Information Density**: Balanced - not cluttered, but efficient use of space

This design system prioritizes usability and efficiency while maintaining visual appeal appropriate for a personal productivity tool.