5.4 KiB
Mobile To-Do & Calendar App Specification Overview
The application is a minimalist task management app consisting of three primary screens:
To-Do List Add New Task Calendar
Navigation between these screens is handled through a persistent bottom navigation bar.
The design should prioritize simplicity, quick task entry, and easy organization using categories, priorities, and scheduling.
General Layout Device Mobile-first Portrait orientation Responsive for Android and iOS Safe-area support for notches and gesture navigation Theme White background Rounded containers Thin borders Minimal shadows Black typography Accent colors used only for task categories and primary actions Navigation
A bottom navigation bar is visible on every screen.
Navigation Items
- Tasks
Icon: Checklist
Destination: To-Do List Screen
- Calendar
Icon: Calendar
Destination: Calendar Screen
- Settings
Icon: Gear
Destination: Settings Screen
The currently active tab should be highlighted using the primary accent color.
Screen 1 — To-Do List Header
Height: approximately 80 px
Contains:
App logo aligned left Title "TODO" centered Rounded top corners Category Filter
Directly below the header.
Layout
Horizontal scroll list.
Each category is displayed as a colored circular button.
Example:
🔴 Work 🟢 Personal 🔵 School 🟠 Shopping 🟣 Health 🟡 Finance 🌈 All
Requirements:
Scroll horizontally Only one category selected at a time Selected category has: thicker border slight shadow scale animation
Selecting a category filters the visible tasks.
Task List
Vertical scrolling list.
Each row contains:
Left
Checkbox
States:
Empty Checked
Checking a task should:
Strike through title Reduce opacity Optionally move task to completed section Center
Task title
One line
If text exceeds width:
Truncate with ellipsis Right
Three-dot overflow menu
Menu options:
Edit Delete Duplicate Mark Complete Change Category Change Priority Floating Action Button
Position:
Bottom-right
Shape:
Rounded square or circular
Color:
Primary accent (pink/red in sketch)
Icon:
Function:
Open Add Task Screen.
Screen 2 — Add New Task
Presented as a full screen.
Header
Same styling as home screen.
Contains:
Logo
TODO
Title
Add New Task
Category Selector
Horizontal row of colored circles.
User selects one.
Selection should update instantly.
Required field.
Task Name
Single-line text input.
Placeholder:
"Task name"
Required.
Maximum:
100 characters.
Subtasks
Section below task name.
Initially contains one button.
"+ Add Subtask"
Pressing button adds:
□ Subtask text field
Unlimited subtasks allowed.
Users can remove subtasks individually.
Date & Time
Single horizontal row.
Components:
Due Date field
Opens date picker.
Due Time field
Opens time picker.
Calendar button
Alternative method for selecting date.
Priority
Dropdown menu.
Options:
None Low Medium High Critical
Each priority has a corresponding color.
Description
Large multiline text area.
Placeholder:
"Add description..."
Maximum:
1000 characters.
Optional.
Buttons
Bottom aligned.
Submit
Primary button.
Creates task.
Returns to To-Do screen.
Cancel
Secondary button.
Discard changes.
Return without saving.
Screen 3 — Calendar
Displays scheduled tasks.
Header
Centered title:
Calendar
Date Strip
Horizontal row.
Shows days of current month.
Example:
1 2 3 4 5 6 7 8 9
Requirements:
Scrollable horizontally.
Current day highlighted.
Selecting a day refreshes task list.
Month Label
Displayed beneath date strip.
Example:
JAN 2026
Centered.
Calendar Body
Large content area.
Initially displays:
Tasks scheduled for selected day.
Each item includes:
Category color Task title Time Completion status
If no tasks:
Display
"No tasks scheduled."
Task Object
Each task should contain:
{ "id": "", "title": "", "description": "", "category": "", "priority": "", "completed": false, "dueDate": "", "dueTime": "", "subtasks": [], "createdAt": "", "updatedAt": "" } Categories
Each category consists of:
{ "id": "", "name": "", "color": "#HEX" }
Example:
Work
Red
Personal
Green
School
Blue
Shopping
Orange
Health
Purple
Finance
Yellow
Task States
A task can be:
Pending
Empty checkbox Normal text
Completed
Checked checkbox Strikethrough Reduced opacity
Overdue
Red due date Warning indicator
Due Today
Blue highlight
High Priority
Priority badge Interactions Tap Task
Opens edit screen.
Long Press Task
Selection mode.
Allows:
Delete multiple Complete multiple Change category Change priority Swipe Left
Delete task.
Swipe Right
Complete task.
Pull Down
Refresh list.
Category Tap
Filter tasks instantly.
FAB Tap
Open Add Task screen.
Submit
Validate required fields.
Save.
Return to task list.
Settings Screen
Although not drawn, the navigation implies a settings page containing:
Dark Mode toggle Notification settings Reminder preferences Default category Sort tasks by: Date Priority Alphabetically Creation date Backup & Sync About Visual Style Clean, minimal interface with ample whitespace. Rounded corners (16–20 px) for cards, buttons, and input fields. Consistent spacing (8 px grid) and typography hierarchy. Category colors should be used sparingly for chips, icons, and badges to avoid overwhelming the interface. Subtle animations (150–250 ms) for navigation, button presses, filtering, and task completion to create a responsive feel without distraction.