Financial Dashboard
Also called: Finance dashboard, P&L dashboard, CFO console, FP&A dashboard
A P&L statement, a cash-flow waterfall and right-aligned tabular figures on serious navy — red and green mean good and bad, nothing else.
Design keywords
Say these words to ask for this style.
The financial dashboard reads like an annual report that updates itself. A deep navy sidebar frames a pale ledger-ruled canvas; the centrepiece is a real profit-and-loss statement with indented line items, totals on a single rule and net income on a double rule. Every figure is set in tabular monospace, right-aligned, with negatives in parentheses. Colour is semantic only: green for favourable, red for unfavourable, muted gold for a single highlight. Corners are nearly square and shadows almost absent, because the numbers must look audited, not decorated.
Best for
- Finance, FP&A and accounting tools
- Banking, treasury and investor portals
- SME bookkeeping and invoicing apps
- Board and monthly-close reporting
Avoid for
- Consumer lifestyle or social apps
- Playful onboarding-heavy products
- Marketing analytics where trends matter more than exact figures
✓ Do
- Set every number in tabular figures (font-variant-numeric: tabular-nums) and right-align numeric columns
- Use green/red for favourable/unfavourable variance — an expense going up is red
- Show totals on a 1px rule and the bottom line on a 3px double rule
✕ Don't
- Don’t use colour for decoration — no gradients, no rainbow charts
- Don’t round corners beyond 6px or float cards on heavy shadows
- Don’t mix currency formats or drop the sign on deltas
Not to be confused with
On mobile
Lead with a navy balance card, then statement-style lists with right-aligned mono amounts (green inflow, red outflow in parentheses). Replace the waterfall with a stacked in/out bar; keep the plain bottom tab bar with a navy top indicator.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.