League Logo & Color Libraries

One of the first things I did at NESN was create a robust league logo and team color library that we would use in all of our projects. I needed to get all of the official team and league logos from the NHL, MLB, NFL, NBA, WNBA, and a few other leagues to begin this task. From there, I also needed to make sure we had all of the official team colors (primary, secondary, tertiary, etc.) so we could call upon them in any project.

The logos seem pretty straightforward but not all of them are the same size, some of them have light and dark versions, and some teams use logo variants. I used 100px X 100px squares and set up a system to make sure they all felt similar sized. Most sat at 80px X 80px, but some, like the Detroit Red Wings, needed to be 92px wide to fit in the bounding box while still feeling the same size as an 80px counterpart.

The sizing and bounding boxes are very important for matchup graphics but also wherever we show team icons throughout NESN.com NESNBets.com, NESN 360 web, mobile app, and TV app.