Dream Design System
Read time:
6 min
Company:
United Wholesale Mortgage
Industry:
Mortgage
Start: Jan. 2024
End: Ongoing
Duration:
2 years, 4 months (ongoing)
UWM had no unified design system. Designers and developers were working from inconsistent patterns, duplicating work, and shipping products that felt different across the board. I was part of the team that changed that, helping build Dream, UWM's first design system, from the ground up using React, TypeScript, MUI, and Storybook, delivering a production-ready library of 60+ components adopted across 40+ internal projects.

My Role
My role on this project was cross-functional by nature. As part of a small team of developers and designers, I contributed across the full lifecycle of the design system rather than owning a single lane. On the development side, I personally built 30+ of the 60+ components in the library, working directly from design specifications in close collaboration with designers to ensure pixel-accurate implementation. On the design side, I contributed to component design decisions, flagged inconsistencies, and helped bridge the gap between what was designed and what was buildable.
Beyond building, I was responsible for managing minor releases, coordinating team communications, and handling consumer support for the system. This included fielding 100+ support requests from developers and product teams, helping them understand how to adopt components correctly, ensuring the system stayed well documented, and keeping it accessible to everyone using it.
I also played an active role in advocacy and organizational alignment. After the team developed a proof of concept, I was part of presenting the vision to the CTO, CMO, and VPs to secure organizational buy-in, and later presented system progress and adoption milestones to the entire IT organization during an All-IT Meeting. Alongside this, I collaborated with the A11Y team to audit and improve accessibility standards across the entire component library.
Problem
Without a shared foundation, UWM's digital products lacked consistency. Designers and developers worked from different sources of truth, teams solved the same problems independently, and accessibility had no formal standard. The result was duplicated effort, slower delivery, and a fragmented experience for the users navigating across those products. Dream was built to solve all of it.
Process
Agile, iterative, and never truly finished.
Solution
Component Library
At the core of Dream is a library of 60+ reusable UI components built in React, TypeScript, MUI, and Storybook. Each component was developed from Figma specifications in close collaboration with designers, applying atomic design principles to ensure every piece of the system was consistent, scalable, and purposeful.

Design Tokens and Theming
Dream was built around a robust token architecture covering color, typography, and spacing. The system supported multiple themes, with distinct token sets for different product suites, each offering light and dark modes, creating a shared design language that scaled across a diverse product ecosystem.
Token Architecture
Primitives hold raw values. Semantics reference primitives and switch per theme. Color and styles used in example below is not reflective of Dream Design System.
Select theme to explore effects:
Semantics reference primitives. Switching themes rewires the reference, not the primitive.
The colors, tokens, and styles shown here are illustrative examples only and are not reflective of the Dream design system.
Documentation
Storybook gave developers interactive component previews and code examples in a tool that fit naturally into their workflow. A Figma guidelines file gave designers component specs, usage rules, and design rationale in theirs. Both audiences had the documentation they needed without having to work in an unfamiliar tool.
Button
A versatile button component supporting multiple variants, sizes, and states. Built to WCAG 2.1 AA accessibility standards and available across all product suites.
Usage
<Button variant="Primary" size="md" />
Preview
Props
This is an illustrative mockup and is not reflective of the Dream design system.
Support Infrastructure
A dedicated Microsoft Teams channel gave consumers a direct line for urgent requests and questions. An Airtable feedback form allowed teams to submit suggestions and new component ideas on their own time. Together these two channels ensured no one was left without a path to get help or contribute to the system.
Real-Time Support
Two dedicated channels ensured every team had a path to get help or contribute to Dream.
A dedicated channel for urgent requests, bug reports, and real-time help. Teams could reach the design system directly and get a fast response.
A structured form where teams could submit new component ideas, improvements, and suggestions on their own time. Responses fed directly into the backlog.
Contribution Model
Clear contribution guidelines gave teams across UWM a path to propose, build, and submit new components to Dream, allowing the broader organization to participate in the system rather than work around it.
Propose. Build. Review. Merge.
A clear four step process so any team could contribute to Dream rather than work around it.
Submit a new component idea via the Airtable request form with a use case and priority.
Approved proposals are developed against Figma specs with React, TypeScript, MUI, and Storybook.
Components are reviewed for design accuracy, accessibility standards, and code quality.
Approved components are merged into Dream, versioned via SemVer, and released with change logs.
Outcome
From zero to a shared foundation trusted by the entire organization.
"This is the most inspiring project I've seen on this stage."
AVP — UWM All IT Meeting