Building Design Foundations
Building Design Foundations
Design system for form and function
Building the Rockstar Games website is as much about storytelling and branding as it is about UI. Working on gaming websites gives me the freedom to go deep on visual details and interaction—especially around motion, gradients, and how things feel as you move through the experience. Below are a few of the most interesting and challenging problems I worked on while helping shape the Foundry design system for Rockstar Games and related projects.
Design system for form and function
Building the Rockstar Games website is as much about storytelling and branding as it is about UI. Working on gaming websites gives me the freedom to go deep on visual details and interaction—especially around motion, gradients, and how things feel as you move through the experience. Below are a few of the most interesting and challenging problems I worked on while helping shape the Foundry design system for Rockstar Games and related projects.
Tokens
Tokens
To keep text readable on rich imagery, we often use a gradient overlay. Over the years, we ended up with hundreds of slightly different gradients, many with no clear reason to exist. I led an overhaul to streamline the gradients we use.
To keep text readable on rich imagery, we often use a gradient overlay. Over the years, we ended up with hundreds of slightly different gradients, many with no clear reason to exist. I led an overhaul to streamline the gradients we use.
caption
caption
By defining a consistent mask with clear color stops and a single base color, designers in Figma can now match gradients to an image’s color tone instead of defaulting to flat black. In code, this becomes one predictable tokenized value instead of a pile of one-off gradients.
By defining a consistent mask with clear color stops and a single base color, designers in Figma can now match gradients to an image’s color tone instead of defaulting to flat black. In code, this becomes one predictable tokenized value instead of a pile of one-off gradients.
GTAO
GTAO
For the GTA 6 marketing sites, we introduced six color themes tied to different character stories in the game.
For the GTA 6 marketing sites, we introduced six color themes tied to different character stories in the game.
Adaptive color theme variables
Adaptive color theme variables
I created the foundations for these themes so they could scale: background gradients, buttons, and states all pull from the same set of adaptive color variables. This keeps the experience consistent while still giving each story its own visual voice.
I created the foundations for these themes so they could scale: background gradients, buttons, and states all pull from the same set of adaptive color variables. This keeps the experience consistent while still giving each story its own visual voice.
Different color themes
Different color themes
Components
Components on Rockstar websites need to work across many breakpoints and layouts. We were moving away from static pages toward flexible, living components. When I designed the GTA Online Awards progression experience, there were more than 250 awards, each with multiple states. I started by auditing all awards and aligning on the anatomy of an “award” component.
Components
Components on Rockstar websites need to work across many breakpoints and layouts. We were moving away from static pages toward flexible, living components. When I designed the GTA Online Awards progression experience, there were more than 250 awards, each with multiple states. I started by auditing all awards and aligning on the anatomy of an “award” component.
Anatomy of awards component
Anatomy of awards component
This kicked off a conversation with developers to define which metadata we could reliably surface for players.
This kicked off a conversation with developers to define which metadata we could reliably surface for players.
Anatomy of awards component
Anatomy of awards component
Once we agreed on the underlying data, I mapped that into a component structure and wireframe based on the available APIs.
Once we agreed on the underlying data, I mapped that into a component structure and wireframe based on the available APIs.
Component wireframe based on APIs available
Component wireframe based on APIs available
From there, I placed the components back into real page contexts and focused on how players would actually interact with them.
From there, I placed the components back into real page contexts and focused on how players would actually interact with them.
The collapsed state for high-level progression; the expanded state for detailed instruction.
The collapsed state for high-level progression; the expanded state for detailed instruction.
We defined a collapsed state for high-level progression and an expanded state for detailed instructions. I built quick prototypes to test transitions, timing, and interaction patterns, then iterated until the reveal of information felt right.
We defined a collapsed state for high-level progression and an expanded state for detailed instructions. I built quick prototypes to test transitions, timing, and interaction patterns, then iterated until the reveal of information felt right.
Quick prototypes to test and fine tune transitions
Once the strategy for how information appears was solid, I locked down visual variations using a small set of key colors. These colors later became the foundation for color logic in other components. I created color sets and validated them for accessibility to ensure they worked across all states and backgrounds.
Once the strategy for how information appears was solid, I locked down visual variations using a small set of key colors. These colors later became the foundation for color logic in other components. I created color sets and validated them for accessibility to ensure they worked across all states and backgrounds.
Creating color sets and testing accessibility
Creating color sets and testing accessibility
With the structure and colors in place, I finalized the component with typography, spacing, and responsive behavior.
With the structure and colors in place, I finalized the component with typography, spacing, and responsive behavior.
Finalizing components with the color sets and typography
Finalizing components with the color sets and typography
Now everything is in place, we created a final interaction with the high-fidelity UI. Finally, I documented the high-fidelity interaction so the implementation matched the intended feel.
Now everything is in place, we created a final interaction with the high-fidelity UI. Finally, I documented the high-fidelity interaction so the implementation matched the intended feel.
Finalizing components with the color sets and typography
Finalizing components with the color sets and typography
As we added more motion to the site, it became important to document the “character” of the animations: timing, easing, and how different elements move. I captured these as part of the global design system, so animations across pages and products feel like they belong to the same brand—not a collection of one-off effects.
As we added more motion to the site, it became important to document the “character” of the animations: timing, easing, and how different elements move. I captured these as part of the global design system, so animations across pages and products feel like they belong to the same brand—not a collection of one-off effects.
Animation documentation
Animation documentation
Template
Rockstar has many franchises—Red Dead Redemption, Grand Theft Auto, Bully, Max Payne, and more. Defining how each IP keeps its own identity while still feeling like Rockstar was a big part of the work. For Get the Game templates, we built a flexible base that can take on different looks.
Template
Rockstar has many franchises—Red Dead Redemption, Grand Theft Auto, Bully, Max Payne, and more. Defining how each IP keeps its own identity while still feeling like Rockstar was a big part of the work. For Get the Game templates, we built a flexible base that can take on different looks.
Get the Game template with different look
Get the Game template with different look
The goal was to empower creators: keep the template simple, let content and assets do the heavy lifting. Every game page feels like its own character, but they all sit on the same underlying system. The hero template is another good example of my approach to website systems: start with a strong, reusable structure, then layer in brand and story through content, motion, and color.
The goal was to empower creators: keep the template simple, let content and assets do the heavy lifting. Every game page feels like its own character, but they all sit on the same underlying system. The hero template is another good example of my approach to website systems: start with a strong, reusable structure, then layer in brand and story through content, motion, and color.
Hero template
Hero template
We used the same approach for the Rockstar Games homepage. We built it from templates and components that content teams can reuse and remix without breaking the system.
We used the same approach for the Rockstar Games homepage. We built it from templates and components that content teams can reuse and remix without breaking the system.
Rockstar Games homepage
Rockstar Games homepage
For each template, component on the homepage, we document them and translated to data model that works for the new CMS system. The CMS now manages the entire Rockstar Games website in a way that is flexible for content creators and consistent for players.
For each template, component on the homepage, we document them and translated to data model that works for the new CMS system. The CMS now manages the entire Rockstar Games website in a way that is flexible for content creators and consistent for players.
The Content Management System that manages entire Rockstar Games website
The Content Management System that manages entire Rockstar Games website
Acknowledgments Some of the components and design tokens were initially built by me, then handed off to Matt and Natalia, who specialize in design systems at Rockstar Games. I don’t work directly on the core design system team, but a key contributor from the website side.
Acknowledgments Some of the components and design tokens were initially built by me, then handed off to Matt and Natalia, who specialize in design systems at Rockstar Games. I don’t work directly on the core design system team, but a key contributor from the website side.