NHL: Breakaway Design System

Problem

The NHL’s contract with Disney Streaming Services came to an end in 2023, and because our website was transferred back into our own hands, we had no official design system in place. In order to launch Dot Com (our new website), we had to build from the bottom up, and create our components from scratch.

Design System

I started off with explorations for color and text tokens, and given my background with tables, dove right into cell and table styles for both light and dark mode. I also created our first drop-downs and buttons, to name a few, in order to ensure consistency across all of our digital platforms.

Cell Types:

Table Explorations:

Components:

Conclusion

Our design system is still evolving, and although there is no official design system team, everyone works to contribute new components and enhance what we currently have in our library.