Aura Finance

Aura Finance was building a next-generation portfolio management platform for retail investors who wanted institutional-grade analytics without the complexity. Their existing MVP had been built by a backend-heavy team — the data pipeline was excellent, but the interface was a dense spreadsheet that scared away every user who wasn't already a quant.

They needed a frontend engineer who could translate complex financial data into something that felt intuitive, trustworthy, and even enjoyable to use. The constraint: the design system had to scale from a single dashboard to an eventual suite of 12+ tools.

I started by auditing their data model. Understanding what the API returned — and what it could return — shaped the component architecture from day one. Rather than designing screens, I designed a token system: spacing, color, typography, elevation, and motion tokens that could compose into any financial interface.

The color system was the hardest problem. Financial data needs to communicate gain/loss, risk levels, time periods, and asset classes simultaneously. I built a semantic color layer on top of the base palette — `--gain`, `--loss`, `--neutral`, `--caution` — that adapted to both light and dark modes without losing meaning.

The component library uses a strict atomic design methodology. Every piece — from a single price ticker to a full portfolio allocation chart — is composed from primitives. Buttons, inputs, badges, and tooltips form the atom layer. Cards, data rows, and chart containers form molecules. Full dashboard panels and settings pages are organisms.

Each component was built with React, TypeScript strict mode, and CVA for variant management. Storybook documents every state, and Chromatic runs visual regression tests on every PR.

Off-the-shelf chart libraries couldn't meet the design requirements. I built a custom D3.js visualization layer that renders portfolio performance, asset allocation, risk metrics, and historical trends. Every chart supports real-time WebSocket updates, responsive resizing, and animated transitions between time periods.

The portfolio donut chart was particularly challenging — it needed to show allocation percentages, absolute values, and gain/loss indicators simultaneously while remaining readable at mobile sizes. The solution was a layered tooltip system that reveals detail progressively: hover for percentages, click for full breakdown.

The design system now powers all of Aura's products. Their Series A deck featured the dashboard prominently, and investors specifically called out the quality of the user experience. The component library has been adopted by their mobile team as the source of truth for React Native components. User session duration increased by 3.2x after the redesign.