From 87efedbc33fe3bec0d0e7df1783a29bab2bd3280 Mon Sep 17 00:00:00 2001 From: AJ Isaacs Date: Thu, 26 Feb 2026 23:53:24 -0500 Subject: [PATCH] docs: add UI redesign design document MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Linear/Vercel aesthetic — top nav, refined kanban cards, muted color system, command-K search, frosted detail panel. Co-Authored-By: Claude Opus 4.6 --- docs/plans/2026-02-26-ui-redesign-design.md | 114 ++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 docs/plans/2026-02-26-ui-redesign-design.md diff --git a/docs/plans/2026-02-26-ui-redesign-design.md b/docs/plans/2026-02-26-ui-redesign-design.md new file mode 100644 index 0000000..df2f792 --- /dev/null +++ b/docs/plans/2026-02-26-ui-redesign-design.md @@ -0,0 +1,114 @@ +# TaskTracker UI Redesign — Design Document + +**Date**: 2026-02-26 +**Aesthetic**: Linear / Vercel — restrained, premium, intentional +**Scope**: Full redesign — layout, navigation, visual system, all pages + +## Layout & Navigation + +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) +1. **Title** — large, bold, click-to-edit +2. **Status pill + category** — small, muted +3. **Description** — click-to-edit, markdown support +4. **Time** — elapsed + estimate with thin gradient progress bar +5. **Subtasks** — checkbox list with add button +6. **Notes** — recent notes inline with relative timestamps +7. **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