description
Design System
Web App
iOS Native
ROLE
Sole designer
TIMEFRAME
July 2025 to present (ongoing)
TOOLS
Figma, Figma Variables, Figma Site, iOS 26, Material 3
READING TIME
6-8 mins
CONTEXT
A finance app with a vision but no visual language.
Gilded helps people visualize their financial future through projections and life-planning simulations. The founder, a finance influencer, had a clear vision and audience, but the product didn't yet reflect it. The brand existed only as a logo, a colour palette, and a vibe, none of it represented in the actual product
What existed
A partial web app, with UI screens designed by a contracted agency using local styles and a visual identity that didn't match the brand. New features had been built entirely by engineers with no design input. The marketing site was engineer-built. iOS wasn't in the picture at all.
My role
As the sole designer, embedded with a small team of highly technical engineers building sophisticated financial models, I owned everything, from the visual system, the product experience, the brand expression, and the move to native iOS. Working at 10 hours a week, with a weekly sync with the CTO.
THE Problem
The product asked users to think like accountants.
Two core experience problems were holding the product back. The onboarding flow created too much friction: it asked users to enter income, expenses, assets, and liabilities up front, with a mental model and copy that were technical and hard to parse for someone who just wanted to understand their financial future.
Navigation was the second problem. To adjust the settings or data behind a financial plan, users had to dig inside the plan itself, where everything was crammed together. There was no way to find plan-specific settings easily, and no way to compare two plans on the same graph.
Visual system
From a logo to a full design language
Starting from a logo and palette, I built the complete visual system that now defines Gilded across every surface. A token structure built with Figma variables powers theming, including the dark mode recently launched in the web app and built into the iOS app from the start. The brand identity is now consistent across web, iOS, and marketing for the first time.
Variables defining the system
Custom icons
Web components
Modes via token structure
Before: agency screens with local styles and off-brand typography and colour.
After: a unified visual language built on Gilded's brand, with a token structure powering light and dark modes.