Mobile reference
How the visual language translates into mobile product screens.
These mockups are inspired by the uploaded references without tracing them literally. The goal is to show how layout density, glow hierarchy, and glass surfaces should behave when the system is applied to a VibeIRL wallet-style interface.
Example screens
4 core flows
Layout focus
Glow hierarchy
Content type
Placeholder demo data
Screen set
Reference mockups for product styling
Keep the strongest glow around hero actions, top balance surfaces, and selected tabs. Most list rows should remain calmer so the interface keeps its visual hierarchy.
Wallet
Portfolio dashboard
Total balance
$57,840.00
Momentum
Assets
Token list
Bitcoin
$15,200.50
Ethereum
$24,552.80
Solana
$16,108.70
Swap
Review screen
From
To
Profile
Activity + settings
Sam McNeil
Crypto runner
Sent QXL
$25.00
Received ETH
$1,240.00
Staked QXL
$5,000.00
Mobile heuristics
Consistency rules across the screens
The examples above share the same token language as the desktop guide. This makes product styling easier to scale across platforms.
Top-weighted glow
Hero balance cards and primary actions carry the brightest perimeter bloom.
Calm list surfaces
Token rows and activity cells stay mostly neutral so charts and CTAs can stand out.
Unified shell
Shared radii, border recipes, and tab styling make the system feel intentional on small screens.