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