MGM RESORTS INT'L
VEGA DESIGN SYSTEM
Role: Product designer, content designer
An atomic, tokenized, and cross-platform digital design system.
A bespoke design system, translating brand positioning into a set of components, principles, and guidelines for creating scalable and accessible experiences through UI, content, motion, and illustration.
DELIVERABLES
Visual strategy
Cross-platform style & component library
Full design & dev documentation
Content guidelines
A mish-mash of styles
MGM Resorts had disparate design systems in simultaneous use, split across platforms and with no documentation in place—a tremendous technical debt preventing progress and inhibiting scale.
The brand's classic black and gold brand posed a number of limitations for digital products, but an "indigo" redesign swung too far in the other direction and was never implemented brand-wide. We led the effort to create a new, unified color palette to be applied brand-wide.
Unified foundations & design tokens
Beginning with an all-new color palette, created to serve the brand as a whole, we created an entirely new foundation, borrowing structures from Tailwind CSS and powered by a new set of design tokens.
• Colors
• Typography
• Grids & spacing
• Border radius & width
• Elevation
• Iconography
• Illustration
• Motion
• Tokens
The new color palette favored a deep blue in favor of black, paired with warmer gold tones which together evoke dusk in the desert. Along with grays, alert colors, and a secondary illustration palette, each color was expanded into a full tonal range to support myriad uses.
The grid system was simplified to minimize breakpoints, and a non-semantic type system was implemented to support a range of devices, from wearables to large touch screens.
Cross-platform component library
We built a platform-agnostic library of over 40 core components, styled with centralized design tokens and executed for production with React for web and Flutter for native platforms.
This library powered both customer and employee experiences for web, a native mobile app for iOS and Android, and on-premise touch devices such as guest check-in kiosks and front desk reservation management.
Documentation
Detailed documentation for both designers and developers was published to zeroheight and linked within Figma libraries, covering topics from brand positioning and design principles to design tokens and interactions.
Outcomes
The Vega design system brought visual unity to a legacy brand that had become divergent in its approach. It set a modern, automated, centralized source of truth that now powers a diverse range of products managed by separate teams. And it set a new standard for process, quality, and consistency for product teams.
CREDITS:
Agency: Superformula
VP, Design: Vidya Ramamurthi
Design Director: Jimmy Walker
Lead UI Designer: Brenda Flores
Lead Designer: Jonathan Miller
Product Designer: Octavia Romano
Lead Illustrator: Ashley Smith
Motion Designer: Rakesh Patel
Product Designer: Diana Pop
Product Designer: Erik Maxwell
Web Component Library Eng: Rodrigo Lopes
Native Component Library Eng: Diego Garcia, Jamicko Tan
