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

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

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.

- 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

Challenge

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

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

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

md.sys.secondary

md.sys.secondary

md.ref.sys.primary.40

md.ref.sys.primary.40

Schemes/SurfaceContainer

Schemes/SurfaceContainer

#B6892F

#B6892F

#DE3730

#DE3730

#76D57A

#76D57A

neutrlal.95

neutrlal.95

InversePrimary

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.

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.

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.

Bridging Design & Engineering

Let's Connect!

© Taek Been Nam 2025

Bridging Design & Engineering

Let's Connect!

© Taek Been Nam 2025

Bridging Design & Engineering

Let's Connect!

© Taek Been Nam 2025

Create a free website with Framer, the website builder loved by startups, designers and agencies.