Personal Spending Tracker — 25 App Screens
Most UI kits give you screens and leave you to invent the product behind them. This one ships the other half: the tokens the screens are drawn from, and the Product Requirements Document and Architecture Document they were drawn against — so what you build has a data model, a sync story and a set of stated non-goals before the first line of Dart.
What you get
- 15 design tokens as
tokens.json,tokens.cssandtokens.dart— generated from the artboards, so they are the design rather than a description of it - 3 themes — Pocket, Ledger and Vault — the same fifteen names redefined three times; a fourth theme is one block of declarations
- 7-page design system guide, PDF and Markdown: what each token is for, how to wire it up in CSS and in Flutter, and the rules that keep a system from rotting
- 25 screens on one HTML canvas — onboarding, Excel import, dashboard, add transaction, transactions, books and book detail, accounts, credit-card dues, reports, growth, budgets and goals, members and household, recurring, settings, paywall, sync status, and a four-screen receipt-splitting flow
- Product Requirements Document — personas, competitive analysis, functional requirements, free-versus-paid split, screen map, success metrics, roadmap
- Architecture Document — Flutter with Drift on the client, Next.js and MySQL on the server, offline-first with a sync outbox, the full ERD, a REST API reference and the folder structures for both surfaces
- Both documents as Markdown, Word and browsable HTML
- Prompt Library — 14 pages, 43 prompts: empty repo to running Flutter app in the order that de-risks the build, then extending and re-pointing it
- Opens offline with nothing installed — React and all six typefaces (Plus Jakarta Sans, Hanken Grotesk, Space Grotesk, Newsreader, JetBrains Mono, Space Mono) are bundled in
vendor/, so there is not one network call
Works with
- CSS custom properties, or Flutter via a
ThemeExtension— the guide shows both - Any modern browser — the screens and both documents are HTML pages you open, not files you import
- Claude Code, for the prompt library; the tokens, screens and specs need nothing
Not included
- A Figma library
- Component code for a framework — the prompt library covers generating it from the tokens and screens
One licence, personal and client work, forever. No resale.
Fifteen tokens carry all twenty-five screens across all three themes. Eleven colours, two radii, two typefaces. That smallness is the design decision the rest of the system rests on — a set you can hold in your head is a set people actually use, and one that fits on a page is one you can audit.
Two of the colours are semantic rather than decorative. income and expense are the reason this is a finance system rather than a generic one, and the guide is blunt about the rule that protects them: a number is green because it is money in, or it is not green. The first time income is used for a success toast, it stops meaning anything.
The screens come from a real specification rather than a mood board, and it shows in the places design systems usually go quiet. A credit card carries an amount, a paid figure and a due figure per item, not a single balance, because the spreadsheet this was modelled on tracked it that way. Spending is tagged to household members. The dashboard's Growth figure is the same start-balance, end-balance, debit, credit and growth calculation a six-year tracking workbook computed by hand.
It tracks income as well as spending — the ledger takes both, and growth is the difference — but the daily job it is designed around is capture: log what went out, in under twenty seconds, before you forget.
The receipt flow is worth calling out. Four screens cover entering a shopping receipt, adding line items, splitting them across books and members, and cross-checking the total against the printed one — including the mismatch state, which most kits skip and every real app needs.
What is the placeholder name?
The kit ships under a placeholder rather than a brand, so nothing has to be undone. Search and replace it with your own — it appears in the page title, the wordmark on screen 01, the paywall copy and both documents.
Is this Figma?
No, and there is no .fig in the download. The screens are a single HTML canvas you open in a browser at full fidelity, and the tokens are JSON, CSS and Dart. Everything is inspectable in dev tools or a text editor.
Do I have to build it in Flutter?
No. The Architecture Document commits to Flutter and tokens.dart follows it, but tokens.json and tokens.css are framework-agnostic and so are the screens and the PRD.
Are the specs finished?
They are marked v1.0 Draft, awaiting sign-off, and the Architecture Document's last section lists the technical decisions still open. That is what a real spec looks like at this stage, and the prompt library has a prompt for working through those decisions deliberately rather than inheriting them.
Reviews
Nothing here yet.
Questions & answers
No questions yet. If something about this product isn't clear, ask — we answer publicly so the next person finds it too.