Artemis design system

The toughest part about this project honestly was finding the data to sell to not only stakeholders (design leadership), but also other designers, that the time and resources needed for this investment was worth it. In order to get this buy-in, I first sent out a survey to our design team to figure out how our current system using Sketch + Abstract was performing. It became immediately clear that the current system was not working and needed to be rebuilt.

Once we had buy in to begin, I needed to figure out our library architecture and what problems we were trying to solve for our design team. The main problem I was seeing was designers using the wrong components between mobile and web designs. To solve this I went with a platform specific library approach.

Our VP of Design liked this approach but wanted to drive more consistency across our native experiences. This meant two things:

1. I would consolidate our “iOS” and “Android” libraries into one “Mobile Kit” since there was no desire to have unique visual experiences there.

2. Similarly, I needed to add a "shared" library for components that were not global tokens, but that did stretch across our two platform libraries (buttons, forms, rows, etc.).

Midway through this migration process, there came about a need for supporting a “dark mode” theme. First I wanted to figure out if we would need to optically tweak our UI colors on a dark background for accessibility. I found that using colors within our 100-300 range worked best as they were less saturated.

Once the color system was figured out, it was time to apply the mapping to create our dark theme variants. This was done just to make sure this system would work across all of our elements and components.

*Note that this work was done before Figma release their support for color variables. Had that existed, the dark themes would have been mapped at the token level. But alas, I had to figure out a different way since that was not an option yet.

I looked at different ways we could structure our library to support light and dark themed libraries. I even explored theme specific layers/components nested within a single master component where a user could show/hide their theme-specific layers.

In the end, I felt that approach would end up making our components too complex to manage over time, especially if additional themes were added. Luckily, this was right when Figma released their variants feature, which made theming very easy from a system perspective.

The final change I wanted to make to our new library was to update our components to strictly adhere to a 4 px grid. Historically, our type library was not the most consistent. While some text styles sat on a 4 px grid, others did not. In order to achieve a more predictable, vertical rhythm in our product, we wanted to make sure all of our text styles would align to this grid.

With our architecture set and our text styles updated, the team could start rebuilding our elements and components. You can see the minor adjustments below (old grid on the left, new on the right).

All in all, it was a very successful project and one that I am very proud of to this day because it not only made our design team far more efficient, but because it seemed to bring a lot of joy back to the design team. They no longer feared the system - they embraced and trusted it. Below you can see a snapshot of the system's revamped global styles.