03
Lumina App Case Study
- Role Lead Web Designer
- Tools VS Code · Copilot · Claude Sonnet 4.6
- Live site marvelous-palmier-de7644.netlify.app
The Concept
Lumina App was conceptualized to bridge the gap between traditional credit infrastructure and the emerging Web3 financial ecosystem. The primary goal was to design a mobile-first banking interface that makes decentralized finance, including yield vaults, on-chain rewards, and smart card management, feel as intuitive and trustworthy as a premium neobank. By pairing a clean white canvas with gold-accented gradients and precise micro-interactions, every touchpoint was engineered to communicate security, sophistication, and speed for a digitally-native audience.
From initial wireframes to a fully interactive prototype, the process centered on building a scalable, component-driven system. The experience is brought to life through a live-accruing vault balance, a multi-card carousel with per-card state management, a dynamic promo carousel with infinite-loop logic, and seamless tab navigation. Every detail was deliberately structured to prove that institutional-grade DeFi tooling can be wrapped in a frictionless consumer experience, demonstrating that a single-file prototype can match the fidelity of a production app.
Tactile Rewards Conversion
Instantly exchange points for card balance with tactile feedback and real-time previews.
Fluid Card Management
Seamlessly swipe between cards. Quick actions ensure total control over your physical and virtual assets.
Component-Driven Design
Every element of the Lumina interface is governed by a single token system, utilizing a cohesive palette, a two-family typography scale, and a component library that stays consistent across every screen and state.
A clean white canvas with Lumina Gold accents directs attention toward key actions and financial data, while semantic greens confirm positive values.
Inter (Display & UI) and Onest (Body & Copy) form a two-family scale from Regular (400) to Extra Bold (800), antialiased at a 16px base.
A strict 8-point grid (8 · 16 · 24 · 32px) delivers perfect alignment and consistent rhythm across every screen of the mobile interface.
#16A34A
#C8970A
Cards
Pills