Personal Finance · Web App
Lumen — Money, Illuminated
Jan 2026 – Apr 2026
Product Designer · Solo build
(UX/UI, Brand, Front-end collaboration with AI)
Desktop Web App · Dark-first
Vanilla JS · localStorage
Design a calm, desktop-first money dashboard that holds any number of currencies and splits stocks, savings, debt, and subscriptions into dedicated pages — each with the depth those categories deserve. Update once in context, and the dashboard shows everything at a glance. Visual language should feel like a quiet observatory: dim, precise, a single warm glow per surface.
Existing budgeting tools either assume one currency, or drop you into a spreadsheet the moment you want to track a goal. None felt calm enough to open daily.
Each currency lived in a different app — euro in one, won in another, dollar somewhere else. No reconciled view of "what I actually have."
Editing a transaction never reflected in the goal it belonged to — leaving savings totals stale.
Bright charts, coloured category tags, ads, banking CTAs. Opening the app felt like work.
Subscriptions in Notion, investments in broker app, budget in Google Sheets. Nothing spoke to each other.
I started by mapping my own month — every transaction, every currency transfer, every time I opened a budgeting app and closed it again without doing anything. A handful of friends living across currencies described the same friction.
→ These insights became the four design principles: unify, link, quiet, one place.
Instead of wireframing, I went straight into a tight design system — tokens, typography, components. Every card, pill, and button in Lumen traces back to these.
HALO is the brand symbol: a planet ring with a single satellite — a calm object catching light. Familjen Grotesk carries the wordmark, Outfit drives UI, and DM Mono holds every number.
Name plus language and theme — pre-filled from the browser. Tweak or skip; the app adapts either way.
Suggested from your locale — confirm or add more. Each currency keeps its own column throughout the app, no forced conversion.
Smart icons matched to bank names. Each account picks up a glow color; opening balances optional.
Toggle the features you care about — savings, debt, investments, subscriptions. The sidebar adapts; the rest stays out of the way.
Four condensed screens with smart defaults — locale-aware language, region-suggested currencies, name-matched bank icons. Every step is individually skippable; the bottom-right button morphs from Skip to Continue → the moment a step has enough info. No sign-in, no sync — preferences land in localStorage and the dashboard is ready to fill.
Income, expenses, savings, debt, investments and subscriptions all live in the same dark surface. Switch between sections from a single sidebar — no separate apps, no spreadsheets, no syncing services. The dashboard rolls everything up; each section drills into the detail you need.
Three sentences at the top — budget status, spending trend, income trend — turn the dashboard from a spreadsheet into a quick morning read. The strip recomputes itself the moment a transaction lands; no interpretation needed.
Each active currency gets its own card with its own glow color and native format. Click a currency to drill into the bank-level cards for that currency; click a bank to focus the entire dashboard on that account. The chart label and detail cards follow along instantly. No FX conversion ever — you see your money in the currency it actually lives in.
When type = Save in the Add Transaction modal, a goal picker appears. Pick a saving goal and the transaction not only logs the deposit, but also pushes the amount into the goal's history and bumps the progress bar. Editing or deleting that transaction reverses both sides via a linked id (savTxId). The goal never drifts from reality.
Settings shows a pill per currency. Currencies with actual data (savings, debts, investments, subscriptions, or banks with non-zero balance / transactions) are locked — you can't accidentally turn them off and orphan your records. Conversely, importing a backup or switching from another build with foreign-currency data auto-activates those currencies on next load with a toast. The state is always consistent.
The flow chart shows the last six months at a glance — income bars, expense bars and a NET line connecting the dots. The current month is brighter; clicking any past bar jumps the dashboard to that month's view. Behind it, Lumen snapshots income, expense, saved, net, category totals and bank balances at every month-end, so a year of financial history stays scrollable.
Apps replaced
Notion + Sheets + broker app
Time to log a transaction
single modal, keyboard-first
Goal / transaction sync
every edit propagates
Any currency, unified
no forced conversion