DollarWise Design Token System

How Figma Variables & Design Tokens Built Trust Between Design & Engineering and Set the Foundation for Scalable Design System

DollarWise Design Token System

How Figma Variables & Design Tokens Built Trust Between Design & Engineering and Set the Foundation for Scalable Design System

DollarWise Design Token System

How Figma Variables & Design Tokens Built Trust Between Design & Engineering and Set the Foundation for Scalable Design System

DollarWise Design System (DWDS) is an evolving library of tools, standards, and best practices for building DollarWise mobile app. It is developed based off on Material 3 UI Kit and has been customized to reflect the brand identity of DollarWise product.

Team

Manager
Mobile engineers

Role

Product Designer

Scope

Design Token,
UI Library,
Dark Mode,
Stakeholder Buy-In

Timeline

Feb 2025 - Jul 2025

Overview

As a sole designer on the team, I evolved Material UI Kit in to a custom design system that reflect DollarWise's brand identity.
Improved efficiency in the design process up to 100%, including dark mode design, theme updates, and component management.

Impact

- Ship new brand update 2X faster.
- Reduced dark mode design implementation time by 50%
- Consolidated 4 disjointed color schemes into 1 unified color system
- Established a foundation for scalable design system.

Challenge

How might we address the growing design debt and design-to-engineering gap without slowing down MVP delivery timeline?

md.sys.secondary

md.ref.sys.primary.40

Schemes/SurfaceContainer

#B6892F

#DE3730

#76D57A

neutrlal.95

InversePrimary

md.sys.secondary

md.ref.sys.primary.40

Schemes/SurfaceContainer

#B6892F

#DE3730

#76D57A

neutrlal.95

InversePrimary

While Material UI Kit helped us launch V1 quickly, it couldn't support our evolving brand identity and growing product needs.

Ironically, the robustness of the system became a constraint, and everyone on the team began to override design decisions on the fly, ultimately creating growing distrust between design and engineering teams, constraining product growth.