Overview

GTAVI is among the most anticipated video game of all time. For the first time in company history, Rockstar released a pre-launch website to give fans an early look at characters, locations, and more. This site required a brand new component library and my role was to establish the foundational system that made it possible.

Role

Role

Role

Product Designer - Design Systems

Product Designer - Design Systems

Product Designer - Design Systems

Responsibilities

Responsibilities

Responsibilities

Component library creation. Acted as the bridge between designers and devs.

Component library creation. Acted as the bridge between designers and devs.

Component library creation. Acted as the bridge between designers and devs.

LINKEDIN
RESUME
LINKEDIN
RESUME

The Opportunity

Our first trailer shattered records with over 250 million views, showcasing the massive scale of our fan base. That level of attention meant our site would face immense traffic, and we had one shot to make something special. Heading into the second trailer, we knew the demand would be just as intense, if not greater.

Our first trailer shattered records with over 250 million views, showcasing the massive scale of our fan base. That level of attention meant our site would face immense traffic, and we had one shot to make something special. Heading into the second trailer, we knew the demand would be just as intense, if not greater.

Our first trailer shattered records with over 250 million views, showcasing the massive scale of our fan base. That level of attention meant our site would face immense traffic, and we had one shot to make something special. Heading into the second trailer, we knew the demand would be just as intense, if not greater.

Our first trailer shattered records with over 250 million views, showcasing the massive scale of our fan base. That level of attention meant our site would face immense traffic, and we had one shot to make something special. Heading into the second trailer, we knew the demand would be just as intense, if not greater.

The Challenge

The Challenge

The Challenge

Consistency in spacing and text was a top request from leadership. We had to keep designs uniform across devices so our fans always had the same experience.

Consistency in spacing and text was a top request from leadership. We had to keep designs uniform across devices so our fans always had the same experience.

Consistency in spacing and text was a top request from leadership. We had to keep designs uniform across devices so our fans always had the same experience.

How our designs typically scale

How our designs needed to scale

1 minute read

How might we ensure visual
consistency across viewports?

1 minute read

How might we ensure visual
consistency across viewports?

1 minute read

How might we ensure visual consistency across devices?

1 minute read

How might we ensure visual consistency across devices?

Color Tokens

I was tasked with creating color themes that designers could apply across the site. These three alias tokens became the building blocks for each theme, ensuring consistency while giving us the flexibility to adapt styles across different contexts.

Background

Accent Light

Accent Dark

Color Tokens

I was tasked with creating color themes that designers could apply across the site. These three alias tokens became the building blocks for each theme, ensuring consistency while giving us the flexibility to adapt styles across different contexts.

Background

Accent Light

Accent Dark

Color Tokens

I was tasked with creating color themes that designers could apply across the site. These three alias tokens became the building blocks for each theme, ensuring consistency while giving us the flexibility to adapt styles across different contexts.

Background

Accent Light

Accent Dark

Color Tokens

I was tasked with creating color themes that designers could apply across the site. These three alias tokens became the building blocks for each theme, ensuring consistency while giving us the flexibility to adapt styles across different contexts.

Background

Accent Light

Accent Dark

Color Variable Modes

Color Variable Modes

Color Variable Modes

Variable modes proved to be a huge time-saver, allowing designers to quickly swap entire color themes and test which theme felt right for a character or location.

Variable modes proved to be a huge time-saver, allowing designers to quickly swap entire color themes and test which theme felt right for a character or location.

Variable modes proved to be a huge time-saver, allowing designers to quickly swap entire color themes and test which theme felt right for a character or location.

Our color themes went beyond backgrounds. We applied them to buttons, secondary elements, and text headings to form cohesive theme families across the experience.

Our color themes went beyond backgrounds. We applied them to buttons, secondary elements, and text headings to form cohesive theme families across the experience.

Our color themes went beyond backgrounds. We applied them to buttons, secondary elements, and text headings to form cohesive theme families across the experience.

Components

Buttons

Image Card

Bottom Sheet

More

A preview of some of the foundational components I was responsible for.

Components

Buttons

Image Card

Bottom Sheet

More

A preview of some of the foundational components I was responsible for.

Components

A preview of some of the foundational components I was responsible for.

Buttons

Image Card

Bottom Sheet

More

Components

A preview of some of the foundational components I was responsible for.

Buttons

Image Card

Bottom Sheet

More

Component Architecture

Behind the scenes of how I structure my components.

Component Architecture

Behind the scenes of how I structure my components.

Component Architecture

Behind the scenes of how I structure my components.

Component Architecture

Behind the scenes of how I structure my components.

Templates

Templates

Templates

As the system came together, I began transforming early designs into reusable templates that saved time and kept everything consistent.

As the system came together, I began transforming early designs into reusable templates that saved time and kept everything consistent.

As the system came together, I began transforming early designs into reusable templates that saved time and kept everything consistent.

Unforgettable Animations

Unforgettable Animations

Unforgettable Animations

The animations were a huge part our site’s success. Big shoutout to Pepe!

The animations were a huge part our site’s success. Big shoutout to Pepe!

The animations were a huge part our site’s success. Big shoutout to Pepe!

Launch Day Metrics

475m

Views across platforms

51m

Unique website visitors

6:17

6:17

Average session duration

Seeing our work celebrated across the globe was an unforgettable moment.

Conclusion

Being able to help reveal one of the most anticipated games in history to the world was an incredible opportunity and a defining career moment. Together, our team built an experience that could handle millions of fans at launch while keeping them engaged for minutes at a time, something rare for a marketing site. This project proved the impact thoughtful design can have at scale and gave us a foundation of systems, craft, and learnings to build on in the future.

© 2025 Matthew Alessandri

© 2025 Matthew Alessandri

© 2025 Matthew Alessandri