AI Mortgage CRM Design System and Overhaul

The Challenge

Genius AI had an AI-powered mortgage CRM that had been vibe-coded across multiple developers with no shared design standards. Every page looked different from the next. Inconsistent color schemes. Mismatched card styles. Different table designs with different hover effects. Seven or eight competing frontend frameworks in the codebase.

The entire application had been built on 49-inch ultrawide monitors and never tested on standard displays. On a normal 4K monitor, content was pushed off screen with no way to scroll to it.

The CRM was functionally complex, housing six AI-powered features including a GPT-4o-mini chat assistant with 13 function-calling tools, a real-time voice AI assistant via WebRTC, and automated morning briefings. The technology under the hood was sophisticated. The frontend couldn't keep up.

There was no design system. No responsive foundation. No visual consistency. And the company needed a marketing site built from scratch ahead of an investor demo.

Our Approach

Week 1: Design System From Scratch

The design system came first. Before touching a single CRM page, we built the foundation: color palettes, typography scale, spacing tokens, animation standards, and 50+ reusable components. Built on React with Next.js, TypeScript, and CSS Modules.

This was the investment that made everything else possible. Every component that followed, from data tables to hero sections, shared the same visual DNA.

Week 2: Full CRM Overhaul

With the design system in place, all 25 CRM pages were overhauled and unified under one design foundation. Inline styles were stripped out. Competing frameworks were consolidated. Responsive breakpoints were implemented from mobile through ultrawide.

The CRM's AI features required careful frontend architecture:

• Chat Assistant used GPT-4o-mini with 13 function-calling tools that could query contacts, manage tasks, and handle notifications, all with role-based access controls for loan officers, admins, processors, and assistants
• Voice AI Assistant used OpenAI's gpt-realtime-mini model with WebRTC for sub-second latency real-time conversations, including barge-in support and server-side voice activity detection
• Morning Briefing System generated automated daily briefings with role-scoped content: loan officers saw their assigned contacts while admins saw tenant-wide stats
• Additional AI features included contact notes polishing, SMS rewriting to fit 160-character limits, and text-to-speech generation

Each of these features received a consistent, polished interface that matched the sophistication of what was running behind it.

Week 3: Marketing Site

A 5-page marketing site was designed and built from scratch for an upcoming investor demo. The site featured a custom-built hero animation: a self-drawing arc that transitioned into a futuristic glow effect with layered box shadows. Building this required a dedicated animation tool with 50+ adjustable variables for shadow depth, timing curves, and viewport-specific rendering.

The marketing site shared the same design system as the CRM, so the brand felt cohesive across both products.

Results

• 50+ reusable components built into a comprehensive design system
• 25 CRM pages overhauled and unified under one design foundation
• 5-page marketing site built from scratch in one week
• 6 AI-powered features given consistent, polished frontend interfaces
• Complete responsive overhaul from ultrawide-only to full viewport coverage
• Design system included color palettes, typography scale, spacing tokens, animation standards, and a custom hero animation tool
• Logo redesigned with 3D depth treatment, replacing the original flat mark
• Entire frontend delivered by a single design engineer in 3 weeks

Key Takeaway

This is what happens when a design engineer brings systematic structure to a vibe-coded codebase. The product didn't change. The AI features didn't change. But the frontend went from a collection of disconnected pages to a unified, responsive, professional application with a design system that could scale.

The same product. The same features. A completely different impression.