From Vision to Reality
For three years, BetMGM’s annual product vision included a modern dark mode. But behind the scenes, legacy styling and hardcoded values made even simple visual changes difficult to deliver at scale.
In 2025, we set out to change that. By bringing the Dice design system (DS)’s semantic token architecture directly into the product, we found a way to turn years of design exploration into something we could actually ship.
I contributed to the token integration in code, helped designers transition their Figma files to semantic tokens, and led education efforts to establish a more scalable way of working across design and engineering.
The result was a fully realized dark mode for Sportsbook, launched ahead of the 2025 football season, and a foundation for future product-wide visual changes.
- Company
- BetMGM & Entain
- Role
- Senior Design Systems Designer
- Timeline
- April–September 2025
- Team
- 30+ cross-functional contributors
Background
A product vision stuck in Figma
Every year, the BetMGM design team explored how the Sportsbook experience could evolve. And for three consecutive years, that vision included a more modern, cohesive dark theme. The challenge was getting that vision into production.
Much of the product’s styling had been built using hardcoded values and legacy variables, making visual updates difficult to manage at scale. Over time, the Sportsbook had settled into a hybrid visual state, with light cards sitting on dark backgrounds. It was functional, but it didn’t reflect the design direction the team had been working toward.
Two underlying problems made it difficult to change.
Inconsistent adoption
Some areas of the product used variables, while others relied on hardcoded values. Without a consistent approach, changes had to be made manually across different parts of the codebase.
No semantic meaning
Existing variables weren’t always named or scoped according to their purpose. The same values could be used for text, backgrounds, and interactive elements, making it difficult to change one without affecting another.
Why did this matter?
Without a unified styling strategy, even relatively simple visual changes required significant engineering effort.
Introducing dark mode meant more than switching a few colors. It meant understanding how colors were being used across the product, replacing legacy styling, and creating a foundation that could support multiple themes without duplicating work.
How might we
Create a scalable way to bring our product vision into production?
Solution
Connecting the vision to the foundation
The opportunity came from something we had already been building: Dice DS’s semantic token architecture.
Rather than continuing to patch individual styles, we could use semantic tokens to connect the product’s visual language directly to the codebase.
The goal was bigger than launching dark mode. We wanted to establish a repeatable way for design and engineering to make visual changes together.
-
01
Proving it could work
Before asking teams to commit to a larger migration, our UX engineer built a proof of concept that mapped existing production styles to Dice DS’s semantic tokens.
Earlier approaches, including color inversion and overrides to legacy styling, hadn’t produced a reliable or scalable solution.
The proof of concept demonstrated that we could introduce a new visual theme without rebuilding the entire product.
It also gave leadership something tangible to test, helping turn an ambitious design vision into an achievable engineering initiative.
-
02
Integrating semantic tokens into code
With the approach validated, the next challenge was addressing the styling already scattered throughout the Sportsbook.
I worked alongside our UX engineer and product partners to identify and remap hardcoded hex values, legacy variables, and one-off styles to Dice DS’s semantic color tokens using CSS.
This meant moving away from values that simply described a color and toward tokens that described how that color should be used.
For example, rather than hardcoding the same gray across cards, surfaces, and interactive elements, each could reference a semantic token appropriate to its purpose.
This separation allowed us to update the product’s visual appearance more consistently, without manually changing individual values throughout the codebase.
-
03
Bringing design into alignment
Updating the code was only half the work. We also needed designers to adopt the same approach in Figma.
I helped teams remap existing designs to Dice DS’s semantic tokens so that the styling they used in design reflected what engineering could implement.
Instead of handing off individual hex values and expecting engineering to interpret them, designers could use tokens with shared meaning across Figma and code.
The goal was to make the relationship between design intent and implementation more predictable, while giving teams a foundation they could continue building on.
-
04
Educating teams on a new way of working
Semantic tokens were still a relatively new concept for many teams, so education was an important part of driving adoption.
I led six organization-wide workshops that explored the history of semantic tokens, how we built the architecture in Dice DS, and the value they brought to design and engineering.
Rather than jumping straight into how to use tokens, I wanted teams to understand the thinking behind them. Giving people that context made the technical concepts more approachable and helped them understand not just how to use tokens, but why they mattered.
Outcome
Three years of vision, finally in production
In September 2025, BetMGM launched a fully realized dark mode for Sportsbook ahead of the football season.
Beyond the visual refresh, the work established a shared color system between design and engineering. Designers could hand off tokenized Figma files, while engineers referenced the same semantic architecture in code.
That showed semantic tokens could support meaningful product changes at scale, not just consistency in a component library. It also opened a path for Casino and Player Experience, and a model that could eventually extend to spacing, sizing, typography, and other foundations.
- Values remapped500+
- Helped migrate hardcoded hex values and legacy variables to Dice DS’s semantic token architecture in the Sportsbook codebase.
- Organization-wide workshops6
- Led education sessions to help design and engineering teams understand semantic tokens and adopt new workflows.
Integrating semantic tokens in place of hardcoded values made theming possible at scale.
Industry callouts
The upgrades aren’t just under the hood. BetMGM gave the app itself a facelift with a sleeker design and a sharp new dark theme.
The dark theme feels right on the app.
Lessons learned
-
01
Prove it first, then ask for resources
One of my biggest takeaways was the value of making an idea tangible before asking teams to commit to it.
Dark mode had been discussed for years, but the proof of concept helped demonstrate that it was technically achievable.
That changed the conversation from whether we could do it to what it would take to make it happen.
-
02
Building the foundation is only half the work
We had already established the semantic token architecture through Dice DS, but having the infrastructure available didn’t automatically mean teams were ready to use it.
The migration required education, hands-on collaboration, and a shared understanding of why the approach mattered.
It reinforced something I think is true of most design systems work: the value of a system comes from how people use it, not simply from what you’ve built.
-
03
Good relationships make ambitious work possible
This project was only possible because of the partnership we’d built between BetMGM and Entain.
Working closely with engineering gave us the opportunity to understand the technical constraints, contribute directly to implementation, and find practical ways to move the work forward.
It was a reminder that even the best technical foundations need strong collaboration behind them to make a real impact.