Phase 4: Full-App Design Consistency - Context

Gathered: 2026-03-17 Status: Ready for planning

## Phase Boundary

Apply the design system established in Phases 1-3 to every page in the app, delivering a consistent visual experience across all navigation paths. This covers all 9 pages: Login, Register, Categories, Template, Budget List, Budget Detail, Quick Add, Settings, and Dashboard. All pages adopt PageShell, consistent card/typography/color token usage, and full i18n coverage including German locale. No new features or backend changes.

## Implementation Decisions

Solid muted background color behind the centered card (not plain white, not gradient)
Card accent styling: Claude's discretion on whether top border, shadow, or ring treatment
App icon/logo above the title text for brand presence (icon asset or emoji/Lucide placeholder)
OAuth buttons (Google, GitHub) get provider SVG icons next to text labels
Pages remain standalone centered layout (outside AppLayout sidebar)

BudgetDetail category sections

Migrate to semantic color tokens (--color-on-budget, --color-over-budget) replacing hardcoded text-green-600/text-red-600
Adopt direction-aware diff logic from Phase 3: spending types over when actual > budgeted, income under-earned when actual < budgeted
Visual style upgrade: left-border accent + badge chips to match dashboard CategorySection appearance
Collapsible behavior vs always-expanded: Claude's discretion based on editing context
Tier badges (Fixed/Variable/One-off): Claude's discretion on keep vs remove
Overall totals box: Claude's discretion on whether to use StatCards or keep as styled box

Category group headers (Categories, Template, QuickAdd pages)

Group header styling upgrade: Claude's discretion on matching full dashboard CategorySection style (left-border card) vs enhanced dot style (larger dot, bolder label)
Template group totals placement (header badge vs table footer): Claude's discretion
BudgetList enrichment (card per budget vs table): Claude's discretion
Settings card structure (single vs multiple cards): Claude's discretion

Page descriptions & polish

Page descriptions via PageShell description prop: Claude's discretion per-page on whether subtitle adds value
Empty states: Claude's discretion on whether to add icon/illustration treatment or keep text-only
Loading states: Add skeleton placeholders for all pages (replacing current return null loading states)
i18n: Locale-aware month formatting using Intl.DateTimeFormat with user's locale (e.g., "Marz 2026" in German)
All hardcoded English strings (month names, "Month"/"Year" labels) must get i18n keys in both en.json and de.json

Claude's Discretion

Auth card accent treatment (top border vs shadow vs ring)
BudgetDetail: collapsible sections vs visual-style-only (always expanded)
BudgetDetail: keep or remove tier badges
BudgetDetail: overall totals as StatCards vs styled box
CRUD page group headers: dashboard-style cards vs enhanced dots
Template: group totals in header vs table footer
BudgetList: card layout vs table layout
Settings: single card vs multiple cards
Per-page description text decisions
Empty state visual treatment level
Skeleton component designs for each page type

## Specific Ideas

No specific references — open to standard approaches within the established design system. User wants the app to feel visually unified when navigating between pages, with the dashboard as the "north star" for the design language.

<code_context>

Existing Code Insights

Reusable Assets

PageShell (components/shared/PageShell.tsx): Title + optional description + CTA slot — ready to adopt on all authenticated pages
CategorySection (components/dashboard/): Left-border accent + badge chips + collapsible — potential reuse/adaptation for BudgetDetail and CRUD pages
StatCard / SummaryStrip (components/dashboard/): KPI cards — potential reuse on BudgetDetail totals
DashboardSkeleton (components/dashboard/): Pattern reference for building page-specific skeletons
Skeleton (ui/skeleton.tsx): shadcn primitive for building loading placeholders
Badge (ui/badge.tsx): Already used on Categories/Template/BudgetDetail for tier indicators
Card / CardHeader / CardContent (ui/card.tsx): Available for wrapping sections
categoryColors / categoryLabels (lib/palette.ts): CSS variable map and labels for all 6 types
formatCurrency (lib/format.ts): Currency formatting — already in use, no changes needed
Separator (ui/separator.tsx): Available for visual section breaks

Established Patterns

Two-tier OKLCH color pattern: text ~0.55 lightness, fills ~0.65-0.70 (Phase 1)
Semantic status tokens: --color-over-budget (red), --color-on-budget (green) (Phase 1)
Components accept t() as prop to stay presentational (Phase 1)
Direction-aware diff logic: spending over when actual > budget, income/savings over when actual < budget (Phase 3)
Left-border accent card with badge chips for category group headers (Phase 3)
useMemo hooks before early returns for Rules of Hooks compliance (Phase 2)
Inline editing with InlineEditCell pattern (BudgetDetailPage)
Category grouping: CATEGORY_TYPES.map(type => items.filter(by type)) pattern used across Categories, Template, BudgetDetail

Integration Points

All authenticated pages render inside AppLayout > SidebarInset > <main> > <Outlet> — PageShell wraps content inside Outlet
Login/Register are standalone routes outside AppLayout — background treatment applies to their root div
App.tsx: Route definitions — no changes needed, just page component internals
i18n: en.json and de.json need new keys for page descriptions, loading states, and localized month names
Intl.DateTimeFormat: Available natively for locale-aware month formatting — replaces hardcoded English month arrays in BudgetListPage

</code_context>

## Deferred Ideas

None — discussion stayed within phase scope.

Phase: 04-full-app-design-consistency Context gathered: 2026-03-17

6.1 KiB Raw Blame History