Upgrades – D3 Design System

During my time at D3 Security, I've been constantly working on our design system to meet the needs of our growing design team. We had an old design system that was created by design teams generations before me, and I thought it needed upgrades both visually and technically. I teamed up with Amy, a talented UX/UI designer, to create the latest version of our design system. I want to share the journey and outcomes of our collaboration.

But Why?

A design system is a big deal! It makes our whole application look and feel consistent. I want our UI elements to be pixel perfect and give the impression that everything is polished. More importantly, having a design system helps our design team speak the same language and work together seamlessly. Since our design philosophies and style have deviated since I took over as the team lead, we focused on identifying the design patterns we commonly use and created guidelines to keep everything in sync.

Atomic Design Methodology

To build a solid foundation for our design system, we did some digging. I initially read about atomic design methodology – I was amazed and really wanted to apply it. But I quickly realized that it was only good in theory but bad in practice. The distinction between each stage got blurry real fast once it got past the atomic size. I naturally turned to looking at what other big, experienced players like Apple, IBM, Google, and Atlassian were doing (especially Apple, because I am a huge fanboy). We analyzed what worked well and picked the best parts that suited our needs.

Then, we sorted our design system elements into categories: Foundations, Base, Components, and Modules. For each category, we wrote guidelines that covered the general usage for each element. When it came to building the components in Figma, I made sure that each element was accessible, easy to find (good naming) and that they were built properly with auto layout, layer names, comments, and variants. The inner OCD in me would not allow it otherwise.


Creating a design system is more than just categorizing UI elements together. It helps the designers in my team design with the same philosophies and ensure a baseline level of polish to our designs. Design systems are made by designers, for designers. Designers are finally the users – checkmate, Jakob Nielsen. (https://www.youtube.com/watch?v=gZeXyVJC-Jg) We may not have a design system as comprehensive as those of big companies yet, but we're always striving for constant improvement. Design systems should and will always be ever evolving.

Bucket list

Some of the items on my bucket list: