Files

T

paul-nothaft 28ad3f1535 Add core components for task management and navigation

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

2025-09-11 08:59:20 +00:00

3.1 KiB

Raw Permalink Blame History

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.

3.1 KiB Raw Permalink Blame History