01 / The Context
This project was an MFD investment platform I built at Bancwise Technologies — a multi-tenant dashboard for Mutual Fund Distributors to manage investor portfolios, process SIP transactions, and track brokerage.
The users are MFDs — financial professionals who spend 6-8 hours a day inside the dashboard. Long sessions in a bright white UI cause eye fatigue. Dark mode was not optional — it was the baseline design decision from day one.
What I did not expect was how much the choice of accent colours — or the deliberate removal of them — would affect how the interface felt to use.
02 / The Colour Problem in Fintech UI
Fintech dashboards have a colour language problem. Green means profit. Red means loss. Blue is primary action. Orange is warning. These conventions are so deeply embedded that users read colour before they read text.
On a dark background this creates a specific failure mode: when everything that matters is coloured, nothing stands out. A green portfolio gain, a blue SIP button, an orange pending transaction, a red failed payment — all competing for attention simultaneously. The eye has nowhere to rest and no clear hierarchy to follow.
When everything is an accent colour, nothing is accented. Colour loses its meaning when it is used for everything.
The solution I landed on was inverting the default assumption: use colour only for financial state (gain / loss / pending / failed) where the semantic meaning is non-negotiable — and use pure white for everything else that needs emphasis.
03 / Pure White as the Primary Accent
On a dark background — say #0F0F0F or #111827 — pure white (#FFFFFF) has the highest possible contrast ratio: 21:1. No colour achieves this. Not blue, not green, not gold.
This means that any element you render in pure white on a dark background will be seen first — before any coloured element — because the human eye responds to contrast before it processes hue.
Visual comparison — dark background
Coloured accent system
Hard to know where to look first
Pure white hierarchy
Eye goes to white first, then gains/losses
The right column works because it establishes a clear three-level hierarchy: white for the most important number, semantic colour (green/orange) only for financial state, and grey for labels and secondary values. The eye follows the hierarchy automatically — white first, then colour, then grey.
04 / The Three-Level Hierarchy System
The design system I settled on for the dashboard uses exactly three levels of visual weight — nothing more.
The rule is strict: colour is only allowed at Level 2, and only for financial state. Everything else is white, grey, or background. If you find yourself wanting to use blue for a "primary button" on a dark background — make it white instead. It will be more visible, not less.
05 / Typography in Dark Mode Fintech
Numbers are the primary content in a financial dashboard. The typography decisions for numbers matter more than for any other content type.
Use tabular figures for all financial numbers
Tabular figures (font-variant-numeric: tabular-nums) ensure all digits have equal width. This means columns of numbers align vertically — ₹1,234 and ₹98,765 line up on the decimal point. Without this, number columns look ragged and are harder to compare at a glance.
Never use font weights below 500 for numbers on dark
Light font weights (300, 400) render poorly on dark backgrounds — thin strokes get lost in the contrast. Use 500 minimum for secondary numbers, 600-700 for primary values. The visual weight of the number should match its importance in the hierarchy.
Size the primary number aggressively
The single most important number on any card — total portfolio value, today's P&L — should be significantly larger than everything else on that card. 2.5-3x the size of the label text. This is not decoration; it is information architecture. The user should be able to scan the primary number from across the screen.
06 / What Did Not Work
Two design patterns I tried and removed:
Glassmorphism for Cards
Glass cards — backdrop-filter: blur() with semi-transparent backgrounds — look impressive in design mockups. In a real dashboard with dense data, they create visual noise. The blurred background competes with the card content. Labels become harder to read. I removed glassmorphism entirely after the first user testing session. Solid surface colours with subtle borders work better for content-heavy interfaces.
Coloured Card Borders for Status
My first attempt at showing transaction status used coloured left borders — green border for completed, orange for pending, red for failed. The problem: users missed the border entirely and read the text for status. The border is a peripheral visual element; users focus on the card content centre. Status badges inside the card — text with background colour — are seen 3-4x more reliably than border colours.
07 / The Single Rule
If there is one rule to take from this post it is this:
In dark mode fintech UI, use colour to mean something specific — not to decorate. Reserve white for the single most important element per section. Use grey for everything else. Colour only for state.
This rule makes every design decision easier. When you find yourself asking "should this be blue or green?" — the answer is probably neither. Make it white if it is important, grey if it is not, and coloured only if it communicates gain, loss, pending, or failed.
Next Article
MongoDB Multi-Tenancy in Next.js →