03

Lumina App Case Study

UI Design Claude Code Design System Web3 2026
Lumina App — mobile banking UI overview
Overview

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.

3 Days delivery
5 Core tab flows
80+ Components
-38% Avg. task time
Interaction

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.

Design System

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.

01 · Color Palette (Premium White & Gold)

A clean white canvas with Lumina Gold accents directs attention toward key actions and financial data, while semantic greens confirm positive values.

Surface #FFFFFF
Background #F9F9FB
Elevated #F3F4F6
Lumina Gold #C8970A → #F5D06A
Headlines #111111
Yield #16A34A
02 · Typography

Inter (Display & UI) and Onest (Body & Copy) form a two-family scale from Regular (400) to Extra Bold (800), antialiased at a 16px base.

Hero Lumina 56px · 800
Heading Your Balance 32px · 700 · 1.08lh
Body Yield generated automatically. 16px · 400 · 1.65lh
Label Card Balance 12px · 400
03 · Spatial System

A strict 8-point grid (8 · 16 · 24 · 32px) delivers perfect alignment and consistent rhythm across every screen of the mobile interface.

8px
16px
24px
32px
48px
Yield
#16A34A
Gold
#C8970A
12px
Cards

Pills
Base size
16px optimized · antialiased