Personal Finance UI Kit
Last Updated on July 1, 2026 by Editorial Team
A personal finance app concept created by Tung Vo Chi. The freebie includes 60+ mobile screens designed for iPhone 6/7, iPhone X and Samsung Galaxy S8 layouts.
Hope you enjoy this awesome Adobe XD freebie!
Look closely at the arrangement of phones in the preview and you can see how deliberately this personal finance UI kit builds a full user journey rather than a handful of disconnected screens.
There is an onboarding flow with contact scanning and illustrated characters, a create account screen with social login, dashboard views showing salary accounts and card balances, a map screen for locating bank branches, and a chat-style contacts list for splitting expenses with friends.
That range makes it read less like a UI kit and more like a working prototype of a fintech app, which is exactly what makes it useful as a base for real projects.
The visual language leans on a deep navy background paired with a punchy coral-to-gold gradient, plus small flat illustrations of people at desks, wallets, and piggy banks that soften what could otherwise feel like a very corporate subject.
White text and thin iconography sit cleanly against the dark surface, and the occasional bright accent dot or badge draws the eye to notifications, statuses, or calls to action.
It is a confident, modern take on banking software, closer to a mobile wallet or budgeting app than a traditional bank portal, and it should feel current for products aimed at a younger, mobile-first audience.
Where This Kit Works Best
This screen set is a strong starting point for anyone prototyping a budgeting app, digital wallet, peer-to-peer payment tool, or expense-splitting app.
The onboarding and account creation screens make it handy for pitching a fintech concept to stakeholders or clients before committing to custom design work.
Because the screens already cover login, dashboard, transaction history, and map-based branch lookup, it also works well as a teaching example for students studying mobile app design patterns in the finance space.
- Budgeting and expense-tracking app concepts
- Digital wallet or peer-to-peer payment prototypes
- Bank or credit union mobile app redesign pitches
- Design portfolio pieces demonstrating fintech UX flows
If you plan to adapt these screens for your own product, start by swapping the illustrations and iconography for assets that match your brand’s tone, since the current characters and color choices carry a specific personality that may not suit every audience.
The dark navy base is flexible enough to keep as is, but you can just as easily invert the palette to a lighter theme if your brand leans toward a more minimal, airy feel.
Pay attention to the typography hierarchy already established between headings, balances, and body copy, and try to preserve that contrast when you drop in your own content so the screens stay easy to scan.
Card and balance components, like the ones showing salary accounts and Visa details, are good candidates to turn into reusable components if your tool supports them, since variations of that same card pattern repeat across several screens.
For pairing, this kit sits comfortably alongside icon sets built for finance and banking, illustration packs featuring flat character art, and dashboard or chart components if you need to extend the reporting side of the app beyond what is shown here.
A complementary set of payment icons, currency symbols, or a signature font for large balance numbers can help extend the system into areas the kit does not directly cover, like receipts, settings, or detailed transaction breakdowns.
