I design, I develop, I make


A maker based in Upstate New York.
Turning ideas into applications.

© 2024 Mubashar Iqbal

Superbowl LI Hackathon

February 7th, 2017

I decided to do some multitasking while watching Superbowl LI, a short hackathon to make a start on a web app.


I tweeted on Wednesday that I was going to do hackaton, and asked for some ideas. I got some interesting suggestions:




Some stellar ideas, but I needed something that I could get into some sort of working state in the 3 hours it normally takes to play a Superbowl.

Finishing a web app in 3 hours is bit of a challenge, but I was pretty sure I could get something useable enough to share with world.

The Idea

I’m not a designer, I pretend to be sometimes.

I struggled picking the right color for my designs, so I built Cymbolism to help. I also struggle with picking the right fonts to use in my designs, and none of the tools I found were exactly what I was looking for.

I decided to start on building a web app that allows you to easily try different web font combinations, starting with fonts available from Google Web Fonts.


I knew I wouldn’t have time to branding and build the web app, but I wanted to at least come up with a good name.

Playing League of Legends, I’m always looking to land a Wombo Combo with my team, this process of combining abilities came to mind when I thought about trying to find the perfect font combination for a design.

I played with the words a little checked what was available to register, and arrived at: Wombos

Let the Games Commence

It was quite difficult to wait until the start of the game before I could start making. But as soon as balled was kicked to start the game, I got started started.


I used my preferred Laravel based stack and decided to build the web app in public, so I made the code available on Github.

_Contribute to wombos development by creating an account on GitHub._github.com

Everyone was free to follow along as I built the app. I didn’t think many people would, so I decided to host the site on Heroku and deployed often. I like quick and easy it to get hosting setup with Heroku, and pretty much free while you’re in development, especially for what I needed.

I used the Google Fonts API, to get a the list off all fonts available, and built a quick Bootstrap/JQuery based user interface to allow the user to select 3 different fonts used on some common scenarios. I also added an alternative dark color scheme. Whenever the user selected a new font, the display would be updated automatically to reflect the change.

I thought it would be good to show users some popular combinations that might work for their design project, so I added to the user controls.

User controls

That was about all I planned to build for the hackathon.


Due to the overtime, I ended up having 4 hours to get started on my web app, and I’m pretty happy with how things turned out.

The Future

I have lots of other ideas for Wombos: From more style guide templates, to other color schemes, and other font sources.

I plan to continue developing Wombos, and will also extend the tool to help people pick color combinations too.

Superbowl Sunday was a lot of fun. I watched a great game of Football, and managed to get a head start on a web app I’ve been meaning to build for a long time.

Checkout Wombos and let me know what you think in the comments below.