Building a Scalable Design System

When I first proposed migrating from Photoshop to Adobe XD, I knew it would be a large undertaking. Rather than overhauling everything at once, I took an incremental approach, each time a property came to us for updates, I used it as an opportunity to migrate that work into the new tool. This meant the system grew organically alongside real project needs, rather than as a separate initiative running in parallel.

Color Foundation

The foundation started with color. I established a naming scale from 100 to 1000+, intentionally leaving room for the system to grow. If a lighter red was ever needed down the line, we could slot in a red-50 without breaking the existing architecture.

Typography

With color established, I moved on to typography. Caesars uses Brown Pro as their brand typeface, and the goal was to define a clear, consistent scale that worked across the demands of a large touchscreen kiosk environment, from bold hero headlines down to fine print disclaimers.

I anchored the scale to the 8pt grid, meaning every font size is a multiple of 8. This keeps the type system consistent with the broader spacing system and makes implementation straightforward for developers, no arbitrary values.

The reason this works so well in practice comes down to how screens are built. The majority of popular screen sizes (phones, tablets, kiosks) are divisible by 8, which means elements sized and spaced on this grid sit cleanly on nearly any display without rounding errors or misalignment. Designing in multiples of 8 is essentially designing in the native language of most devices.

The scale starts at 80pt for large display moments and welcome screens, where the user needs to read information at a distance in a loud, bright casino environment. From there it steps down incrementally, covering headlines, subheadings, body copy, labels, captions, and button text.

Button Components

With the color and type foundations in place, I moved on to building out the button components. Kiosk interactions are fundamentally different from mobile. Users are standing, often in a loud and visually busy casino environment, tapping a large public screen with a finger rather than a thumb. Because of this, I set a minimum button height of 64pt across the board, well above the standard 44pt minimum recommended for mobile. This reduces mis-taps and gives users confidence when navigating through a transaction.

Each button was built with four states: active, hover, pressed, and disabled. The active state is the default, full-color gold. Hover introduces a subtle shadow to signal interactivity. Pressed flattens that shadow to give tactile feedback on touch. Disabled strips the color entirely to a muted gray, clearly communicating to the user that an action isn't available without requiring any additional explanation.

Building these as components was an essential part of the process. If a brand ever needed to update their kiosk design, changes could be made at the component level and cascade through the entire system automatically, no hunting down individual instances across dozens of screens.

It also meant that reskinning interface files for new properties down the pipeline became significantly faster and more predictable. What previously required rebuilding screens from scratch in Photoshop could now be handled by swapping tokens and updating a component in one place.