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
1. Tasks

Icon:
Checklist

Destination:
To-Do List Screen

2. Calendar

Icon:
Calendar

Destination:
Calendar Screen

3. 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.