Fintech dashboard design: numbers first, decoration last
A finance dashboard is judged on whether its numbers can be trusted. How to lay out KPIs, tables and colour so figures read fast and never look made up.
People open a finance dashboard to answer one question: is my money where I think it is. Every design choice either helps them answer it faster or gets in the way. That makes fintech the one kind of dashboard where restraint is the style.
The top row answers the first question
A KPI row of three to five figures: balance, change today, change over a period, and whatever this product is uniquely about. Each tile carries a label, the value, the change with its sign, and when it was measured. A figure with no timestamp is the fastest way to lose trust, because the user cannot tell a stale number from a live one.
Numbers need tabular figures
Proportional digits make a column of prices wobble: a 1 is narrower than an 8, so decimals do not line up and a reader has to work to compare them. Use a monospace face for figures, or turn on tabular numbers in your sans. The detail is small and it is the difference between a table that reads and one that is read. Tabular numbers in CSS covers the one line that fixes it.
Colour means movement, nothing else
- Up and down get their own colours, and those colours appear nowhere else on the page.
- Every coloured figure also carries a sign or an arrow, so it reads without colour.
- The brand accent is for the one action, not for numbers. A lime figure next to a lime button makes the user wonder whether the number is a link.
Tables that stay readable
Right-align numbers, left-align names, and keep units in the header rather than on every cell. Use row separators or zebra stripes, not both. On a phone, a finance table rarely survives as a table: turn each row into a compact card with the name, the value and the change, and keep the full table for wider screens.
Charts: one idea each
A line chart for value over time, a bar for comparison between holdings. Skip the 3D, skip the donut with twelve slices. Label the last point directly on the line, so the user does not travel to a legend to learn what they are looking at.
Where the premium feel comes from
Dark, calm surfaces, panels that do not lift on hover, one accent, and numbers that are set with care. Glass panels can work here if the background is quiet, as in glassmorphism that looks expensive, but the figures always sit on an opaque enough surface to pass contrast.
This is the look Glass Instrument UI gives Claude: written from traders-zone.in, with glass panels that do not lift, mono tabular figures, up and down in their own colours, and an as-of time on every number.
Questions
What font should numbers use on a finance dashboard?
One with tabular figures, so every digit is the same width and columns line up. A monospace face does this by default; many sans faces do it with font-variant-numeric: tabular-nums.
Should gains be green and losses red?
It is the convention most users expect, but colour alone fails colour-blind users. Pair it with a sign or an arrow, and use those colours only for movement, never for decoration.
How many KPIs should sit at the top?
As many as the user checks every visit, which is usually three to five. Anything else belongs further down or behind a click.