The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Personal Budget Dashboard

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build an original, complete personal budget app branded [BRAND] for [OWNER_NAME], whose sample plan concerns [BUDGET_CONTEXT]. Use a monthly overview with a category donut and daily spending chart, a searchable and filterable transaction ledger, editable budget goals with progress bars, and an accessible add-transaction dialog. Seed believable fixed data for [SAMPLE_MONTH], format amounts with [CURRENCY], and persist transactions and targets in localStorage. The polished application workspace is the first-screen visual anchor; do not add a marketing hero.

- Audience: Individuals, students, households, and freelancers who want to understand a monthly plan and practice a complete budgeting workflow without signing up, linking financial accounts, or sending personal data to a service.
- Goal: Let a visitor understand the sample month at a glance, find any transaction, adjust a category target, add an income or expense, and see every dependent figure and chart update correctly before and after a reload.
- Tone: Calm, precise, encouraging, and nonjudgmental. Use short practical labels and plain helper text. Never shame overspending, promise savings, provide financial advice, or imply that sample data came from a real account.

## Stack
- Framework: Vite 6 + React 19 + TypeScript
- Styling: Tailwind CSS 4.1
- Libraries: motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL), @fontsource-variable/inter (OFL), @fontsource/ibm-plex-mono (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './' and build.sourcemap to false; emit minified static files to dist/ with relative asset paths and no src/ directory copied into it.
  - Use Tailwind CSS 4 with its Vite plugin. Define the color, font, radius, shadow, and motion tokens from Design in src/index.css; use CSS media queries for responsive layout and prefers-reduced-motion.
  - Keep all copy, variable values, category metadata, merchants, transactions, budget targets, chart labels, and empty-state text in src/content.ts. When [BRAND], [OWNER_NAME], [BUDGET_CONTEXT], [CURRENCY], or [SAMPLE_MONTH] changes, rewrite every context-dependent employer, merchant, note, owner label, sample date, and storage namespace so no household-specific or freelance-specific content is left stale.
  - Define canonical Transaction and CategoryBudget types in src/lib/budget.ts. Store money as integer minor units, keep income positive and expenses negative only at the input boundary, and derive every total, chart series, percentage, goal state, and filtered row with pure functions. Never hard-code a displayed KPI separately from the transaction data or render NaN.
  - Implement a small hash router without another dependency: ./index.html and ./index.html#/overview show Overview, ./index.html#/transactions shows Transactions, and ./index.html#/goals shows Goals. Unknown hashes return to Overview. Preserve the shared shell and local data across view changes.
  - Create a versioned localStorage repository in src/lib/storage.ts with a namespace derived from [BRAND]. Seed only when no valid saved dataset exists, persist transactions and edited targets after each mutation, guard malformed JSON and storage or quota errors with a nonblocking message, and make Reset demo data restore the variable-derived seed after confirmation.
  - Use native dialog elements or an equally complete accessible implementation for Add transaction, Adjust target, and Reset confirmation: visible labels, initial focus, trapped focus, Escape to close, a close button, focus return to the invoker, and no background interaction while open.
  - Draw the donut, daily spending bars, and goal progress visuals with inline SVG or CSS from derived data. Provide text equivalents and accessible names; chart hover or tap details may enhance but must never replace visible values.
  - Use a plain document title containing [BRAND], an original local SVG favicon, and an ASSETS.md at the project root that lists the code-drawn visuals plus every font and icon package with package path, upstream source, author, and license.

## Variables
- [BRAND] — Budget app brand (default: "Willowsum"). Invented product name used in the wordmark, document title, and localStorage namespace.
- [OWNER_NAME] — Sample budget owner (default: "Maya Chen"). Fictional person whose first name and initials personalize the workspace; no portrait or real personal data.
- [BUDGET_CONTEXT] — Sample budget context (default: "a two-income household"). Short lowercase phrase that drives the sample income sources, merchants, notes, and one flexible spending category.
- [CURRENCY] — Display currency (default: "USD"). ISO currency code for local number formatting only; changing it must not claim to convert values at an exchange rate.
- [SAMPLE_MONTH] — Primary sample month (default: "May 2026"). Fixed sample month for all default dates and headings; derive the previous and next sample months without reading the real clock.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/personal-budget-dashboard in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Canvas `#F3F0E7` — Warm ivory application background.
- Panel `#FFFDF8` — Summary band, charts, ledger, dialogs, and goal surfaces.
- Forest `#183B32` — Navigation rail, primary buttons, active states, and income text.
- Forest Soft `#DCE8DF` — Selected navigation, positive status backgrounds, and subtle highlights.
- Ink `#202722` — Headings, body text, and transaction amounts.
- Muted `#626D65` — Secondary labels, notes, axes, and helper text.
- Rule `#D8DDD3` — Hairline borders, table rules, input borders, and chart grid lines.
- Chartreuse `#DCE9A8` — Small budget-remaining highlight and original brand-mark detail, never body text.
- Housing `#2E5B4C` — Housing donut segment and category marker.
- Groceries `#7B9870` — Groceries donut segment and category marker.
- Transport `#769A9D` — Transport donut segment and category marker.
- Dining `#C97455` — Dining donut segment and category marker.
- Utilities `#D0A24D` — Utilities donut segment and category marker.
- Health `#A66558` — Health donut segment and category marker.
- Leisure `#8D7892` — Leisure donut segment and category marker.
- Flexible `#6E8293` — Family or context-specific category donut segment and marker.
- Danger `#A34F39` — Over-budget text, destructive actions, and validation errors with readable contrast.

### Typography
- Page titles, major totals, and editorial numerals: Fraunces Variable (OFL), weights 500/600
- Navigation, controls, labels, body copy, tables, and dialogs: Inter Variable (OFL), weights 400/500/600/700
- Transaction IDs, dates, chart ticks, and right-aligned monetary values: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base scale. Desktop sidebar is 232px, top utility bar is 64px, main content has 32px padding and a 1480px maximum width, panels use 24px padding, and major sections have 24px gaps. Page titles are Fraunces 34px/1.1 at 600, KPI figures are Fraunces 30px at 600, body and table text are Inter 14px/1.5, and labels are 12px at 600. Controls are at least 40px high on desktop and 44px on mobile. Below 900px use 20px main padding; at 390px use 16px padding, 16px panel padding, and 12px field gaps.
- Radius: Use 14px for major panels and dialogs, 9px for inputs and buttons, 6px for small category swatches, and 999px only for compact status chips and progress tracks. Keep the summary as one ruled band rather than a grid of floating cards; avoid glass, glows, and excessive pill containers.
- Motion: Use 120–160ms ease-out transitions for hover, focus, active navigation, filter chips, and button states; calculated numbers always update immediately.
- Motion: On the first Overview render, reveal the donut with a 450ms stroke-dashoffset animation and daily bars with a 350ms 6px rise, staggered by no more than 8ms per bar.
- Motion: Hash-view changes crossfade and translate the incoming content 5px over 160ms without moving the shared navigation or delaying interaction.
- Motion: Dialogs fade their scrim and move the panel 8px upward over 180ms; goal bars interpolate width over 300ms after a target or transaction changes.
- Motion: Toasts rise 8px and fade over 160ms, remain readable for at least 4 seconds, and can be dismissed manually.
- Motion: Under prefers-reduced-motion, remove chart drawing, stagger, sliding, and interpolation; render final states immediately while preserving every focus and status change.
- Imagery: Use no photographs, stock images, generated images, avatars, or external illustrations. The rich budget interface is the visual anchor: a forest navigation rail, a ruled financial summary, a large multi-segment SVG donut, and a dense daily-spending chart. Draw an original [BRAND] mark as a 28px forest square containing three ivory ledger lines and one chartreuse dot. Use simple geometric category glyphs and the owner's initials only as functional UI accents. Lucide supplies interface icons; no bank, card-network, merchant, or payment-service marks.

## Pages & Sections
### Monthly overview (`index.html`)
1. **Canonical content and default arithmetic** — All copy below targets the default variables. [OWNER_NAME] is Maya Chen, [BUDGET_CONTEXT] is a two-income household, [CURRENCY] is USD, and [SAMPLE_MONTH] is May 2026. Seed exactly 30 May transactions. Income: May 1 Alder & Finch Studio +4200.00 and May 1 Fieldnote Workshop +2600.00, total 6800.00. Housing: May 1 Rowan House Properties 1850.00. Groceries: May 2 Hearth Market 148.62, May 9 Hearth Market 162.45, May 16 Orchard Pantry 171.38, May 23 Hearth Market 160.35, total 642.80. Transport: May 3 CityLine Transit 64.00, May 11 Fable Fuel 72.40, May 24 CityLine Transit 50.00, total 186.40. Dining: May 5 Juniper Coffee 18.75, May 8 Saffron Table 86.00, May 17 Bluebird Diner 64.00, May 27 Juniper Coffee 22.00, May 29 Saffron Table 74.00, total 264.75. Utilities: May 6 Cedar Power 142.60, May 14 Clearwater Utility 88.00, May 20 Northline Internet 65.00, May 22 Alder Mobile 47.00, total 342.60. Health: May 4 Alder Health Plan 300.00, May 10 Elm Pharmacy 45.00, May 18 Harbor Dental 140.00, May 26 Elm Pharmacy 35.00, total 520.00. Leisure: May 7 North Window Cinema 32.00, May 13 Paper Fox Books 46.00, May 21 Riverbend Records 58.00, May 30 North Window Cinema 70.00, total 206.00. Family: May 12 Little Sprout Supplies 84.00, May 19 Community Swim School 72.00, May 28 Little Sprout Supplies 45.00, total 201.00. Expenses total 4213.55. Monthly category targets are Housing 1850, Groceries 750, Transport 300, Dining 250, Utilities 400, Health 550, Leisure 250, Family 450, total 4800.00. Derived headline values are Left in plan 586.45 and After spending 2586.45. Give every row a short specific note such as Weekly produce, Monthly pass, or Checkup and cleaning in src/content.ts. Also seed explicit, fixed 12-row datasets for the previous and next sample months with coherent variations and no runtime randomness; retain the same targets. When variables change, preserve the counts and arithmetic discipline but rewrite all income sources, merchants, notes, category labels where needed, and dates to fit [BUDGET_CONTEXT] and [SAMPLE_MONTH].
   Layout: This section defines data and copy, not a visible standalone panel. Render all visible views from this single canonical state. Dates are fixed sample dates, never generated from Date.now or presented as today.
   Motion: None; derived values update synchronously after every mutation.
2. **Shared app shell and local status** — The forest sidebar contains the original [BRAND] mark, [BRAND], the descriptor Personal budget, and three navigation items: Overview, Transactions, and Goals. The active item uses Forest Soft with Forest text and a 3px Chartreuse leading rule. At the bottom show a small owner monogram derived from [OWNER_NAME], the label Maya's budget for defaults, and the honest status Local only · no bank connected. The top utility bar contains previous and next month chevrons around [SAMPLE_MONTH], a muted Sample data chip, Reset demo data, and the primary Add transaction button. Limit navigation to the explicitly seeded previous, current, and next months and disable arrows at the bounds. Reset opens a confirmation explaining that added entries and target edits in this browser will be replaced. Use the plain title [BRAND] — Personal budget.
   Layout: Use a fixed 232px full-height forest rail and a sticky 64px Panel utility bar with a Rule bottom border. Main content fills the remaining width. Below 900px collapse the rail to a 68px icon rail with accessible tooltips; below 640px replace it with a fixed bottom three-item navigation bar, move the owner monogram into the utility bar, and add enough bottom padding that content is never obscured. At 390px keep Reset as an icon-only labeled button, let the month label wrap nowhere, and make Add transaction a compact primary button.
   Motion: Active navigation and buttons use 120ms color transitions. The mobile navigation does not slide across the screen and never covers dialogs or toasts.
3. **Monthly summary and chart workspace** — Start with the eyebrow MONTHLY PLAN, the H1 May overview, the helper A clear view of where your money went, and a small derived status 88% of plan used. One ruled summary band shows Income 6800.00, Spent 4213.55, Left in plan 586.45, and After spending 2586.45 with concise labels; the third cell gets a Chartreuse wash, not a separate floating card. Below, the left panel titled Where May went contains a large eight-segment donut centered on 4213.55 Total spent and a legend listing every category, amount, and derived percentage. Clicking or keyboard-activating a category legend row navigates to Transactions with that category filter applied. The right panel titled Daily spending shows 31 hand-drawn SVG bars grouped by day, a dashed daily-budget guide at 154.84, the derived Daily average 135.92, and a visible note Sample month · fixed data. Hover or keyboard focus on a bar reveals its day and expense total in a nearby tooltip; days without expenses have zero-height baselines.
   Layout: Keep the H1 row within 84px below the utility bar. The summary band is a single Panel with four equal cells separated by vertical Rule lines. The chart grid is 5fr 7fr with a 24px gap and equal-height panels of approximately 350px. Place the 210px donut left of its legend within the first panel when width permits, otherwise center it above a two-column legend. Daily bars fill a responsive 640×220 viewBox with 16px axes and visible horizontal guides. At 1100px stack the two chart panels; at 640px make summary cells two by two with horizontal and vertical rules. At 390px use a 176px donut, single-column legend rows at least 40px high, and a horizontally responsive chart with no page-level horizontal scrolling.
   Motion: Use the first-render donut and bar reveals from Design. Tooltips appear instantly enough to track focus, with no bouncing digits or looping animation.
4. **Budget watch and recent activity** — The lower-left Budget watch panel surfaces the three categories needing attention: Dining at 264.75 of 250.00 with the explicit text 14.75 over, Housing at 1850.00 of 1850.00 with Target reached, and Health at 520.00 of 550.00 with 30.00 left. Each has a labeled progress bar and a text status, not color alone. View all goals opens ./index.html#/goals. The lower-right Recent activity panel lists the six newest May expenses with merchant, category, fixed sample date, and signed amount; View all opens ./index.html#/transactions. Adding, deleting, or editing a target updates these lists and progress states immediately.
   Layout: Use a balanced 1fr 1fr grid with 24px gaps, 24px Panel padding, compact ruled rows, and no nesting of decorative cards. Stack the panels below 1000px. Keep recent transaction amounts right-aligned in IBM Plex Mono and allow merchant names to truncate with a useful title attribute rather than pushing the layout sideways.
   Motion: Goal bars interpolate only after data changes. Rows use a 120ms background hover and no scroll-jacking or parallax.
5. **Add transaction and shared feedback** — Add transaction opens a dialog titled Add a transaction with the helper This entry stays in this browser. Use an Expense / Income segmented control, required Amount, required Merchant or source, Category select containing the eight default categories for expenses and Income for income, required Date defaulting to May 15, 2026, and an optional Note of up to 120 characters. Default category is Groceries. Validate amount as a positive finite number within the selected currency's precision, merchant or source as 2–60 trimmed characters, and date as a real date in one of the three seeded sample months. Show inline errors and focus the first invalid field. Save transaction adds a stable unique ID, closes the dialog, persists state, updates all views, and shows Transaction added in an aria-live toast. Keep the visitor on the current view. Include a secondary Cancel action and never clear the entered values on validation failure.
   Layout: Use a centered 480px dialog with 24px padding, a visible close button, two-column Amount and Date fields, and full-width Merchant, Category, and Note fields. At 390px use a bottom sheet no taller than 92vh with 20px padding, one-column fields, 44px controls, and a sticky action row. Trap focus and prevent background scroll while open.
   Motion: Dialog and toast follow Design and become immediate under reduced motion. Never animate the saved amount or delay persistence.

### Transactions (`#/transactions`)
1. **Ledger toolbar and result summary** — Show the eyebrow MONEY IN AND OUT, H1 Transactions, and the default helper 30 entries in May 2026. The toolbar contains a search field labeled Search transactions with placeholder Search merchant or note, a Category select with All categories plus the eight categories, an Income / Expense / All types segmented control, and a Sort select with Newest first, Oldest first, Amount: high to low, and Amount: low to high. Show the derived result line Showing 30 of 30 entries and a Clear filters action only when a filter is active. Arriving from an Overview category legend applies that category and focuses the result heading rather than the search field.
   Layout: Keep the heading left-aligned and place Add transaction at the right of the heading row. Put search in a flexible 2fr field and the other controls in compact 1fr columns within one Panel toolbar. Below 1000px wrap controls into two columns; at 390px use one column and make type segments equal width with 44px targets.
   Motion: Filter updates are immediate with a subtle 120ms row crossfade; do not use a loading spinner for local filtering.
2. **Searchable transaction ledger** — Render the filtered canonical rows in a semantic table with Date, Merchant, Category, Note, and Amount columns. Dates use short fixed forms such as May 30, merchants use Inter 500, categories have a small color swatch and text label, notes use Muted, and amounts are right-aligned IBM Plex Mono with explicit plus or minus signs. Income uses Forest and expenses use Ink; never rely on color alone. Each row has an accessible Delete action at the far right. Delete opens a confirmation naming the merchant and amount, then removes the entry, persists, recalculates all views, and announces Transaction deleted. The empty state says No transactions match these filters with the helper Try a different search or clear the filters and a working Clear filters button. An actually empty month says No entries in this month yet and offers Add transaction.
   Layout: Use a full-width Panel with a 44px header, 58px desktop rows, 16px cell padding, and Rule horizontal dividers. Keep Amount 132px wide and Delete 44px. At 760px replace the table with an equivalent semantic list of transaction rows: merchant and amount on the first line, date and category on the second, note on the third, and Delete as a labeled icon button. Never force a wide table or horizontal page scroll at 390px.
   Motion: Deleted rows exit with a brief 120ms fade only when motion is allowed. Confirmation uses the shared dialog behavior and focus return.

### Budget goals (`#/goals`)
1. **Goal overview and category progress** — Show the eyebrow MONTHLY LIMITS, H1 Budget goals, and the helper Set a comfortable limit for each category. A ruled summary line reads 4800.00 planned · 4213.55 spent · 586.45 left for the unchanged default. Render eight category goal panels in this order: Housing, Groceries, Transport, Dining, Utilities, Health, Leisure, Family. Each shows its geometric category glyph, spent and target amounts, a derived percentage, and explicit remaining text: Housing Target reached, Groceries 107.20 left, Transport 113.60 left, Dining 14.75 over, Utilities 57.40 left, Health 30.00 left, Leisure 44.00 left, Family 249.00 left. Bars use the category color, cap the visible fill at 100%, and expose the true percentage through role progressbar and aria values. Dining gets a Danger over-budget label without alarmist copy. Every panel has an Adjust target button.
   Layout: Use a two-column grid with 20px gaps and 22px Panel padding; each goal has a 10px progress track with 24px below the category heading. The percentage sits right-aligned in IBM Plex Mono. Use one column below 760px and retain 44px Adjust target buttons at 390px. Do not turn the summary into extra floating KPI cards.
   Motion: Bars interpolate width over 300ms after data changes and render final widths immediately under reduced motion.
2. **Adjust target dialog** — Adjust target opens a small dialog titled Adjust [category] target with the current spent amount, a required Monthly target currency field, and the helper Changes apply to all three sample months in this browser. Require a finite amount greater than zero and within currency precision. Save target updates the canonical target, persists it, recalculates the plan summary and goal states, and announces [category] target updated. Do not modify transactions or silently erase an over-budget state. Include Cancel and the same focus, Escape, and validation behavior as Add transaction.
   Layout: Use a centered 420px dialog with one full-width labeled currency input, a read-only spent summary, and right-aligned actions. At 390px use the shared bottom-sheet pattern with full-width actions.
   Motion: Use the shared 180ms dialog entrance and immediate validation; no animated counting.

## Assets
- image: Use no bitmap or downloaded imagery. Draw the original [BRAND] ledger-line mark, favicon, category glyphs, owner monogram, donut, daily bars, progress bars, and empty-state accents in SVG or CSS. Record these as original code-drawn assets in ASSETS.md; do not fetch or hotlink any image.
- icon: Install and import lucide-react (ISC) for LayoutDashboard, ReceiptText, Goal, Plus, ChevronLeft, ChevronRight, RotateCcw, Search, X, Trash2, SlidersHorizontal, Check, and AlertCircle. Use 1.75px strokes, 16–20px sizes, inherited colors, and accessible names for icon-only buttons. Do not use bank, merchant, card-network, or payment-service icons.
- font: Self-host Fraunces Variable, Inter Variable, and IBM Plex Mono through @fontsource-variable/fraunces, @fontsource-variable/inter, and @fontsource/ibm-plex-mono. Import only the specified weights, use font-variant-numeric: tabular-nums for financial figures, include no remote font URLs, and document package paths, upstream sources, authors, and OFL licenses in ASSETS.md.

## Don'ts
- Do not add a backend, server routes, accounts, authentication, database, cloud sync, bank linking, analytics, third-party APIs, live exchange rates, or any network submission; all behavior and persistence are local.
- Do not copy an existing budgeting or banking product's layout, copy, charts, illustrations, icons, slogans, or visual identity; the interface and all sample content must remain original.
- Do not use real banks, employers, merchants, account identities, account numbers, receipts, personal financial records, or claims that the sample is connected to a real account.
- Do not give financial advice, shame spending, promise savings or returns, fabricate security claims, or describe localStorage as encrypted, backed up, synced, or available on another device.
- Do not use chart, table, form, or drag-and-drop libraries; use hand-drawn SVG or CSS visuals, semantic tables and lists, native controls, and the specified Motion and Lucide packages only.
- Do not use photographs, generated images, avatars, stock-image services, recognizable brand logos, commercial fonts, CDN scripts, CDN CSS, Google Fonts, Adobe Fonts, or hotlinked assets.
- Do not read the real clock to create today labels or transaction dates. Use fixed dates derived from [SAMPLE_MONTH] and the two adjacent sample months, with all sample content stored explicitly in src/content.ts.
- Do not hard-code default merchants, income sources, notes, owner details, month labels, or currency-specific copy outside src/content.ts, and do not leave household content stale when [BUDGET_CONTEXT] or another variable changes.
- Do not allow inconsistent totals, stale charts, NaN, invalid amounts, duplicate submissions, silent storage failures, or target edits that erase transactions. Derive all views from the canonical state and use integer minor units.
- Do not add landing-page sections, pricing, testimonials, sign-up forms, carousels, decorative gradients, glass effects, unrelated widgets, extra routes, or bare-directory links; keep only Overview, Transactions, and Goals at the specified file and hash URLs.
- Do not ship source maps, src/ in dist/, remote assets, absolute asset paths, or a dist/ bundle over 20 MB; npm run build must produce static files with zero console errors.
- Do not mention VibeFather inside the app except the optional credit link; keep all interface copy, sample data, validation messages, and accessible labels in US English.
- Do not sacrifice visible labels, keyboard operation, focus trapping and return, semantic tables, 44px mobile targets, readable contrast, text status in addition to color, reduced-motion support, or the 1440×900 and 390×844 layouts.

---
— Prompt by VibeFather · https://vibefather.ai/t/personal-budget-dashboard · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.