€48,203.11
on every screen.
Viola UI is a Figma UI kit built on one fictional portfolio. Its value, €48,203.11, is the same on every screen that shows it, because every figure is worked out from the same holdings, cash and transactions. This page shows how.
The idea in one line
One sum behind every screen
Every screen that shows the portfolio value repeats this sum. None of them has the total typed in by hand, so none of them can drift away from the others.
Holdings
VWCE, CSPX, ASML and MSFT at today’s prices
Cash
EUR, settled
Portfolio value
The figure every screen shows
The example
€48,203.11, position by position
Four holdings and the cash beside them. Each block is its share of the portfolio, so the widths add up to the total.
- VWCE€21,928.0545.5%Vanguard FTSE All-World
- CSPX€12,410.3025.7%iShares Core S&P 500
- ASML€5,210.4410.8%
- MSFT€4,782.169.9%
- Cash€3,872.168.1%
When you change a holding
Buy 10 more VWCE.
The total holds.
- 1Edit the shares or price on the holding, never the total.
- 2Let it flow into holdings, weights and the asset-class split.
- 3Take the cost out of cash, and check the statement still closes.
Cash
V-2841-07 · EUR
€3,872.16
€2,207.16
−€1,665.00Holdings
VWCE, CSPX, ASML, MSFT
€44,330.95
€45,995.95
+€1,665.00Portfolio value
Cash + holdings, before and after
Before fees, and at the same price. VWCE goes from €21,928.05 to €23,593.05.
Why it matters
Numbers people can click through
- Demos that survive a click
- Go from the dashboard to the fund page and VWCE is still €21,928.05. Nobody in the room spots a contradiction.
- Prototypes you can test
- When balances add up, people react to the flow, not to broken maths.
- Handoff without guesswork
- Developers can check their calculations against the design. If their total isn’t €48,203.11, something is off.
Every number,
checked for you