A Financial GPS for First-Generation Wealth Builders
OurWorth is a concept fintech platform designed to guide founders who have ambition, momentum, and real potential, but not the inherited access most financial systems assume.
The goal: a product language that felt credible without intimidation, editorial without feeling precious, and structured enough to turn uncertainty into visible forward motion.
The Process
I started with narrative, not pixels. Before any token was named, I mapped a six-stage emotional arc called the Rising Protagonist: from cautious hope at onboarding, through clarity, recognition, and momentum, to the revelation of funding access and the belonging of community. Every design decision that followed had to serve that arc.
Every design decision in OurWorth follows a single emotional arc: from cautious hope at onboarding to belonging in the community. This wasn't a mood board exercise. It was a functional brief. At Onboarding, the visual language is warm and not intimidating. By Dashboard, it shifts to calm, structured confidence. Insights use a human, supportive tone. Roadmap introduces momentum and aspiration. Funding makes access visible and personal. Community closes with warmth and shared proof of possibility. Stages 1-3 use Champagne as their accent. Stages 4-6 shift to Signal Violet, marking the shift from stability to opportunity.
Color wasn't chosen for looks alone. It was chosen to communicate. Obsidian grounds the interface with authority and calm. Champagne Rose marks progress: milestones, improving scores, unlocked goals. Signal Violet identifies AI and funding discovery moments. Together they feel elevated but approachable, which is exactly what a first-generation founder needs from a financial product.
Two typefaces, one voice. Cormorant Garamond has the weight you'd find in a financial advisor's letterhead, not a startup's landing page. Inter handles the rest: clear, calm, precise. Headlines feel like a mentor. Body copy works like a tool. When they appear together, the product feels both credible and human, which is what OurWorth needed.
The design system uses three token tiers, exported as W3C DTCG JSON for Tokens Studio. Primitive tokens hold raw values (hex codes, pixel sizes, font names). Semantic tokens reference primitives by role, so color.brand.primary always means the right thing no matter what's underneath. Component tokens scope to specific UI elements. Change a primitive and everything updates. The system scales across screens, states, and future phases without drift.
Three token categories that carry as much meaning as color. The 8-tier spacing scale pushes values toward the middle: tighter micro gaps, wider section breaks, and a 28px card base that gives components room to breathe without feeling disconnected. Border radius is rounded enough to feel welcoming, structured enough to keep financial credibility. Shadows aren't just utility. The glow-violet and glow-champagne states mark discovery and achievement moments.
Light background, three-column Atoms / Molecules / Organisms grid. Atoms column shows live rendered buttons and badges. Molecules column shows a real metric card with an animated progress bar and an AI insight card. Organisms column shows a live dark funding card with a clickable-style button.
