SoFi
A design blueprint Spectr produced from SoFi. Scroll to look closer.
A dark-native all-in-one money platform where the gradient net-worth hero leads
A faithful SoFi-inspired design system built around the member home: a blue-to-navy gradient hero carrying net worth, a consolidated account and product tile grid, and cross-sell cards for banking, investing, and borrowing. Electric blue on deep navy is a dark-native brand and performance is color-coded gain-green, loss-coral, rewards-gold.
Clone the premium one-stop fintech where banking, investing, and loans live on one screen. This pack ships the exact SoFi Blue and navy palette, the signature member-hero gradient, the account tile grid, pill buttons, and cross-sell product cards with paste-ready SwiftUI, Expo, and Compose components.
Screens documented
- Member home with the gradient net-worth hero
- Account and product tile grid
- Invest dashboard with performance chips
- Cross-sell product cards carousel
- Transfer and invest amount entry
- Recent activity and rewards
What a Spectr spec includes
Screen-by-screen documentation, complete design system (color, typography, spacing), navigation map, component library, implementation notes, and a Claude Code prompt — everything an AI coding agent needs to build.
Turnaround
Most mobile apps produce a full spec in under 90 seconds from a single screen recording. Upload your own MP4 and watch the blueprint generate live.
Why not a design file?
Design files don't compile. A Spectr spec is optimized for AI coding agents like Claude Code — it produces working code on the first prompt, not layered artboards.
Target stack
Every spec targets Expo SDK 54 and React Native on an iPhone 15 baseline. The SoFi blueprint translates cleanly into an Expo Router app structure.