The Design System Name Generator šŸ­
The Design System Name Generator šŸ­

The Design System Name Generator šŸ­

Tags
Javascript
CSS
HTML
Design System
Name Generator
UI
Design
Published
Published on November 15, 2020
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:
notion image
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:
notion image
I also ended up tagging over 500 different words by hand using theĀ Tagging Machine:
notion image
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Ā designsystem.nameĀ , 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.
notion image
notion image
Ā 
notion image
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?
notion image
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! šŸ—