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.

Different teams. Different components. 0 consistency.

Process

Agile, iterative, and never truly finished.

Phases loop back and inform each other continuously
Phase 01Research & Discovery
+
Phase 02Stakeholder Alignment
+
Phase 03Building & Iterating
+
Phase 04Documentation & Support
+
Phase 05Accessibility Reviews
+
Phase 06Continuous Feedback
+

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:

Primitives
blue-400
#3385ff
blue-500
#0066FF
teal-400
#2dd4bf
teal-500
#0d9488
teal-50
#f0fdfa
teal-700
#0f766e
gray-50
#f5f5f5
gray-100
#f5f2ee
gray-500
#888888
gray-900
#1a1a1a
white
#ffffff
Semantic Tokens
color.button.primary
references: blue-500
color.surface.default
references: white
color.text.default
references: gray-900
color.text.subtle
references: gray-500
color.border.default
references: gray-100

Semantics reference primitives. Switching themes rewires the reference, not the primitive.

Component
Card Title
A simple card component consuming semantic tokens.
Consuming semantic tokens

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.

S
Components / Button
Docs

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

import { Button } from 'dream-ui'

<Button variant="Primary" size="md" />

Preview

Primary
Secondary
Danger
Ghost

Props

variantstring"Primary"Visual style variant
sizestring"md"sm | md | lg
disabledbooleanfalseDisables interaction
onClickfuncClick handler callback

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.

T
Microsoft Teams
#dream-support

A dedicated channel for urgent requests, bug reports, and real-time help. Teams could reach the design system directly and get a fast response.

100+requests resolved
A
Airtable
Component Request Form

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.

01
Propose

Submit a new component idea via the Airtable request form with a use case and priority.

02
Build

Approved proposals are developed against Figma specs with React, TypeScript, MUI, and Storybook.

03
Review

Components are reviewed for design accuracy, accessibility standards, and code quality.

04
Merge

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.

60+
Components
built and shipped to production
40+
Projects
adopted Dream as their foundation
100+
Requests
resolved across support channels
3
Major Releases
versioned and shipped with change logs

"This is the most inspiring project I've seen on this stage."

AVP — UWM All IT Meeting

© 2026 Aleks Duni

© 2026 Aleks Duni

© 2026 Aleks Duni