My Approach to Building Design Systems for a Decade Old Product

When I started on NBA 2K, the problems were obvious.

Too much information on every screen. Years of feature additions had made the interface bloated. The team was too small to clean up the entire game. Too many ideas pulling in different directions with no unified style.

I joined as a motion and UI artist. Even then, I was already consolidating assets and putting together guides to work faster. When I became lead, I went all in on this.

The product needed a design system. More than that, it needed someone willing to enforce it. Strictly. A style guide nobody follows is just a PDF.

Typography

Previously, designers used whatever fonts looked good to them. I set a limit: three font variations per screen.

Tough sell. Our menus were dense and designers used different sizes and colors to call attention to everything. But when everything is loud, nothing is loud. It's just noise.

The limit forced better decisions earlier. I started asking stakeholders to decide what the most important information on each screen was before we started designing. Three font treatments means you actually have to pick what matters.

(Slice of the StyleGuide: sample showing all possible font variations)

Design Tokens

Typography had defined scales: Title, Subtitle, Body, Stats Title, Stat Value, Spreadsheet. Designers picked from the set instead of styling text manually.

Colors were tokenized by function. Each game mode had two colors: a neon highlight for actionable items like button highlights and selected rows, and a secondary color used throughout the game. Components referenced a semantic token that resolved to the correct color based on which mode the player was in.

A secondary was color used throughout the game. The secondary refreshed yearly to keep things feeling new.

Text styles lived in Figma, but I also provided image references for game designers who didn't use Figma.

When we updated the look, I changed the asset guide and it cascaded throughout the game. One place to update, consistent results everywhere. This also translated in the game engine.

(Game mode colors worked as a theming system. Components referenced a single token that resolved to different colors based on context)

Color

Basketball is colorful. Murals, team branding, court art. All of that had been shoved into the interface over the years.

I gave each product area its own accent color for navigation, then stripped everything else back. Panels and backgrounds got quieter. But on screens where navigation wasn't the main event, I let them breathe. Full color, basketball culture, the whole thing.

The product still needs to feel alive. I wasn't going for minimalism. I just wanted color doing a job instead of filling space.

(Some examples of the pre-color standards era)

Components

After the style guide was solid, I went through the project and consolidated similar assets. Buttons, panels, text treatments. Brought the count from around 100 down to about 20.

I built flexible components that could transform into different shapes but only needed one update when we changed the look. This took years. The game is decades old and so were some of the assets. I worked with engineers to write scripts that hunted down old and hidden components throughout the codebase. Watching it all clean up was satisfying.

Then I built a reference guide inside the engine that designers and engineers could both use. If people can't find the system, they won't use it.

(Component library, kept low resolution for confidentiality)

What changed

The team could now refresh the product every year and spend more time on the fun stuff. The expressive features everyone actually wants to work on.

Conversations with leadership got easier too. Cleaner interfaces meant my pitches had less friction. Still took rounds of back and forth, naturally. But bottlenecks were clearer.

This is the work I like. Getting deep into Figma, building flows and guides, setting up systems that make the tedious stuff faster so people can focus on interesting problems. That's the good stuff.

(UI with a purpose, celebrating basketball culture while staying legible and clean)