Lumen
Personal finance dashboard. A calm, real-time money dashboard that turns scattered accounts into one clear picture — with the important things first and everything else on demand.
- Type
- Web application
- Status
- Concept study
- Stack
- Next.js · TypeScript · PostgreSQL · Data visualization
01The brief
The brief
Finance tools tend to bury people in numbers. Lumen explores how a money dashboard could feel calm instead of overwhelming: one honest overview, clear trends and the detail only when you ask for it.
02Our approach
Our approach
We started from the questions people actually ask — “Am I on track this month?”, “Where did it go?” — and designed the information hierarchy around those answers instead of around raw data.
The interface is built as a server-rendered Next.js app with streamed widgets, so the overview appears instantly while heavier insights load in the background. Charts are custom, accessible SVG with keyboard and screen-reader support.
03Key features
What makes it work.
- 01
Unified overview
Every account in one balance, with a clear month-to-date view.
- 02
Readable charts
Custom SVG charts with keyboard focus, tooltips and text alternatives.
- 03
Goals & budgets
Progress states that encourage rather than scold.
- 04
Command menu
A keyboard-first way to jump to any account, category or setting.
04Design notes
Design notes
- Muted surfaces with a single teal-to-blue data accent keep attention on trends, not chrome.
- Tabular numerals and generous line height make dense numbers easy to scan.
Next concept
Pace
Training companion
Your project
Want something like this?
Tell us what you’re building. We’ll help you shape it, design it and bring it to life.