# Phase 5: Design System Token Rework - Context

**Gathered:** 2026-04-20
**Status:** Ready for planning

<domain>
## Phase Boundary

Users see a sharp, minimal, clearly pastel UI across every page — the visual foundation that all subsequent phases build on. This phase modifies design tokens (CSS variables), adjusts spacing utilities across all 9 pages, and overrides third-party component styles. No new features, no new components — purely visual token and spacing changes.

</domain>

<decisions>
## Implementation Decisions

### Corner Radius Strategy
- All elements get 0px border radius — truly sharp corners everywhere
- Implementation via single `--radius: 0` token change in `src/index.css` (cascades to all shadcn components)
- No exceptions for avatars, badges, or any element
- Third-party components (Recharts bars, Sonner toasts) overridden via CSS selectors to force 0 radius

### Pastel Color Refinement
- Increase chroma on category fill colors to 0.22+ for visible colorful pop against white backgrounds
- Keep the two-tier color system: text colors at ~0.55L for WCAG 4.5:1 contrast, fill colors lighter/more saturated
- Slightly warm the base UI colors: background chroma from 0.005→0.01 for subtle warmth
- Align chart colors with category fill tokens directly — remove separate `--color-chart-*` variables and use `--color-*-fill` tokens in charts

### Spacing & Layout Strategy
- Increase section gaps: gap-4→gap-6, gap-6→gap-8 across all pages
- Increase card internal padding: p-4→p-6 for breathing room
- Keep existing max-w-7xl container constraint
- Standardize all page headers to mb-6 + section gaps to gap-8 for consistent rhythm

### Claude's Discretion
- Exact OKLCH chroma/lightness values for category fills (as long as they're 0.22+ chroma and pass WCAG)
- Order of page updates during implementation
- Whether to create a spacing utility class or apply changes inline

</decisions>

<code_context>
## Existing Code Insights

### Reusable Assets
- `src/index.css` — single file with all design tokens (`@theme inline` block), `--radius: 0.625rem` is the token to change
- `src/lib/palette.ts` — category color references using CSS variables (no changes needed, references tokens)
- shadcn/ui components in `src/components/ui/` — all use `rounded-*` classes that derive from `--radius`

### Established Patterns
- OKLCH color system already in place with hue-based category differentiation
- Two-tier category colors: text (L=0.55, C=0.16-0.18) and fill (L=0.65-0.70, C=0.18-0.20)
- Tailwind CSS 4 with `@theme inline` for CSS variable definitions
- 71 occurrences of `rounded`/`radius` across 27 source files

### Integration Points
- `src/index.css` `--radius` token controls all shadcn component rounding
- Chart components (`SpendBarChart`, `IncomeBarChart`, `ExpenseDonutChart`) reference `--color-chart-*` variables
- 9 pages to audit: Dashboard, BudgetList, BudgetDetail, Template, Categories, QuickAdd, Settings, Login, Register

</code_context>

<specifics>
## Specific Ideas

- Success criteria explicitly requires visual pass of all 9 pages confirming no regressions
- Category color swatches must be "visibly colorful against white backgrounds" — not washed-out
- "No pill buttons, no rounded cards, no rounded inputs visible anywhere"

</specifics>

<deferred>
## Deferred Ideas

None — discussion stayed within phase scope

</deferred>