Current State vs. Target Direction
A visual breakdown of Steddy's existing design system compared to the professional, trustworthy direction inspired by Wise, Coinbase, and Apple.
The current UI uses indigo/purple as the primary color, pastel pink-blue gradient backgrounds, 10px border radius, and decorative colored icon badges. This combination reads as "consumer SaaS startup" rather than "financial underwriting platform where real money decisions happen."
Current CSS Custom Properties
Extracted from the live app's :root selector. Because Steddy uses shadcn/ui, updating these values changes the entire app instantly.
--primary--background--foreground--border--muted-foreground--accent--destructive--radiusColor Palette Comparison
The current palette leans decorative. The target is functional — color only where it communicates status or guides action.
Indigo bleeds into borders, accents, and sidebar. The gradient background adds warmth that conflicts with a professional financial tone. Status badges use a random assortment of colors with no clear meaning system.
No brand color in borders or backgrounds. Color is reserved for status indicators and CTAs only. The neutral ramp carries the visual hierarchy.
Type Scale Recommendation
Establish a strict 4-level hierarchy. Drop ALL CAPS except for status badges. Let numbers be the heroes in financial data.
From Soft to Professional
The sweet spot for fintech is 4-8px. Soft enough to feel modern, tight enough to feel serious. The current 10px reads playful.
3-Tier Elevation System
When the gradient background goes away, proper subtle shadows communicate hierarchy. All three targets use barely-visible shadows that you feel more than see.
Key Component Changes
Side-by-side comparison of the component patterns that need to evolve.
5 Token Changes That Transform Everything
Because Steddy uses shadcn/ui's CSS custom property system, these five changes instantly shift the entire app from "playful" to "professional" — no component rewrites required.
#FFFFFF or #FAFAFA--primary from 234 70% 62% to 145 70% 30%--radius from 0.625rem to 0.375rem--border from 214 32% 91% to neutral 0 0% 90%Because Steddy uses shadcn/ui's CSS custom property system, updating these 5 token values propagates through every component in the app instantly. The engineering lift is minimal — it's a CSS file change, not a codebase rewrite.
Product-Level Positioning
Marketing sites were reviewed first — then actual product screens. The product view tells a more nuanced story, and confirms Steddy's direction is well-differentiated on what actually matters.
White background with a dark sidebar — light-mode product despite the dark marketing site. Dense form layout with many small fields, tabs, and sidebar menus. No clear visual hierarchy; everything competes for attention.
Functional but dated. Feels like a legacy CRM — not an underwriting platform built for focus and speed.
The strongest product in the group. Dark sidebar, clean white content area, large metric tiles with good hierarchy. Uses green for positive financial figures. Data-forward and well-structured — the most credible competitor at the product level.
Closest competitor to Steddy's target aesthetic. Their brand accent is indigo — Steddy's current color. Moving to green creates immediate differentiation from the most design-mature rival.
Cleaner product than the marketing implies — light gray background, icon sidebar, generous whitespace. But the product is clearly a sales CRM (funnels, call conversion, lead tracking), not an underwriting platform.
Different use case — not a direct threat at the workflow level. No overlap in the core underwriting experience Steddy is building.
White background, form-heavy admin panel with toggles, search fields, and tag chips for industry/NAICS classification. Despite the bold marketing, the product is utilitarian — it reads more like a rules configurator than a polished underwriting UI.
Biggest gap between marketing and product. The AI-first brand promise isn't matched by the product experience.
Pathway is the benchmark to beat at the product level — they have the cleanest data UI of the group. But their brand color is indigo, which is exactly where Steddy sits today. The move to dark green creates immediate visual separation from the most credible competitor, while the design direction (clean white, strong hierarchy, data as hero) outpaces the rest of the field. No competitor combines polished product design with green branding. That combination is Steddy's to own.
Steddy UI Redesign · Style Audit · April 2026
Design direction: Wise, Coinbase, Apple · Professional, trustworthy, tech energy