Rubic
MoneyGram's Design System
Rubic is MoneyGram’s design system, created to support consistency, scalability, and accessibility across all digital products. More than just a collection of reusable components, Rubic helps express and reinforce the MoneyGram brand—through thoughtful design standards, guidelines, and patterns that bring its visual and verbal identity to life.
It includes comprehensive documentation, design tokens, component variants, usage guidelines, and copy rules—making it a valuable resource for both designers and developers to stay aligned and move faster together.
Lead Designer : Youmi Park
Designer : JW Yoon
Design System Challenges
-
The app redesign focuses only on core features like Home and Money Transfer, rather than a full overhaul. As a result, both the redesigned and legacy screens must share the same component library.
-
The web and mobile platforms use different text scaling systems, creating inconsistencies in typography across devices.
-
Some components appear too small on desktop, impacting usability and visual balance.
-
The iconography is evolving toward a new visual style, and this update needs to be applied consistently across both redesigned and legacy experiences.
Solution
We decided to adopt Rubic within a complex organizational structure to support scalability and alignment across teams.
At the foundation, we have Style and Icon libraries:
-
The Style library includes design tokens for color, spacing, and shadow, as well as logo assets.
-
The Icon libraries ensure consistent and maintainable icon usage across platforms.
On top of that, we have platform-specific component libraries:
-
The Web component library includes text styles for web, a web grid system, components, and patterns.
-
The App component library includes text styles for mobile, an app grid system, components, and patterns tailored for app experiences.
Design System Structure
Designers start with a template file that’s already linked to the correct web or app libraries, as well as the shared style and icon libraries—so there’s no confusion and everything stays consistent from the start!
RubiC
MoneyGram's Design System
I build, manage, and train teams on Rubic, MoneyGram's design system, ensuring consistency across products. Passionate about creating cohesive and scalable design systems.
Design Tokens
When designed with accessibility in mind, design tokens create inclusive experiences by standardizing elements
such as color, typography, spacing, and sizing.
Component Variants
Create scalable components with variants to provide designers with more flexibility and options in their designs.
Design System Documentation
Document design system as the source of truth for both designers and developers.
