ZAR Wallet Dashboard - Exact Match
A high-contrast fintech mobile dashboard featuring a neo-brutalist aesthetic with a split-theme layout. It transitions from a clean light mode hero section to a dark mode activity sheet. Key elements include bold extended typography (EK Modena), a palette of gold (#C4AD54) and vibrant pink (#FF6ECE), and a tactile 3D concrete dollar illustration. Ideal for crypto wallets, neobanks, and lifestyle financial apps looking for a premium, unconventional brand identity.
Summary
A sophisticated mobile wallet UI (375px width) that uses a dual-tone layout. The top half is light grey (#F9F9F9) featuring a central 3D asset and massive display typography, while the bottom half is a dark charcoal (#1C1C1C) slide-up style activity list with rounded corners and high-contrast action buttons.
Style
The style is defined by its typography pairing: a heavy extended sans-serif (EK Modena HeavyExtended) for headings and a clean geometric sans (Baikal) for body text. The color scheme uses '#C4AD54' (Muted Gold) and '#FF6ECE' (Vivid Pink) against a background of '#F9F9F9' and '#1C1C1C'. Animations are snappy with subtle micro-interactions like scale-95 on touch.
Layout & Structure
A vertical stack starting with a minimalist header, followed by a hero area for visuals and balance, a twin action-button row, a slide-up activity panel, and a fixed bottom navigation bar.
Header
Hero Section
Action Row
Activity Section
Bottom Navigation
Components
Ghost Transaction Item
A locked or pending state for list items that feels interactive but distinct.
Balance Typography
Specific styling for the financial balance to ensure readability and impact.
Special Notes
Maintain strict adherence to the font pairings—the heavy extended font is critical for the 'neo-brutalist' feel. Ensure the 'Activity' section has a large padding-bottom (pb-24) so content isn't obscured by the fixed navigation bar. Do not use standard system fonts; use the specified geometric and display faces.