The Design System Name Generator 🏭

A while back, at work, I had a meeting with the rest of the design team about the design system that we were trying to put in place. Without going into details about what a design system is right now, in that meeting we touched on the idea of naming our system. Most of the really cool systems also have cool names. For instance, Bulb, a British electrical company, has an amazing one called Solar, and Shopify’s system is called Polaris.

A good name is one that’s aligned with your system’s (and by extension your designers’) values. Polaris is the north star, which sailors and explorers used to guide them when they were lost, and this is likely something that resonated with Shopify’s design team. When I got out of that work meeting, I started to think of what values our team held, and what words might be associated with those values. It wasn’t long before my devsigner brain kicked in and came up with THIS sketch:

If you associate values to random words, you can theoretically generate a good design system name based on those values. “ice cream” would register higher under the “fun” value than, say, “broccoli.” So if your design team valued “fun”, ice cream would come out the winner, but if they valued “health” or something like that, broccoli would win. This is a pretty simple example, but it can also work with multiple values, or even ranked values!

I don’t know why, but my brain just imagined a big hulking steam-powered machine that took in values on one end and spit out words on the other! After sketching this, I immediately bought a good domain name, and in the following weeks I set to work making the drawing a reality. I set up a database in Firebase, and hosted all of the frontend on Github pages, and eventually ended up with this:

I also ended up tagging over 500 different words by hand using the Tagging Machine:

I actually came very close to publishing this! I just had another 200 or so words left to tag before I felt ready to put this wacky contraption into the world, and I’d even written a whole (unpublished) blog post detailing everything about the project. For some reason I never did that.

If you want, you can try it out, at , but taking a step back now, I’d like to take the design of this silly idea just a little bit further before doing an official launch. In terms of complexity, this is definitely in the top 3 of all the projects I’ve programmed, but I also want it to look good since it’s made for an audience of designers. I kind of just styled everything on the fly, directly in the code editor, and that’s not a very good way to design something.

So I made a new Figma project where I’m really starting from scratch with the design process. I made a mood board with a bunch of stolen pictures, I turned that into a colour palette, and I’ve been doing a materials study. I’m particularly proud of my polished-concrete texture. One of the great things about designing in Figma is that I know that everything I do can be translated into code, as long as I’m willing to put in the time to push those pixels with CSS and sweat the details.

The concrete material study. I looked at a lot of photos of polished concrete floors to figure out how the light bounces off the surface, and I’m pretty happy with the result! The window reflections should be more distorted, but Figma doesn’t have the tools for that right now.
It’ll be easy in CSS though.

I also found my dream loft, and later discovered that it was actually just a 3d render, and doesn’t exist in the real world πŸ™ƒ But like, #goals amirite?

I have a few more material studies left (tungsten, steel, and refining the aluminium and brick studies I started), then I’ll move on to components (all the buttons and levers) and then finally a responsive layout. It’s a lot of fun figuring out how to paint somewhat realistic materials with what will eventually be code.

This post is just a status update, but the next ones will be real, fresh design (and likely much shorter! πŸ˜‰). Steel beams, here I come! πŸ—

Leave a Reply