docs(05): create phase 5 design system token rework plans

3 plans across 2 waves covering DS-01, DS-02, DS-03: - Plan 01: Token edits (radius, colors, chart vars) + chart components - Plan 02: Shared component rounded-* removal + spacing upgrades - Plan 03: Per-page sweep (9 pages) + visual verification checkpoint Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:53:20 +02:00
parent df2c6af8bf
commit e5637511d7
4 changed files with 652 additions and 2 deletions
--- a/.planning/ROADMAP.md
+++ b/.planning/ROADMAP.md
@@ -29,7 +29,11 @@ Decimal phases appear between their surrounding integers in numeric order.
  2. Category color swatches are visibly colorful against white backgrounds — not washed-out or grey-tinted — and still pass WCAG 4.5:1 contrast for text
  3. Page layouts feel uncluttered — content sections have consistent whitespace gaps and no visual crowding between cards or sections
  4. A full visual pass of all 9 pages (Dashboard, Budget List, Budget Detail, Template, Categories, Quick Add, Settings, Login, Register) confirms no regressions from token changes
-**Plans**: TBD
+**Plans:** 3 plans
+Plans:
+- [ ] 05-01-PLAN.md — Design tokens (radius, colors, chart vars) and chart component Bar radius updates
+- [ ] 05-02-PLAN.md — Shared component rounded-* removal and spacing upgrades (PageShell, DashboardSkeleton, CategorySection, ChartEmptyState, QuickAddPicker)
+- [ ] 05-03-PLAN.md — Per-page sweep (all 9 pages) for rounded-* removal, spacing upgrades, and visual verification checkpoint

 ### Phase 6: Preset Data, First-Run Detection, and DB Safety
 **Goal**: The data layer is safe and ready — duplicate budget/category writes are impossible at the DB level, and the app correctly identifies first-run users
@@ -109,7 +113,7 @@ Phases execute in numeric order: 5 → 6 → 7 → 8 → 9

 | Phase | Plans Complete | Status | Completed |
 |-------|----------------|--------|-----------|
-| 5. Design System Token Rework | 0/? | Not started | - |
+| 5. Design System Token Rework | 0/3 | Planned | - |
 | 6. Preset Data, First-Run Detection, DB Safety | 0/? | Not started | - |
 | 7. Setup Wizard | 0/? | Not started | - |
 | 8. Auto-Budget Creation | 0/? | Not started | - |
