Reframed the problem from an 'inconsistent brand' to an 'absent design logic' crisis. Then built the system to fix it.
Company
reAlpha Tech Corp.
Timeline
2025 -
2026
Role
Fractional Design Systems Architect / Product Design Lead
Context
reAlpha is an AI-powered real estate platform spanning home search, mortgage, and title services. As a fractional Head of Product Design, I worked cross-functionally with engineering and executive leadership across a multi-product platform with no shared design foundation.
Challenge
I was brought in to fix an inconsistent brand, but auditing the codebase and Figma file structure revealed the problem was deeper. The platform ran on hardcoded values, inconsistent naming conventions, and ad hoc component decisions, with no semantic logic connecting design intent to code. In Figma, the tokens were organized without defined roles. For example, the "semantic" color tokens for 'border' offered seven values arranged on a gray scale from --border-lightest-neutral to --border-darkest-neutral describing shades, not purposes. A designer had to guess which gray belonged on a card border, an input field, a form field, a divider, etc. The same pattern held across typography, backgrounds, and icons. All told, there were over 170 color tokens in Figma and no clear guidance on which to use.
On the engineering side, without a solid source of truth, the dev team reverse-engineered every handoff which resulted in a gap between what was being designed in Figma and the actual product being shipped. From a consumer standpoint, the product didn't feel cohesive. Not because the brand was wrong, but because nothing was enforcing it consistently.
The real problem wasn't aesthetic. It was an absent design logic.
Process
I started with a full audit of reAlpha's Figma files and codebase to understand exactly where the system had broken down. From there I built the case for a design system across multiple audiences, framing it differently for designers (consistency and speed), engineers (1:1 handoff parity), and leadership (brand elevation and a non-negotiable prerequisite for the company's AI-assisted product development strategy). That multi-audience framing was what secured C-suite greenlight.
With approval in hand, I built the design system in Figma myself, using shadcn/ui as the foundation because the engineering team had built the product on the shadcn/ui platform. I customized the design system to reAlpha's overall brand identity and existing production components so that the rollout wouldn't cause a jarring visual shift. I defined 50 to 950 primitive color scales, mapped them to a full semantic token layer using OKLCH values for precision across light and dark modes, and aligned all component structures to Tailwind CSS for seamless cross-functional handoff.
Naming conventions were designed to be legible to both designers and AI tooling. To bridge the Figma system to code implementation, I conducted an analysis of a 1,500+ line legacy globals.css file containing multiple parallel color systems, inconsistent naming conventions, and raw hex values in place of standardized variables. I catalogued 100+ legacy color references, determined the migration path for each one, and delivered a comprehensive mapping spreadsheet to the lead developer as an implementation reference, covering legacy and new token names, OKLCH values, CSS implementation rules, codebase usage status, and a Tailwind v4 alias architecture tab. To protect the rollout, I proposed an alias bridging strategy that mapped legacy token names to new semantic tokens, allowing the new global CSS to ship without breaking existing pages.
To preserve all this detailed work and prevent the system from regressing the way the legacy system had, I established a Design System Guardian governance framework: single approval authority, mandatory changelog documentation, and leadership sign-off on all system changes.
Solution
What came out of this process is the reAlpha_shadcn/ui Design System, a comprehensive Figma design system mapped to reAlpha's brand identity, built on shadcn/ui and Tailwind CSS, with a full semantic token architecture, Figma variable modes for light and dark, and rationalized component variants closing every gap the prior library left open.
Engineers get a structure to build from instead of reverse-engineer. Designers get token names that tell them what to use, not just what exists.
As a validation of the system's structure, Claude Design was able to successfully consume reAlpha_shadcn/ui, a meaningful signal that the naming conventions and token logic were coherent enough for AI tooling to parse, not just human designers.
Results
The reAlpha_shadcn/ui Design System is built, documented, and approved at the executive level as the standard for all new design work at reAlpha. The Design System Guardian framework is active with a structured process for component requests, gap escalations, and mandatory changelog documentation ensuring the system stays governed rather than drifting. Rollout is underway, with new design projects building exclusively in the new system and legacy work migrating on a sequenced timeline.
What began as a surface-level branding problem became a full design-to-code infrastructure overhaul. The absent design logic replaced with a governed, scalable system the entire platform now builds on.
What reAlpha needed wasn't a visual fix. It was a foundation. Now they have one.
Reframed the problem from an 'inconsistent brand' to an 'absent design logic' crisis. Then built the system to fix it.
Company
reAlpha Tech Corp.
Timeline
2025 -
2026
Role
Fractional Design Systems Architect / Product Design Lead
Context
reAlpha is an AI-powered real estate platform spanning home search, mortgage, and title services. As a fractional Head of Product Design, I worked cross-functionally with engineering and executive leadership across a multi-product platform with no shared design foundation.
Challenge
I was brought in to fix an inconsistent brand, but auditing the codebase and Figma file structure revealed the problem was deeper. The platform ran on hardcoded values, inconsistent naming conventions, and ad hoc component decisions, with no semantic logic connecting design intent to code. In Figma, the tokens were organized without defined roles. For example, the "semantic" color tokens for 'border' offered seven values arranged on a gray scale from --border-lightest-neutral to --border-darkest-neutral describing shades, not purposes. A designer had to guess which gray belonged on a card border, an input field, a form field, a divider, etc. The same pattern held across typography, backgrounds, and icons. All told, there were over 170 color tokens in Figma and no clear guidance on which to use.
On the engineering side, without a solid source of truth, the dev team reverse-engineered every handoff which resulted in a gap between what was being designed in Figma and the actual product being shipped. From a consumer standpoint, the product didn't feel cohesive. Not because the brand was wrong, but because nothing was enforcing it consistently.
The real problem wasn't aesthetic. It was an absent design logic.
Process
I started with a full audit of reAlpha's Figma files and codebase to understand exactly where the system had broken down. From there I built the case for a design system across multiple audiences, framing it differently for designers (consistency and speed), engineers (1:1 handoff parity), and leadership (brand elevation and a non-negotiable prerequisite for the company's AI-assisted product development strategy). That multi-audience framing was what secured C-suite greenlight.
With approval in hand, I built the design system in Figma myself, using shadcn/ui as the foundation because the engineering team had built the product on the shadcn/ui platform. I customized the design system to reAlpha's overall brand identity and existing production components so that the rollout wouldn't cause a jarring visual shift. I defined 50 to 950 primitive color scales, mapped them to a full semantic token layer using OKLCH values for precision across light and dark modes, and aligned all component structures to Tailwind CSS for seamless cross-functional handoff.
Naming conventions were designed to be legible to both designers and AI tooling. To bridge the Figma system to code implementation, I conducted an analysis of a 1,500+ line legacy globals.css file containing multiple parallel color systems, inconsistent naming conventions, and raw hex values in place of standardized variables. I catalogued 100+ legacy color references, determined the migration path for each one, and delivered a comprehensive mapping spreadsheet to the lead developer as an implementation reference, covering legacy and new token names, OKLCH values, CSS implementation rules, codebase usage status, and a Tailwind v4 alias architecture tab. To protect the rollout, I proposed an alias bridging strategy that mapped legacy token names to new semantic tokens, allowing the new global CSS to ship without breaking existing pages.
To preserve all this detailed work and prevent the system from regressing the way the legacy system had, I established a Design System Guardian governance framework: single approval authority, mandatory changelog documentation, and leadership sign-off on all system changes.
Solution
What came out of this process is the reAlpha_shadcn/ui Design System, a comprehensive Figma design system mapped to reAlpha's brand identity, built on shadcn/ui and Tailwind CSS, with a full semantic token architecture, Figma variable modes for light and dark, and rationalized component variants closing every gap the prior library left open.
Engineers get a structure to build from instead of reverse-engineer. Designers get token names that tell them what to use, not just what exists.
As a validation of the system's structure, Claude Design was able to successfully consume reAlpha_shadcn/ui, a meaningful signal that the naming conventions and token logic were coherent enough for AI tooling to parse, not just human designers.
Results
The reAlpha_shadcn/ui Design System is built, documented, and approved at the executive level as the standard for all new design work at reAlpha. The Design System Guardian framework is active with a structured process for component requests, gap escalations, and mandatory changelog documentation ensuring the system stays governed rather than drifting. Rollout is underway, with new design projects building exclusively in the new system and legacy work migrating on a sequenced timeline.
What began as a surface-level branding problem became a full design-to-code infrastructure overhaul. The absent design logic replaced with a governed, scalable system the entire platform now builds on.
What reAlpha needed wasn't a visual fix. It was a foundation. Now they have one.