Files

AJ Isaacs 87efedbc33 docs: add UI redesign design document

Linear/Vercel aesthetic — top nav, refined kanban cards,
muted color system, command-K search, frosted detail panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-26 23:53:24 -05:00

4.0 KiB

Raw Blame History

TaskTracker UI Redesign — Design Document

Date: 2026-02-26 Aesthetic: Linear / Vercel — restrained, premium, intentional Scope: Full redesign — layout, navigation, visual system, all pages

Replace the left sidebar with a slim top navigation bar (48px height):

Top bar: Logo/wordmark left, horizontal nav tabs center-left (Board, Analytics, Mappings), Cmd+K search trigger and "+" new task button right
No sidebar — 3 nav items don't justify a sidebar; reclaim the horizontal space for the kanban board
Active tab: subtle underline or pill highlight
Filter bar: contextual toolbar below the nav, only visible on the Board page
Full viewport width for content

Color System

Backgrounds (darkest to lightest)

Page: #0a0a0f
Card surface: #12131a + 1px border rgba(255,255,255,0.06)
Elevated (modals, dropdowns): #1a1b26 + soft box-shadow
Hover overlay: rgba(255,255,255,0.03)

Accent

Primary: violet-to-indigo gradient #8b5cf6 to #6366f1
Used for: active nav, primary buttons, focus rings, new task button

Status Colors (muted, shown as small dots/pills)

Active: #3b82f6 (blue)
Paused: #eab308 (amber)
Completed: #22c55e (green)
Pending: #64748b (slate)

Text

Primary: #e2e8f0
Secondary: #64748b
Tertiary/disabled: #334155

Effects

Background noise/grain texture (CSS noise SVG) on page background
Faint gradient border glow on card hover
Depth from border opacity, not heavy shadows

Kanban Board

Columns

No visible column containers — just header + card flow, separated by spacing
Header: status name (small caps) + count badge + 2px colored underline
Independent scroll per column if overflow

Task Cards

Dark card surface, 12px rounded corners, 1px subtle border
Content: title (medium weight), category dot + elapsed time (small muted), subtask progress dots if applicable
Hover: gradient glow border, translateY(-1px) lift
Active task: pulsing blue dot "live" indicator, brighter border
Dragging: stronger shadow, scale(1.02), background dims
Click anywhere opens detail panel

Empty Columns

Subtle dashed outline with muted "No tasks" text

New Task

Ghost card at bottom of Pending column: "+" icon + "New task" text, expands to inline form on click

Detail Panel

Slides in from right, 480px wide
Frosted glass background effect, backdrop blur on overlay
Spring-like animation (not linear)
Escape key or click outside to close

Layout (top to bottom)

Title — large, bold, click-to-edit
Status pill + category — small, muted
Description — click-to-edit, markdown support
Time — elapsed + estimate with thin gradient progress bar
Subtasks — checkbox list with add button
Notes — recent notes inline with relative timestamps
Action buttons — sticky bottom, contextual (only relevant actions per status)

Command-K Search

Cmd+K trigger shows as a small pill in top bar
Opens centered modal with large search input
Results grouped by type, keyboard navigable
Frosted glass backdrop

Analytics Page

Stat cards at top: "Tasks today", "Active time", "Most active category"
Timeline chart with accent gradient fills
Category breakdown chart
Activity feed: timestamps right, status dots left, connecting vertical line (git-log style)

Mappings Page

Subtle row separators instead of heavy borders
Full-row hover highlight
Match type uses muted pill badges
"Add Rule" appears as inline row at top of table

Empty States (all pages)

Large muted icon or subtle illustration
Helpful text with call-to-action button
Not just centered "No data" text

Tech Notes

Keep: React 19, Vite, Tailwind CSS 4, TanStack Query, dnd-kit, Recharts, Lucide icons
Add: CSS noise texture, spring animations (framer-motion or CSS springs)
Extract color tokens to a centralized theme config
Consider adding framer-motion for panel/card animations

4.0 KiB Raw Blame History