--- a/.planning/phases/05-design-system-token-rework/05-01-PLAN.md
+++ b/.planning/phases/05-design-system-token-rework/05-01-PLAN.md
@@ -0,0 +1,219 @@
+---
+phase: 05-design-system-token-rework
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/index.css
+  - src/components/dashboard/charts/SpendBarChart.tsx
+  - src/components/dashboard/charts/IncomeBarChart.tsx
+  - src/components/dashboard/charts/ExpenseDonutChart.tsx
+autonomous: true
+requirements:
+  - DS-01
+  - DS-02
+
+must_haves:
+  truths:
+    - "--radius token is 0 in index.css, cascading sharp corners to all shadcn components"
+    - "Category fill colors have chroma >= 0.22 making them visibly colorful"
+    - "--color-chart-* variables are deleted from index.css"
+    - "Chart bars render with 0 radius (no rounded caps)"
+    - "CSS overrides exist for Recharts rectangles and Sonner toasts"
+  artifacts:
+    - path: "src/index.css"
+      provides: "Design token source of truth with --radius: 0, raised fill chromas, removed chart vars, third-party overrides"
+      contains: "--radius: 0"
+    - path: "src/components/dashboard/charts/SpendBarChart.tsx"
+      provides: "Spend bar chart with sharp bars"
+      contains: "radius={0}"
+    - path: "src/components/dashboard/charts/IncomeBarChart.tsx"
+      provides: "Income bar chart with sharp bars"
+      contains: "radius={0}"
+    - path: "src/components/dashboard/charts/ExpenseDonutChart.tsx"
+      provides: "Donut chart legend with square color dots"
+  key_links:
+    - from: "src/index.css"
+      to: "all shadcn components"
+      via: "--radius: 0 token cascade"
+      pattern: "--radius: 0"
+    - from: "src/index.css"
+      to: "chart components"
+      via: "--color-*-fill CSS variables"
+      pattern: "color-.*-fill"
+---
+
+<objective>
+Edit design tokens in src/index.css (radius, colors, chart var removal, third-party overrides) and update chart component Bar radius props to 0.
+
+Purpose: Establish the sharp-cornered, vibrant-pastel visual foundation that cascades to all shadcn components and charts.
+Output: Modified index.css with new token values + CSS overrides; 3 chart component files with radius={0} and no rounded-full.
+</objective>
+
+<execution_context>
+@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
+@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
+@.planning/phases/05-design-system-token-rework/05-UI-SPEC.md
+</execution_context>
+
+<context>
+@.planning/ROADMAP.md
+@.planning/STATE.md
+
+<interfaces>
+<!-- Current src/index.css @theme inline block (lines 5-79) is the single token source of truth -->
+<!-- Chart components reference CSS variables via ChartConfig and Bar fill props -->
+
+From src/components/dashboard/charts/SpendBarChart.tsx:
+```tsx
+const chartConfig = {
+  budgeted: { label: "Budgeted", color: "var(--color-budget-bar-bg)" },
+  actual: { label: "Actual", color: "var(--color-muted-foreground)" },
+} satisfies ChartConfig
+// Bar radius={4} on both Bar elements
+// Cell fill uses var(--color-${entry.type}-fill) -- already correct
+```
+
+From src/components/dashboard/charts/IncomeBarChart.tsx:
+```tsx
+const chartConfig = {
+  budgeted: { label: "Budgeted", color: "var(--color-budget-bar-bg)" },
+  actual: { label: "Actual", color: "var(--color-income-fill)" },
+} satisfies ChartConfig
+// Bar radius={[4, 4, 0, 0]} on both Bar elements
+```
+
+From src/components/dashboard/charts/ExpenseDonutChart.tsx:
+```tsx
+// Line 141: <span className="inline-block size-3 shrink-0 rounded-full" .../>
+// Uses var(--color-${entry.type}-fill) for legend dot colors -- already correct
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Edit design tokens and add CSS overrides in index.css</name>
+  <files>src/index.css</files>
+  <read_first>src/index.css</read_first>
+  <action>
+Edit src/index.css with these exact changes:
+
+1. Line 7: Change `--color-background: oklch(0.98 0.005 260)` to `--color-background: oklch(0.98 0.01 260)` (warm background chroma from 0.005 to 0.01).
+
+2. Lines 52-57: DELETE the entire "Chart Colors" section (6 lines):
+   ```
+   /* Chart Colors */
+   --color-chart-1: oklch(0.72 0.14 155);
+   --color-chart-2: oklch(0.7 0.14 25);
+   --color-chart-3: oklch(0.72 0.14 50);
+   --color-chart-4: oklch(0.65 0.16 355);
+   --color-chart-5: oklch(0.72 0.14 220);
+   ```
+
+3. Lines 65-70: Replace the 6 fill token values with raised chroma (0.22+):
+   ```css
+   --color-income-fill: oklch(0.72 0.22 155);
+   --color-bill-fill: oklch(0.70 0.22 25);
+   --color-variable-expense-fill: oklch(0.74 0.22 50);
+   --color-debt-fill: oklch(0.66 0.23 355);
+   --color-saving-fill: oklch(0.72 0.22 220);
+   --color-investment-fill: oklch(0.68 0.22 285);
+   ```
+
+4. Line 72: Change `--radius: 0.625rem` to `--radius: 0`.
+
+5. After the closing `}` of the `@layer base` block (after line 99), add CSS overrides for third-party components:
+   ```css
+   /* Third-party radius overrides */
+   .recharts-rectangle {
+     rx: 0;
+     ry: 0;
+   }
+
+   [data-sonner-toast] {
+     border-radius: 0 !important;
+   }
+   ```
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <acceptance_criteria>
+    - src/index.css contains `--radius: 0;`
+    - src/index.css contains `--color-background: oklch(0.98 0.01 260)`
+    - src/index.css contains `--color-income-fill: oklch(0.72 0.22 155)`
+    - src/index.css contains `--color-bill-fill: oklch(0.70 0.22 25)`
+    - src/index.css contains `--color-variable-expense-fill: oklch(0.74 0.22 50)`
+    - src/index.css contains `--color-debt-fill: oklch(0.66 0.23 355)`
+    - src/index.css contains `--color-saving-fill: oklch(0.72 0.22 220)`
+    - src/index.css contains `--color-investment-fill: oklch(0.68 0.22 285)`
+    - src/index.css does NOT contain `--color-chart-1` or `--color-chart-2` or `--color-chart-3` or `--color-chart-4` or `--color-chart-5`
+    - src/index.css contains `.recharts-rectangle`
+    - src/index.css contains `[data-sonner-toast]`
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>index.css has --radius: 0, raised fill chromas (0.22+), deleted chart vars, warmed background, and CSS overrides for Recharts and Sonner</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Update chart component Bar radius props and remove hardcoded rounded-full</name>
+  <files>src/components/dashboard/charts/SpendBarChart.tsx, src/components/dashboard/charts/IncomeBarChart.tsx, src/components/dashboard/charts/ExpenseDonutChart.tsx</files>
+  <read_first>src/components/dashboard/charts/SpendBarChart.tsx, src/components/dashboard/charts/IncomeBarChart.tsx, src/components/dashboard/charts/ExpenseDonutChart.tsx</read_first>
+  <action>
+1. In SpendBarChart.tsx: Find the two `<Bar` elements. Change `radius={4}` to `radius={0}` on both Bar components. Do NOT change ChartConfig colors -- they are already correct (budgeted uses --color-budget-bar-bg, actual Cell uses var(--color-${entry.type}-fill)).
+
+2. In IncomeBarChart.tsx: Find the two `<Bar` elements. Change `radius={[4, 4, 0, 0]}` to `radius={0}` on both Bar components. Do NOT change ChartConfig colors -- they are already correct (actual uses --color-income-fill).
+
+3. In ExpenseDonutChart.tsx: Find line 141 (the legend color dot span). Remove `rounded-full` from the className string. The className should go from `"inline-block size-3 shrink-0 rounded-full"` to `"inline-block size-3 shrink-0"`. No other changes needed in this file.
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <acceptance_criteria>
+    - SpendBarChart.tsx contains `radius={0}` (grep returns 2 matches)
+    - SpendBarChart.tsx does NOT contain `radius={4}`
+    - IncomeBarChart.tsx contains `radius={0}` (grep returns 2 matches)
+    - IncomeBarChart.tsx does NOT contain `radius={[4, 4, 0, 0]}`
+    - ExpenseDonutChart.tsx does NOT contain `rounded-full`
+    - ExpenseDonutChart.tsx contains `"inline-block size-3 shrink-0"`
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>All 3 chart components have sharp bars (radius={0}) and the donut legend dot is square (no rounded-full)</done>
+</task>
+
+</tasks>
+
+<threat_model>
+## Trust Boundaries
+
+No trust boundaries affected. This plan modifies CSS tokens and SVG presentation props only. No user input handling, no data access, no authentication changes.
+
+## STRIDE Threat Register
+
+| Threat ID | Category | Component | Disposition | Mitigation Plan |
+|-----------|----------|-----------|-------------|-----------------|
+| — | — | — | — | No applicable threats — pure CSS/visual changes |
+</threat_model>
+
+<verification>
+- `bun run build` passes after both tasks
+- grep confirms --radius: 0 in index.css
+- grep confirms no --color-chart-* references remain in src/
+- grep confirms radius={0} in both bar chart components
+</verification>
+
+<success_criteria>
+- Token cascade makes all shadcn components sharp-cornered (verified by --radius: 0 in index.css)
+- Category fill colors raised to 0.22+ chroma (verified by grep on index.css)
+- Chart color duplication eliminated (--color-chart-* deleted, verified by grep)
+- Chart bars render with sharp ends (radius={0} in both bar chart files)
+- CSS overrides exist for Recharts SVG and Sonner toasts
+- Build passes cleanly
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/05-design-system-token-rework/05-01-SUMMARY.md`
+</output>
--- a/.planning/phases/05-design-system-token-rework/05-02-PLAN.md
+++ b/.planning/phases/05-design-system-token-rework/05-02-PLAN.md
@@ -0,0 +1,178 @@
+---
+phase: 05-design-system-token-rework
+plan: 02
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/components/shared/PageShell.tsx
+  - src/components/dashboard/DashboardSkeleton.tsx
+  - src/components/dashboard/CategorySection.tsx
+  - src/components/dashboard/charts/ChartEmptyState.tsx
+  - src/components/QuickAddPicker.tsx
+autonomous: true
+requirements:
+  - DS-01
+  - DS-03
+
+must_haves:
+  truths:
+    - "PageShell gap is gap-8 providing generous header-to-content spacing on all pages"
+    - "All shared component hardcoded rounded-* classes are removed"
+    - "DashboardSkeleton spacing matches the upgraded gap/space-y values"
+    - "No pill-shaped skeleton placeholders remain in shared components"
+  artifacts:
+    - path: "src/components/shared/PageShell.tsx"
+      provides: "Layout shell with gap-8 section spacing"
+      contains: "gap-8"
+    - path: "src/components/dashboard/DashboardSkeleton.tsx"
+      provides: "Dashboard loading skeleton with sharp corners and upgraded spacing"
+    - path: "src/components/dashboard/CategorySection.tsx"
+      provides: "Category section trigger without rounded-md"
+    - path: "src/components/dashboard/charts/ChartEmptyState.tsx"
+      provides: "Chart empty state without rounded-lg"
+    - path: "src/components/QuickAddPicker.tsx"
+      provides: "Quick add picker without rounded-sm or rounded-full"
+  key_links:
+    - from: "src/components/shared/PageShell.tsx"
+      to: "all 9 pages"
+      via: "PageShell wrapper component"
+      pattern: "gap-8"
+---
+
+<objective>
+Remove hardcoded rounded-* classes and upgrade spacing in shared components (PageShell, DashboardSkeleton, CategorySection, ChartEmptyState, QuickAddPicker).
+
+Purpose: These shared components are used across multiple pages. Fixing them first ensures consistent sharp corners and generous spacing everywhere they appear.
+Output: 5 modified component files with no hardcoded rounding and upgraded spacing values.
+</objective>
+
+<execution_context>
+@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
+@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
+</execution_context>
+
+<context>
+@.planning/ROADMAP.md
+@.planning/STATE.md
+
+<interfaces>
+From src/components/shared/PageShell.tsx (line 15):
+```tsx
+<div className="flex flex-col gap-6">  <!-- gap-6 --> gap-8 -->
+```
+
+From src/components/dashboard/DashboardSkeleton.tsx:
+```tsx
+// Line 20: <div className="flex flex-col gap-6">          -- gap-8
+// Line 22: <div className="grid gap-4 sm:grid-cols-2..."> -- gap-6
+// Line 29: <div className="grid gap-6 md:grid-cols-2..."> -- gap-8
+// Line 35,43,51: <Skeleton className="h-[250px] w-full rounded-md" /> -- remove rounded-md
+// Line 59: <div className="... rounded-md border-l-4 ..."> -- remove rounded-md
+// Lines 63-64: <Skeleton className="h-5 w-24 rounded-full" /> -- remove rounded-full
+```
+
+From src/components/dashboard/CategorySection.tsx (line 73):
+```tsx
+<button className="... rounded-md border-l-4 bg-card px-4 py-3 ...">
+```
+
+From src/components/dashboard/charts/ChartEmptyState.tsx (line 12):
+```tsx
+className={cn("... rounded-lg border border-dashed ...", className)}
+```
+
+From src/components/QuickAddPicker.tsx:
+```tsx
+// Line 156: className="... rounded-sm px-2 py-1.5 ..."
+// Line 201: <div className="size-2 rounded-full" .../>
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Upgrade PageShell spacing and remove rounded-* from DashboardSkeleton</name>
+  <files>src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx</files>
+  <read_first>src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx</read_first>
+  <action>
+1. In PageShell.tsx line 15: Change `gap-6` to `gap-8` in the className string `"flex flex-col gap-6"`.
+
+2. In DashboardSkeleton.tsx, make all of the following changes:
+   - Line 20: Change `gap-6` to `gap-8` in `"flex flex-col gap-6"`
+   - Line 22: Change `gap-4` to `gap-6` in `"grid gap-4 sm:grid-cols-2 lg:grid-cols-3"`
+   - Line 29: Change `gap-6` to `gap-8` in `"grid gap-6 md:grid-cols-2 lg:grid-cols-3"`
+   - Lines 35, 43, 51: Remove `rounded-md` from `<Skeleton className="h-[250px] w-full rounded-md" />` (3 occurrences). Result: `className="h-[250px] w-full"`
+   - Line 59: Remove `rounded-md` from the div className `"flex items-center gap-3 rounded-md border-l-4 ..."`. The border-l-4 remains.
+   - Lines 63, 64: Remove `rounded-full` from `<Skeleton className="h-5 w-24 rounded-full" />` (2 occurrences). Result: `className="h-5 w-24"`
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <acceptance_criteria>
+    - PageShell.tsx contains `gap-8` and does NOT contain `gap-6`
+    - DashboardSkeleton.tsx does NOT contain `rounded-md` or `rounded-full`
+    - DashboardSkeleton.tsx contains `gap-8` (2 occurrences) and `gap-6` (1 occurrence for the summary cards grid)
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>PageShell uses gap-8 for header-to-content spacing; DashboardSkeleton has no hardcoded rounding and upgraded spacing</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Remove rounded-* from CategorySection, ChartEmptyState, and QuickAddPicker</name>
+  <files>src/components/dashboard/CategorySection.tsx, src/components/dashboard/charts/ChartEmptyState.tsx, src/components/QuickAddPicker.tsx</files>
+  <read_first>src/components/dashboard/CategorySection.tsx, src/components/dashboard/charts/ChartEmptyState.tsx, src/components/QuickAddPicker.tsx</read_first>
+  <action>
+1. In CategorySection.tsx line 73: Remove `rounded-md` from the button className. The className goes from `"group flex w-full items-center gap-3 rounded-md border-l-4 bg-card px-4 py-3 text-left hover:bg-muted/40 transition-colors"` to `"group flex w-full items-center gap-3 border-l-4 bg-card px-4 py-3 text-left hover:bg-muted/40 transition-colors"`.
+
+2. In ChartEmptyState.tsx line 12: Remove `rounded-lg` from the cn() className string. The class goes from `"flex min-h-[250px] w-full items-center justify-center rounded-lg border border-dashed ..."` to `"flex min-h-[250px] w-full items-center justify-center border border-dashed ..."`.
+
+3. In QuickAddPicker.tsx:
+   - Line 156: Remove `rounded-sm` from the picker item className. Goes from `"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 ..."` to `"flex w-full items-center gap-2 px-2 py-1.5 ..."`.
+   - Line 201: Remove `rounded-full` from the category dot className. Goes from `className="size-2 rounded-full"` to `className="size-2"`.
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <acceptance_criteria>
+    - CategorySection.tsx does NOT contain `rounded-md`
+    - ChartEmptyState.tsx does NOT contain `rounded-lg`
+    - QuickAddPicker.tsx does NOT contain `rounded-sm` or `rounded-full`
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>All 3 shared components have no hardcoded rounding classes; sharp corners enforced everywhere they appear</done>
+</task>
+
+</tasks>
+
+<threat_model>
+## Trust Boundaries
+
+No trust boundaries affected. This plan modifies CSS class strings in component JSX only. No user input handling, no data access, no authentication changes.
+
+## STRIDE Threat Register
+
+| Threat ID | Category | Component | Disposition | Mitigation Plan |
+|-----------|----------|-----------|-------------|-----------------|
+| — | — | — | — | No applicable threats — pure CSS class changes |
+</threat_model>
+
+<verification>
+- `bun run build` passes after both tasks
+- grep confirms no `rounded-md`, `rounded-full`, `rounded-lg`, `rounded-sm` remain in the 5 modified files
+- grep confirms `gap-8` in PageShell.tsx
+</verification>
+
+<success_criteria>
+- PageShell provides gap-8 section spacing to all pages
+- DashboardSkeleton has sharp skeletons and upgraded spacing
+- CategorySection trigger button has no rounded corners
+- ChartEmptyState border has no rounded corners
+- QuickAddPicker items and dots have no rounded corners
+- Build passes cleanly
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md`
+</output>
--- a/.planning/phases/05-design-system-token-rework/05-03-PLAN.md
+++ b/.planning/phases/05-design-system-token-rework/05-03-PLAN.md
@@ -0,0 +1,249 @@
+---
+phase: 05-design-system-token-rework
+plan: 03
+type: execute
+wave: 2
+depends_on:
+  - 05-01
+  - 05-02
+files_modified:
+  - src/pages/DashboardPage.tsx
+  - src/pages/BudgetListPage.tsx
+  - src/pages/BudgetDetailPage.tsx
+  - src/pages/TemplatePage.tsx
+  - src/pages/CategoriesPage.tsx
+  - src/pages/QuickAddPage.tsx
+  - src/pages/SettingsPage.tsx
+  - src/pages/LoginPage.tsx
+  - src/pages/RegisterPage.tsx
+autonomous: false
+requirements:
+  - DS-01
+  - DS-02
+  - DS-03
+
+must_haves:
+  truths:
+    - "All 9 pages have no hardcoded rounded-* classes remaining"
+    - "All 9 pages have upgraded spacing (space-y-8, gap-8 for sections)"
+    - "Visual pass confirms sharp corners, colorful pastels, and generous whitespace everywhere"
+  artifacts:
+    - path: "src/pages/DashboardPage.tsx"
+      provides: "Dashboard with space-y-8 and gap-8 section spacing"
+      contains: "space-y-8"
+    - path: "src/pages/BudgetListPage.tsx"
+      provides: "Budget list without rounded-md on row containers"
+    - path: "src/pages/BudgetDetailPage.tsx"
+      provides: "Budget detail without rounded-sm/md/full, upgraded spacing"
+    - path: "src/pages/TemplatePage.tsx"
+      provides: "Template page without rounded-sm/full, upgraded spacing"
+    - path: "src/pages/CategoriesPage.tsx"
+      provides: "Categories page without rounded-sm/full, upgraded spacing"
+    - path: "src/pages/QuickAddPage.tsx"
+      provides: "Quick add page without rounded-full/md"
+    - path: "src/pages/SettingsPage.tsx"
+      provides: "Settings page with space-y-6 card content spacing"
+    - path: "src/pages/LoginPage.tsx"
+      provides: "Login page verified (token cascade handles Card rounding)"
+    - path: "src/pages/RegisterPage.tsx"
+      provides: "Register page verified (token cascade handles Card rounding)"
+  key_links:
+    - from: "all 9 pages"
+      to: "src/index.css"
+      via: "--radius: 0 token cascade through Tailwind utilities"
+      pattern: "no rounded-full or rounded-sm or rounded-md classes remain"
+---
+
+<objective>
+Sweep all 9 pages to remove hardcoded rounded-* classes and upgrade spacing values. Finish with a visual verification checkpoint across all pages.
+
+Purpose: Complete the per-page visual rework ensuring DS-01 (sharp edges), DS-02 (colorful pastels visible), and DS-03 (generous whitespace) are met everywhere.
+Output: 9 modified page files with no rounding and upgraded spacing + visual confirmation.
+</objective>
+
+<execution_context>
+@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
+@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
+@.planning/phases/05-design-system-token-rework/05-UI-SPEC.md
+</execution_context>
+
+<context>
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/05-design-system-token-rework/05-01-SUMMARY.md
+@.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md
+
+<interfaces>
+<!-- From 05-PATTERNS.md: Complete inventory of hardcoded rounded-* per page -->
+
+DashboardPage.tsx: No hardcoded rounded-* classes. Spacing: space-y-6 -> space-y-8 (line 186), gap-6 -> gap-8 (line 207).
+
+BudgetListPage.tsx: Line 243 rounded-md on row div. Spacing: gap-4 -> gap-6, gap-6 -> gap-8, space-y-6 -> space-y-8 where present.
+
+BudgetDetailPage.tsx: Lines 290 (rounded-sm), 303 (rounded-md), 353 (rounded-sm), 439 (rounded-md), 497 (rounded-full). Spacing: verify no space-y-6/gap-6 remain.
+
+TemplatePage.tsx: Lines 250 (rounded-sm), 256 (rounded-full), 258 (rounded-md), 292 (rounded-sm), 385 (rounded-full). Spacing: 247 space-y-6->space-y-8, 268 gap-6->gap-8, 287 space-y-6->space-y-8.
+
+CategoriesPage.tsx: Lines 101 (rounded-sm), 107 (rounded-full), 108 (rounded-md), 134 (rounded-sm). Spacing: 98 space-y-6->space-y-8, 130 space-y-6->space-y-8.
+
+QuickAddPage.tsx: Lines 98 (rounded-full), 100 (rounded-md). No major spacing changes.
+
+SettingsPage.tsx: No rounded-* classes. Spacing: line 87 space-y-4->space-y-6 in CardContent.
+
+LoginPage.tsx: No rounded-* classes. Token cascade handles Card. Verify p-4->p-6 if card content wrapper has p-4.
+
+RegisterPage.tsx: No rounded-* classes. Token cascade handles Card. Verify p-4->p-6 if card content wrapper has p-4.
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Remove rounded-* and upgrade spacing on all 9 pages</name>
+  <files>src/pages/DashboardPage.tsx, src/pages/BudgetListPage.tsx, src/pages/BudgetDetailPage.tsx, src/pages/TemplatePage.tsx, src/pages/CategoriesPage.tsx, src/pages/QuickAddPage.tsx, src/pages/SettingsPage.tsx, src/pages/LoginPage.tsx, src/pages/RegisterPage.tsx</files>
+  <read_first>src/pages/DashboardPage.tsx, src/pages/BudgetListPage.tsx, src/pages/BudgetDetailPage.tsx, src/pages/TemplatePage.tsx, src/pages/CategoriesPage.tsx, src/pages/QuickAddPage.tsx, src/pages/SettingsPage.tsx, src/pages/LoginPage.tsx, src/pages/RegisterPage.tsx</read_first>
+  <action>
+Apply two categories of changes to each page: (A) remove hardcoded rounded-* classes, (B) upgrade spacing values. Use the exact inventory from 05-PATTERNS.md.
+
+**DashboardPage.tsx:**
+- (B) Line ~186: `space-y-6` -> `space-y-8`
+- (B) Line ~207: `gap-6` -> `gap-8`
+
+**BudgetListPage.tsx:**
+- (A) Line ~243: Remove `rounded-md` from `"flex items-center gap-3 rounded-md border p-3"` -> `"flex items-center gap-3 border p-3"`
+- (B) Upgrade any `gap-4` -> `gap-6`, `gap-6` -> `gap-8`, `space-y-6` -> `space-y-8` found in the file
+
+**BudgetDetailPage.tsx:**
+- (A) Line ~290: Remove `rounded-sm` from skeleton header div className
+- (A) Line ~303: Remove `rounded-md` from `<Skeleton>` className
+- (A) Line ~353: Remove `rounded-sm` from group heading div className `"mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"` -> `"mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"`
+- (A) Line ~439: Remove `rounded-md` from summary box `"rounded-md border p-4"` -> `"border p-4"`
+- (A) Line ~497: Remove `rounded-full` from SelectLabel category dot `"size-2 rounded-full"` -> `"size-2"`
+- (B) Verify existing space-y-8 at line ~338 is correct. Upgrade any remaining space-y-6 or gap-6 instances.
+
+**TemplatePage.tsx:**
+- (A) Line ~250: Remove `rounded-sm` from skeleton group heading div
+- (A) Line ~256: Remove `rounded-full` from `<Skeleton>` className
+- (A) Line ~258: Remove `rounded-md` from `<Skeleton>` className
+- (A) Line ~292: Remove `rounded-sm` from template item group heading div `"mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"` -> `"mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"`
+- (A) Line ~385: Remove `rounded-full` from SelectLabel category dot `"size-2 rounded-full"` -> `"size-2"`
+- (B) Line ~247: `space-y-6` -> `space-y-8`
+- (B) Line ~268: `gap-6` -> `gap-8`
+- (B) Line ~287: `space-y-6` -> `space-y-8`
+
+**CategoriesPage.tsx:**
+- (A) Line ~101: Remove `rounded-sm` from skeleton group heading div
+- (A) Line ~107: Remove `rounded-full` from `<Skeleton>` className
+- (A) Line ~108: Remove `rounded-md` from `<Skeleton>` className
+- (A) Line ~134: Remove `rounded-sm` from category group heading div `"mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"` -> `"mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"`
+- (B) Line ~98: `space-y-6` -> `space-y-8`
+- (B) Line ~130: `space-y-6` -> `space-y-8`
+
+**QuickAddPage.tsx:**
+- (A) Line ~98: Remove `rounded-full` from `<Skeleton>` className
+- (A) Line ~100: Remove `rounded-md` from `<Skeleton>` className
+
+**SettingsPage.tsx:**
+- (B) Line ~87: `space-y-4` -> `space-y-6` in CardContent className
+- (B) Also check skeleton equivalent (~line 69) for same `space-y-4` -> `space-y-6`
+
+**LoginPage.tsx:**
+- No rounded-* to remove (Card uses token cascade).
+- (B) Check for any `p-4` on card content wrappers and upgrade to `p-6` if found. If no `p-4` exists (CardContent already uses px-6 from shadcn defaults), no change needed.
+
+**RegisterPage.tsx:**
+- Same as LoginPage -- check for `p-4` card content wrapper upgrades.
+
+**IMPORTANT:** Line numbers are approximate from the PATTERNS.md inventory. Read each file first to find the exact locations. Search for the exact class strings listed above.
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build && grep -rn "rounded-full\|rounded-sm\|rounded-md\|rounded-lg" src/pages/ || echo "NO HARDCODED ROUNDED CLASSES FOUND IN PAGES - PASS"</automated>
+  </verify>
+  <acceptance_criteria>
+    - grep -rn "rounded-full\|rounded-sm\|rounded-md\|rounded-lg" src/pages/ returns NO matches
+    - DashboardPage.tsx contains `space-y-8` and `gap-8`
+    - BudgetListPage.tsx does NOT contain `rounded-md`
+    - BudgetDetailPage.tsx does NOT contain `rounded-sm` or `rounded-md` or `rounded-full`
+    - TemplatePage.tsx does NOT contain `rounded-sm` or `rounded-full` or `rounded-md`
+    - CategoriesPage.tsx does NOT contain `rounded-sm` or `rounded-full` or `rounded-md`
+    - QuickAddPage.tsx does NOT contain `rounded-full` or `rounded-md`
+    - SettingsPage.tsx contains `space-y-6` in CardContent
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>All 9 pages have zero hardcoded rounded-* classes and upgraded spacing values</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <name>Task 2: Visual verification of all 9 pages</name>
+  <what-built>
+    Complete design system token rework across all files:
+    - --radius: 0 (sharp corners on all shadcn components)
+    - Category fill colors raised to 0.22+ chroma (vibrant pastels)
+    - Background warmed to 0.01 chroma
+    - Chart color vars deleted and replaced with fill token references
+    - All hardcoded rounded-* classes removed from pages and shared components
+    - Spacing upgraded: gap-8 section gaps, space-y-8 section rhythm, p-6 card padding
+    - CSS overrides for Recharts bars and Sonner toasts
+  </what-built>
+  <how-to-verify>
+    1. Run `bun run dev` to start the dev server
+    2. Open the app in your browser
+    3. Check each of the 9 pages against this checklist:
+
+    **Sharp corners (DS-01):**
+    - [ ] Dashboard: Cards, buttons, chart containers all have sharp corners
+    - [ ] Budget List: Row containers have sharp corners
+    - [ ] Budget Detail: Group headings, summary box, select dots all sharp
+    - [ ] Template: Group headings, skeleton placeholders, category dots all sharp
+    - [ ] Categories: Group headings, skeleton placeholders all sharp
+    - [ ] Quick Add: Picker items, category dots all sharp
+    - [ ] Settings: Card and form elements all sharp
+    - [ ] Login: Auth card sharp
+    - [ ] Register: Auth card sharp
+    - [ ] Recharts bar charts have square ends (no rounded caps)
+    - [ ] Any toast notifications have sharp corners
+
+    **Colorful pastels (DS-02):**
+    - [ ] Category color swatches are visibly colorful against white backgrounds (not washed-out or grey)
+    - [ ] Chart bar colors are vibrant and distinct from each other
+
+    **Generous whitespace (DS-03):**
+    - [ ] Section gaps feel spacious (not crowded)
+    - [ ] Card internal padding feels generous
+    - [ ] Page headers have consistent spacing before first content section
+  </how-to-verify>
+  <resume-signal>Type "approved" if all checks pass, or describe any visual issues found</resume-signal>
+</task>
+
+</tasks>
+
+<threat_model>
+## Trust Boundaries
+
+No trust boundaries affected. This plan modifies CSS class strings in page JSX only.
+
+## STRIDE Threat Register
+
+| Threat ID | Category | Component | Disposition | Mitigation Plan |
+|-----------|----------|-----------|-------------|-----------------|
+| — | — | — | — | No applicable threats — pure CSS class changes |
+</threat_model>
+
+<verification>
+- `bun run build` passes
+- grep confirms zero rounded-full/sm/md/lg in src/pages/
+- Human visual pass confirms all 9 pages meet DS-01, DS-02, DS-03
+</verification>
+
+<success_criteria>
+- Zero hardcoded rounded-* classes remain across all 9 page files
+- All spacing values upgraded per the mapping (space-y-8, gap-8 for sections)
+- Human confirms sharp corners visible on every page
+- Human confirms category colors are vibrant (not grey/washed-out)
+- Human confirms generous whitespace between sections
+- Build passes cleanly
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/05-design-system-token-rework/05-03-SUMMARY.md`
+</output>