Building a design system from scratch for Fanatics Collectibles

Tokens, components and documentation for the platform behind officially licensed trading cards.

Design Systems

B2B SaaS

Web App

Building a design system from scratch for Fanatics Collectibles

Tokens, components and documentation for the platform behind officially licensed trading cards.

Design Systems

B2B SaaS

Web App

Spoiler

Fanatics Collectibles needed one consistent interface for the platform where its factory and partners create officially licensed trading cards. I was the designer dedicated to the design system in a team of six. I built it from scratch on top of MUI and Tailwind, delivered tokens engineers used in React, and made the UI decisions for the redesign, including the Crop Tool.

Spoiler

Fanatics Collectibles needed one consistent interface for the platform where its factory and partners create officially licensed trading cards. I was the designer dedicated to the design system in a team of six. I built it from scratch on top of MUI and Tailwind, delivered tokens engineers used in React, and made the UI decisions for the redesign, including the Crop Tool.

Spoiler

Fanatics Collectibles needed one consistent interface for the platform where its factory and partners create officially licensed trading cards. I was the designer dedicated to the design system in a team of six. I built it from scratch on top of MUI and Tailwind, delivered tokens engineers used in React, and made the UI decisions for the redesign, including the Crop Tool.

Problem

Fanatics Collectibles produces officially licensed trading cards. Its factory teams and partners create them on a desktop platform, from setting up products to preparing card artwork. That platform grew through acquisitions, so every tool had its own patterns, spacing and components.

The work is data heavy: long tables, long forms, many states on a single screen. A generic component library breaks fast under that load. And the new system had to be adopted by five other designers and the engineering team while everyone kept shipping features.

Problem

Fanatics Collectibles produces officially licensed trading cards. Its factory teams and partners create them on a desktop platform, from setting up products to preparing card artwork. That platform grew through acquisitions, so every tool had its own patterns, spacing and components.

The work is data heavy: long tables, long forms, many states on a single screen. A generic component library breaks fast under that load. And the new system had to be adopted by five other designers and the engineering team while everyone kept shipping features.

Problem

Fanatics Collectibles produces officially licensed trading cards. Its factory teams and partners create them on a desktop platform, from setting up products to preparing card artwork. That platform grew through acquisitions, so every tool had its own patterns, spacing and components.

The work is data heavy: long tables, long forms, many states on a single screen. A generic component library breaks fast under that load. And the new system had to be adopted by five other designers and the engineering team while everyone kept shipping features.

My Role

Senior Product Designer via Ryz Labs, from jun 2024 to jun 2025. I owned the design system inside a team of six designers, including our design lead, and worked with front-end engineers on React, MUI and Tailwind. I was responsible for foundations, tokens and components, the UI decisions for the redesign, developer handoff, and the documentation that explains how the system is used and how it changes.

My Role

Senior Product Designer via Ryz Labs, from jun 2024 to jun 2025. I owned the design system inside a team of six designers, including our design lead, and worked with front-end engineers on React, MUI and Tailwind. I was responsible for foundations, tokens and components, the UI decisions for the redesign, developer handoff, and the documentation that explains how the system is used and how it changes.

My Role

Senior Product Designer via Ryz Labs, from jun 2024 to jun 2025. I owned the design system inside a team of six designers, including our design lead, and worked with front-end engineers on React, MUI and Tailwind. I was responsible for foundations, tokens and components, the UI decisions for the redesign, developer handoff, and the documentation that explains how the system is used and how it changes.

Process

We didn't start from a blank canvas. MUI and Tailwind gave us a base, so the real work was deciding what to keep, what to customize and what to rebuild for a platform this dense. I built from foundations to components to full pages, so every new screen could be assembled from parts that already existed.

Customizing MUI for dense data

MUI covered the basics, but most components needed real changes to work on this platform. The ones that carried the most weight were redesigned:

  • Tables for long content and many row states

  • Cards that hold dense product data

  • Tabs for screens with many sections

  • Forms for long product setups

Keeping MUI underneath let engineers keep what already worked. We changed visuals and behavior where the platform needed it. Responsive was dropped on purpose, so the time went into density and data components instead of breakpoints.

Tokens in code and documentation

I defined color, type, spacing and radius as Figma Variables, and engineers consumed the same tokens in React, so a change in Figma had a clear path to production. Every component has usage guidelines in Figma, and a Confluence hub explains how the system works. Updates went out on Slack so the other designers always knew what had changed.

Solution

The system has three layers. Foundations set the visual language. Core components cover the everyday interface. Data components handle the dense tables and forms the platform runs on. Documentation sits on top, with usage guidelines for every component. The redesign, including the Crop Tool, was built on it.

Solution

The system has three layers. Foundations set the visual language. Core components cover the everyday interface. Data components handle the dense tables and forms the platform runs on. Documentation sits on top, with usage guidelines for every component. The redesign, including the Crop Tool, was built on it.

Solution

The system has three layers. Foundations set the visual language. Core components cover the everyday interface. Data components handle the dense tables and forms the platform runs on. Documentation sits on top, with usage guidelines for every component. The redesign, including the Crop Tool, was built on it.

Outcome

The system lives in code. Engineers build with its tokens in React, the other five designers use it every day, and the redesign and the Crop Tool were built on it. Every component is documented with usage guidelines.

The hardest part wasn't picking a library. It was deciding, component by component, what to change so it held up under dense data, and what to leave alone so engineers could move fast.

Scope is a design decision. Saying no to responsive gave us the time to get density right.

Outcome

The system lives in code. Engineers build with its tokens in React, the other five designers use it every day, and the redesign and the Crop Tool were built on it. Every component is documented with usage guidelines.

The hardest part wasn't picking a library. It was deciding, component by component, what to change so it held up under dense data, and what to leave alone so engineers could move fast.

Scope is a design decision. Saying no to responsive gave us the time to get density right.

Outcome

The system lives in code. Engineers build with its tokens in React, the other five designers use it every day, and the redesign and the Crop Tool were built on it. Every component is documented with usage guidelines.

The hardest part wasn't picking a library. It was deciding, component by component, what to change so it held up under dense data, and what to leave alone so engineers could move fast.

Scope is a design decision. Saying no to responsive gave us the time to get density right.

Process

Process

Fanatics website ↗

Back

Next project