SimpleFinanceDash/.planning/phases/05-design-system-token-rework/05-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
05-design-system-token-rework	03	execute	2	05-01 05-02	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	false	DS-01 DS-02 DS-03	truths artifacts key_links 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 path provides contains src/pages/DashboardPage.tsx Dashboard with space-y-8 and gap-8 section spacing space-y-8 path provides src/pages/BudgetListPage.tsx Budget list without rounded-md on row containers path provides src/pages/BudgetDetailPage.tsx Budget detail without rounded-sm/md/full, upgraded spacing path provides src/pages/TemplatePage.tsx Template page without rounded-sm/full, upgraded spacing path provides src/pages/CategoriesPage.tsx Categories page without rounded-sm/full, upgraded spacing path provides src/pages/QuickAddPage.tsx Quick add page without rounded-full/md path provides src/pages/SettingsPage.tsx Settings page with space-y-6 card content spacing path provides src/pages/LoginPage.tsx Login page verified (token cascade handles Card rounding) path provides src/pages/RegisterPage.tsx Register page verified (token cascade handles Card rounding) from to via pattern all 9 pages src/index.css --radius: 0 token cascade through Tailwind utilities no rounded-full or rounded-sm or rounded-md classes remain

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.

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

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

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.

Task 1: Remove rounded-* and upgrade spacing on all 9 pages 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 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 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. 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" <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> All 9 pages have zero hardcoded rounded-* classes and upgraded spacing values

Task 2: Visual verification of all 9 pages 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 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

Type "approved" if all checks pass, or describe any visual issues found

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

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

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

After completion, create `.planning/phases/05-design-system-token-rework/05-03-SUMMARY.md`