MGM Resorts INT'l
Vega Design System
An atomic, tokenized, cross-platform digital design system.
Abstract
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
Content guidelines
Full design & dev documentation
Cross-platform style & component library
Role
Product designer
Content designer
The foundations of the Vega Design System
Color styles
Creating a unified foundation
MGM Resorts had disparate design systems in simultaneous use, split across platforms and with no documentation in place—a massive technical debt preventing progress and inhibiting scale.
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.
Simplifying system architecture with design tokens
Building with design tokens centralized decisions around styles, behaviors, and content within the design system team while automating workflows for implementation and updates.
Introducing multiple levels of abstraction (core tokens, semantic tokens, component tokens) gave us more granular control over future changes and minimizing technical debt from the start.
Creating a cross-platform component library to support dozens of teams
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.
Detailed documentation codifies and scales decision-making
I created docs for both designers and developers that were hosted on zeroheight, covering topics from brand positioning and design principles to design tokens and interactions.
- Resources & release notes
- Brand positioning & guidelines
- Foundations & tokens
- Core components & complex components
- Illustration & iconography guidelines
- Content guidelines
I created extensive guidelines for executing written content in alignment with brand positioning and systemic applications for interface design, including accessibility, interactivity, cross-platform messaging, specifications, and more.
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.
Complex components
Credits
- VP, design: Vidya Ramamurthi
- Design director: Jimmy Walker
- Lead UI designer: Brenda Flores
- Product designer: Octavia Romano
- Product designer: Erik Maxwell
- Lead illustrator: Ashley Smith
- Motion designer: Rakesh Patel
- Lead developer: Rodrigo Lopes
- Lead developer: Diego Garcia
- Lead developer: Jamicko Tan