Designing the Design System
An inside look at Yext’s Consulting Team’s Cobalt Design System
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
It seems like nowadays design systems are all the buzz. Practically every major company that cares about its branding and visual identity has invested in making a comprehensive design system to live by. A design system is the North Star that guides businesses to a place of visual unity and consistency. Yext’s DC-based Consulting team is no different. We developed our design system some time back in 2017 when the concept of a design system was blowing up. I remember at the beginning it was quite daunting; I mean, where do you even start? Do you take inventory of what you have, or do you start at the philosophical level? Do you ask yourself what is the purpose of the design system? What principles, tenets, and rules will the system govern?
The design system is the North Star that guides businesses to a place of visual unity and consistency. At Yext, we are no different.
For us, it was a little bit of both. We knew we lacked that crucial philosophical piece, so we started there. After a bit of soul searching, the Consulting Design team eventually arrived at a clearer idea of what the purpose of our design system was going to be. We landed on a few important principles:
- Precise
- Flexible
- Transferable
- Efficient
- Repeatable
- Scalable
- Maintainable
To us, these were the most important pillars of our design system. If our design system couldn’t deliver on a few or even one of these, then it was back to the drawing board. As a team, we all needed to buy-in to these concepts and feel good about them before we moved forward.
After establishing the purpose of our design system, we needed to give it a name. All good design systems have a short, fun and snappy name, so we decided on Cobalt. To us, Cobalt perfectly captured the atomic and molecular nature of our system: cobalt is on the periodic table of elements so there was a natural tie-in with science, which reflected our principles, namely those of precision and repeatability. Finally, the name Cobalt represents the color itself, a rich and vibrant blue that we quickly adopted as our primary brand color.
After the name, we decided we needed a logomark and logotype to represent our system both internally and externally. I was tasked with the creation of this logo, but I received a lot of help from the team along the way. The earliest stages involved quite a bit of brainstorming and word association exercises to see if we could come up with a rough list of words related to Cobalt. Despite numerous hours sketching and doodling different logo concepts, I kept coming back to the simple idea of atoms. To me, the idea of taking something small, like an atom, and building something large and entirely different was what this design system was all about. Ultimately, I landed on a logo that reflected this notion.
During the construction process, I wanted to stay far away from visual gimmicks or overly clever innuendos. Instead, I opted for a more subtle portrayal, relying on clear and simple type composed of geometric shapes to reinforce the idea of science and math. For the logomark, I used cobalt’s elemental abbreviation: CO, again to reflect the scientific nature of our philosophy. The only enhancement I made here was I wanted to subtly infer the idea that CO was also two circular atoms, with one overlapping the other, forming a sort of covalent bond (that’s a science class term, right?). Overall, I was quite satisfied with the final logo, but I was more excited to begin the next stage in the process: developing the design library.
