{{ r.text }}
Money screens need to read the same everywhere.
GoalTeller's web app is where investors check their net worth, holdings, returns and SIPs. When ₹5,42,000 shows as "5.42L" on one screen and "542000" on another, people stop trusting the numbers. The system had to cover the screens where those numbers live.
No design language yet. Every decision was open.
When I joined, there was no system to inherit. Before designing screens, I listed the questions every screen would raise, so each one got answered once instead of per page.
Decide once, then reuse everywhere.
Tokens before components.
Every component draws from four sets of values. Click a colour to copy it; each one shows its contrast against white, which is how I caught the problem with the brand blue and the semantic colours below.
In a finance product, numbers are components too.
I wrote formatting rules for currency, returns, rates and table figures, using the Indian numbering system. Try a value.
12 component groups, each with a job.
Every group documents its states and when to use it. These specimens are live, so hover and click them.
The holdings table, specified line by line.
The table is the densest screen in the product. Hover a row to see its menu, or pick a rule to highlight where it applies.