Free
Productivity
CROSS_PLATFORM

Stackline Tasks

Productivity app blending today-list focus with a kanban board, command palette and satisfying completion physics.

3.8k views 689 copies 356 words

The Prompt

# Stackline — Task & Project App

## Goal
Design and build "Stackline", a task & project app. Feel: quiet machine — fast, keyboard-friendly, invisible until needed. Every screen should feel native-quality — fluid, tactile, zero jank.

## Visual Language
- **Palette**: true neutral grays (no blue cast), #0F0F10 dark base, single blue #3B82F6 for today/primary, priority shown by left-border weight not color noise
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.

## Screens
1. **Today** — date header, tasks as clean rows (checkbox, title, project dot, due chip); 'Later today' collapsed group; add-bar pinned bottom with natural-language hint ('tomorrow 3pm call…').
2. **Board** — horizontal kanban (Backlog/Doing/Done), cards minimal: title + assignee dot + priority border; column counts in header.
3. **Task detail** — sheet: title editable inline, description, subtasks with progress line, activity log collapsed by default.
4. **Projects** — list with progress rings and next-milestone line; archive swipe.
5. **Command palette** — pull-down anywhere summons ⌘K-style search: fuzzy match tasks/projects/actions ('move to Doing').

## Interactions & Motion
- Completing a task: checkbox fills, row lifts 2px, fades and slides out 250ms later — satisfying but quick; haptic tick.
- Kanban drag: card tilts 3° while dragging, columns highlight as drop targets.
- Natural-language add parses date/time chips live under the input as you type.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.

## Details That Matter
- Overdue tasks don't turn red — they get a subtle 'aging' amber dot. Shame doesn't ship tasks.
- Board ↔ Today share state instantly; moving to Done anywhere completes everywhere.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.

You may also like