paul-nothaft
28ad3f1535
This commit introduces the foundational UI components and logic for the task management application, including task creation, calendar views, Kanban boards, and navigation elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/yy9YLEW
79 lines
3.1 KiB
Markdown
79 lines
3.1 KiB
Markdown
# 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. |